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O'Reilly Media,Inc. 介 绍 


O'Reilly Media 通 过 图 书 、 杂 志 、 在 线 服务 、 调 查 研究 和 会 议 等 方式 
传播 创新 知识 。 自 1978 年 开始 ，O'Reilly 一 直 都 是 前 沿 发 展 的 见证 者 和 
推动 者 。 超 级 极 客 们 正在 开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 
通过 放大 那些 “细微 的 信号 ?来 刺激 社会 对 新 科技 的 应 用 。 作 为 技术 
蚤 光大 。 


O'Reilly 为 软件 开 太 人 员 带 来 革命 性 的 “动物 书 ”， 创 建 第 一 个 两 业 
网 站 (GNN) ; 组 织 了 影响 深远 的 开放 源 代码 峰会 ， 以 至 于 开源 软件 运 
动 以 此 命名 ; 创 并 了 Make 灯 志 ， 从 而 成 为 DIY 革 命 的 主要 先锋 ， 公 司 一 
如 既往 地 通过 多 种 形式 缔结 信息 与 人 的 纽带 。O'Reilly 的 会 议和 峰会 集 
聚 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 同 描绘 出 开创 新 产业 的 革 
命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，OReilly 现 在 还 将 先锋 专家 
的 知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 ， 在 线 服 务 或 者 
面授 读 程 ， 每 一 项 OReily 的 产品 都 反映 了 公司 不 可 动摇 的 理念 一 一 信 
恩 是 激发 创新 的 力量 。 


























业界 评论 
“O'Reilly Radar 博 客 有 口 名 人 碑 。” 
Wired 


“OReilly 凭 借 一 系列 《真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 
百 万 美元 的 业务 。” 





Business 2.0 





“O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 

——CRN 
“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 
Irish Times 


“Tim 是 位 特 立 独行 的 两 人， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 
且 切 实地 按照 Yogi Berra 的 建议 去 做 了 :“ 如 宁 你 在 路 上 遇 到 岔路 口 ， 走 
小 路 (岔路 ) 。 "回顾 过 去 Tim 似 乎 每 一 次 都 选择 了 小 路 ， 而 且 有 几 次 都 
古 一 内 即 逝 的 机 会 ， 尺 管 大 路 也 不 错 。” 








Linux Journal 





译 者 序 


从 1996 年 以 来 ，《JavaScript 权 威 指南 》 已 经 成 为 JavaScript 程 序 员 
公认 的 《圣经 》。 该 书 凭借 着 完整 的 内 容 、 细 致 的 讲解 以 及 大 量 针对 性 
的 示例 而 受到 读者 的 一 吐 好 评 ， 十 多 年 来 一 直 畅 销 不 衰 。JavaScript 之 父 
Brendan Eich 对 它 如 是 评价 : “本 书 是 JavaScript 程 序 员 的 必 备 参考 .…… 内 
容 组 织 得 很 好 ， 而 且 非 常 详细 。” 


作为 JavaScript 最 经 典 的 工具 书 ， 它 的 历次 改版 见证 了 Web 发 展 的 历 
程 与 深刻 变革 : 从 玩具 式 的 “ 轻 脚 本 ?到 革命 性 的 Ajax， 从 传统 的 昌 面 系 
统 到 新 潮 的 手持 终端 ， 从 风靡 一 时 的 类 库 到 现在 主流 当道 的 web 富 应 用 
开发 ， 从 纯 浏 览 器 脚本 语言 到 面 癌 服务 器 问 的 JavaScript..…….HITML5、 
CSS3、jQuery 和 NodeJS 等 新 技术 的 出 现 进一步 丰 语 了 Web 前 端 开 发 的 内 
涵 ， 而 本 书 第 6 次 改版 则 是 一 场 及 时 雨 ， 系 统 翔实 地 收录 了 五 年 来 前 端 
技术 的 这 些 变革 ， 并 提供 了 大 量 的 实例 ， 可 以 边 学 边 用 ， 同 时 秉承 了 前 
几 版 的 “学 术 气 质 *， 是 JavaScript 和 前 端 开 发 领域 不 可 多 得 的 佳作 。 


本 书 第 6 版 涵盖 了 HTML5 和 ECMAScript 5， 很 多 章节 完全 重 写 ， 增 
加 了 当今 Web 开 发 的 最 佳 实践 的 内 容 ， 新 增 的 章节 包括 jQuery、 服 务 嚣 
端 JavaScript、 图 形 编程 以 及 JavaScript 式 的 面向 对 象 。 本 书 第 6 版 不 仅 适 
合 初 学 者 系统 学 习 ， 而 且 适 合 有 经 验 的 JavaScript 开 发 者 随手 翻阅 。 


淘宝 前 端 团队 非常 荣幸 地 承担 这 本 大 厚 书 的 翻译 任务 。 本 书 书 名 为 
《JavaScript 权 威 指南 (第 6 版 )》， 我 们 作为 译 者 深 知 自己 知识 面 有 
限 ， 难 达到 “权威 ?的 高 度 ， 所 以 翻译 过 程 难免 朴 漏 。 但 不 管 怎 样 ， 这 项 
任务 是 一 种 荣誉 ， 更 是 一 种 责任 。 本 次 翻译 共有 7 位 译 者 ， 李 品 〈( 拔 
赤 ) 、 张 散 集 (一 舟 ) 、 吴 英杰 〈 季 札 ) 、 赵 静 ( 洪 净 ) 、 陈 成 ( 云 
谦 ) 、 王 保平 〈 玉 伯 ) 和 部 学 (三 七 ) 。 感 谢 赵 泽 欣 〈 小 马 ) 为 促成 本 
次 翻译 做 出 的 努力 。 此 外 为 了 保证 翻译 质量 ， 我 们 还 邀请 了 热心 网 友 来 
参与 部 分 章节 的 校对 ， 尤 其 是 杨 明 明 、 孙 博 、 朱 琦 三 位 读者 为 本 书 关 键 
章节 提出 了 中 表 的 修改 意见 ， 非 常 感谢 他 们 。 最 后 要 特别 感谢 机 械 工 业 
出 版 社 华章 公司 的 陈 囊 康 老师 和 谢 晓 芳 编 辑 ， 不 仅 容 忍 我 们 再 三 推迟 交 
稿 ， 还 不 断 汞 励 我 们 * 多 花 些 时 间 来 保证 质量 ”。 在 此 对 上 述 各 位 同学 和 
老师 致 以 深 深 的 感谢 。 
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本 书 要 讲述 的 内 容 涵 新 JavaScript 语 言 本 里， 以 及 Web 浏 览 器 所 实现 
的 JavaScript API。 本 书 更 适合 有 一 定编 程 经 验 的 人 阅读 。 对 于 那些 希望 
学 习 JavaScript 和 已 经 开始 使 用 JavaScript 的 程序 员 来 说 ， 如 果 想 让 自己 
对 JavaScript 语 言 和 和 Web 平台 的 理解 和 掌握 再 上 一 个 台阶 ， 本 书 最 适合 不 
过 了 。 本 书 则 在 系统 权威 地 讲解 JavaScript 这 门 语言 以 及 运行 它 的 各 种 平 
台 环 境 。 本 书 对 各 个 知识 点 的 讲解 都 非常 详细 ， 以 至 于 本 书 成 了 大 块 
头 。 我 希望 每 个 读者 都 能 认真 阅读 本 书 ， 这 会 让 你 的 JavaScript 编 程 基本 
功 更 加 务实， 你 所 花费 的 时 间 和 精力 终究 会 有 成 倍 的 回报 。 


本 书 分 为 4 部 分 ， 第 一 部 分 主要 讲述 JavaScript 这 门 语言 。 第 二 部 分 
主要 讲述 客户 端 JavaScript: HTML5 和 相关 标准 定义 的 JavaScript API 以 
及 Web 浏 览 器 实现 的 API。 第 三 部 分 是 JavaScript 语 言 核心 部 分 的 参考 手 
册 。 第 四 部 分 是 客户 端 JavaScript 的 参考 手册 。 第 1 章 包含 前 两 部 分 的 章 
节 提 纲 和 简介 〈 参 照 1.1 节 ) 。 





本 书 第 6 版 同时 涵盖 ECMAScript ”5 〈JavaScript 语 言 核心 的 最 新 版 
本 ) 和 HTML5 〈Web 平 台 的 最 新 版 本 ) 。 第 一 部 分 包含 ECMAScript 5 
相关 的 资料 。 而 与 HTML5 相 关 的 新 资料 主要 在 第 二 部 分 末尾 的 章节 讲 
述 ， 当 然 其 他 章节 也 有 提 到 。 第 6 版 新 增 的 章节 有 : 第 11 章 、 第 12 章 、 
第 19 章 以 及 第 22 章 。 


如 果 你 阅读 过 前 几 版 ， 则 会 及 现 第 6 厂 中 很 多 章节 都 完全 重 写 了 。 
第 一 部 分 中 的 核心 章节 都 涵盖 全 新 的 内 容 《〈 对 象 、 数 组 、 函 数 以 及 
类 ) ， 这 些 内 容 都 是 当下 最 前 沿 的 编程 技术 和 最 佳 实践 。 同 样 ， 第 二 部 
分 的 核心 章节， 比如 第 15 章 和 第 17 章 ， 也 与 时 候 进 全 都 重 写 了 。 

















关于 盗版 


如 果 你 (或 你 的 雇主 ) 没有 为 阅读 本 书 电子 版 付费 (或 者 从 其 他 的 
付费 读者 那里 借阅 本 书 ) ， 那 么 你 的 行为 很 可 能 涉及 侵权 。 撰 写本 书 第 
6 版 是 我 的 全 职工 作 ， 论 费 了 我 一 年 多 时 间 。 我 能 得 到 的 所 有 报酬 均 来 
目 读 者 的 购买 费用 。 如 果 第 6 版 的 撰写 为 我 带 来 的 收 荔 无 法 继续 文 撑 我 
的 工作 ， 我 将 无 法 完成 本 书 第 7 版 的 编撰 。 


尽管 盗版 行为 让 人 不 可 容忍 ， 但 如 果 你 手 上 已 经 有 了 一 本 盗版 书 ， 
不 妨 试 着 读 一 读 你 感 兴趣 的 几 章 。 相 信 你 会 发 觉 本 书 的 价值 所 在 ， 它 的 
确 是 你 学 习 JavaScript 不 可 多 得 的 好 教材 内 容 安 排 清晰 、 质 量 上 乘 ， 
这 绝 不 是 随便 从 网 上 拿 来 几 篇 文章 拼凑 成 的 二 流 读物 。 如 果 你 能 认识 到 
这 是 一 套 非 常 不 错 的 学 习 材 料 的 话 ， 请 你 从 正当 途径 购买 此 书 〈 电 子 版 
或 纸 质 书 ) 。 反 过 来 讲 ， 如 果 你 的 确 觉得 本 书 没 有 网 上 的 免费 信息 有 价 
值 ， 那 么 请 停止 你 的 侵权 行为 ， 去 使 用 互联 网 上 的 免费 信息 。 























本 书 约定 
本 书 使 用 下 列 排版 约定 : 
斜体 〈Italic ) 


用 于 强调 重点 或 者 表示 术语 的 首次 使 用 ， 此 外 和 它 还 用 来 表示 电子 邮 
件 地 址 、 网 址 和 文件 名 。 


等 宽 字 体 (Constant width ) 


所 有 的 JavaScript 代 码 、HTML 和 CSS 代 码 清单 都 使 用 等 宽 字 体 表 
示 ， 以 及 程序 设计 时 要 输入 的 任何 内 容 也 用 等 宽 字体 表示 。 


等 宽 和 斜体 (Constant width italic) 


等 宽 斜 体 用 来 表示 函数 参数 名 或 者 表示 一 个 占 位 符 ， 占 位 符 常 用 来 
丛 换 成 程序 中 的 实际 值 。 














示例 代码 


本 书 中 的 所 有 示例 代码 都 可 以 在 网 上 找到 。 可 以 从 O'Reilly 出 版 社 
网 站 给 出 的 本 书 的 分 类 页 面 中 找到 想 要 的 代码 : 


http://oreilly.com/catalog/9780596805531/ 


这 里 的 代码 是 为 了 帮助 你 更 好 地 理解 本 书 的 内 容 的 。 通 常 ， 可 以 在 
程序 或 文档 中 使 用 本 书 中 的 代码 ， 而 不 需要 联系 O'Reilly 获 得 许可 ， 除 
非 需要 大 段 大 段 地 复制 代码 。 例 如 ， 使 用 本 书 中 所 提供 的 几 个 代码 片段 
来 编写 一 个 程序 不 需要 得 到 我 们 的 许可 。 但 销售 或 发 布 O'Reilly 的 配套 
CD-ROM 则 需要 O'Reilly 出 版 社 的 许可 。 引 用 本 书 的 示例 代码 来 回答 一 
个 问题 也 不 需要 许可 ; 将 本 书 中 的 示例 代码 的 很 大 一 部 分 放 入 到 自己 的 
产品 文档 中 确实 需要 获得 许可 。 


非常 欢迎 读者 使 用 本 书 中 的 代码 ， 不 用 注 明 出 处 。 注 明 出 处 的 形式 
包含 标题 、 作 者 、 出 版 社 和 ISBN， 例 如 : "JavaScript:The Definitive 
Guide,by David Flanagan (O'Reilly) 。Copyright 2011 David Flanagan， 
978-0-596-80552-4"。 


关于 O'Reilly 的 代码 重用 许可 政策 的 更 多 规定 ， 可 以 参阅 : 
http://oreilly.com/pub/a/oreilly/ask_tim/2001/codepolicy.html。 如 果 读 者 
得 对 示例 代码 的 使 用 超出 了 上 面 所 给 出 的 许可 范围 ， 欢 迎 通 过 
permission(@oreilly.com 联 系 我 们 。 














~ 
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勘误 表 以 及 如 何 联 系 我 们 


出 版 社会 维护 本 书 的 一 个 勘误 表 。 你 可 以 查阅 这 个 勘误 表 ， 同 样 你 
也 可 以 将 目 己 发 现 的 问题 提交 给 我 们 ， 通 过 访问 本 书 的 网 站 : 





http://oreilly.com/catalog/9780596805531 


如 果 你 想 评 论 或 提问 关于 本 书 的 技术 问题 ， 请 用 这 个 邮件 和 我 们 联 


bookquestions@oreilly.com 


关于 书籍 、 研 讨 会 、 资 源 中 心 以 及 O'Reilly 的 官方 网 址 的 更 多 信 
妃 ， 请 访问 这 个 地 址 : 


http:/www.oreilly.com 
我 们 在 Facebook 上 的 地 址 是 : http://facebook.com/oreilly 
我 们 在 Twitter 上 的 地 址 是 : http://twitter.com/oreillymedia 


我 们 在 YouTube 上 的 地 址 是 : http://www.youtube.com/oreillymedia 


致谢 


在 写本 书 的 过 程 中 得 到 了 很 多 人 的 热情 帮助 。 感 谢 本 书 的 编辑 Mike 
Loukides， 他 协助 我 规划 了 本 书 ， 提 出 的 很 多 建设 性 的 意见 。 同 样 感谢 
本 书 的 技术 审 校 者 : Zachary Kessin， 他 负责 审 校 了 本 书 第 一 部 分 ， 以 
及 Raffaele ”Cecco， 他 审 校 了 第 19 章 以 及 第 21 章 的 二 canvas 二 相关 的 内 
容 。O'Reilly 生 产 部 门 的 工作 同样 出 色 。Dan ”Fauxsmith 作 为 本 书 的 项 目 
负责 人 非常 尽责 ， 有 效 的 保证 了 本 书 的 进度 ，Teresa Elsey 的 排版 工作 同 
样 出 色 ，Rob Romano 为 本 书 绘制 了 很 多 插图 和 图 表 ， 最 后 Ellen 
Troutman Zaig 为 本 书 创建 了 索引 。 


这 是 一 个 信息 时 代 ， 本 书 的 所 有 技术 细节 都 能 在 互联 网 上 找到 渊 
源 ， 我 也 和 广大 网 友 保 持 了 密切 的 联系 。 我 在 ES5、w3c 以 及 whatwg 邮 
件 列 表 中 提 了 很 多 技术 问题 ， 也 得 到 了 同仁 们 很 专业 的 回答 ， 在 此 我 非 
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投身 其 中 让 人 感觉 非常 筷 我 、 映 心 愉悦 。 
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第 1 半 ” ”JavaScript 概述 


JavaScript 是 面向 Web 的 编程 语言 。 绝 大 多 数 现代 网 站 都 使 用 了 
JavaScript， 并 且 所 有 的 现代 Web 浏 览 器 一 一 基于 果 面 系统 、 游 戏 机 、 平 
板 电 脑 和 智能 手机 的 浏览 器 一 一 均 包含 了 JavaScript 解 释 器 。 这 使 得 
JavaScript 能 够 称 得 上 史上 使 用 最 广泛 的 编程 语言 。JavaScript 也 是 前 端 
开发 工程 师 必 须 掌握 的 三 种 技能 之 一 : 描述 网 页 内 容 的 HTIML、 摘 述 网 
页 样式 的 CSS 以 及 描述 网 页 行为 的 JavaScript。 本 书 能 帮助 你 掌握 
JavaScript 这 门 语言 。 


如 有 果 你 有 其 他 语言 的 编程 经 历 ， 这 会 有 助 于 你 了 解 JavaScript 是 一 门 
高 端的 、 动 态 的 、 弱 类 型 的 编程 语言 ， 非 常 适合 面向 对 象 和 函数 式 的 编 
程 风格 。JavaScript 的 语法 源 自 Java， 它 的 一 等 隙 数 (first-class 
function) 来 自 于 Scheme， 它 的 基于 原型 (prototype-based) 的 继承 来 自 
于 Self。 但 使 用 本 书 学 习 JavaScript 不 必 去 了 解 那些 (Java/Scheme/Self) 
语言 或 熟悉 那些 术语 。 


"JavaScript" 这 个 名 字 经 常 被 误解 。 除 了 语法 看 起 来 和 Java 类 似 之 
外 ，JavaScript 和 Java 是 完全 不 同 的 两 种 编程 语言 。JavaScript 早 已 超出 了 
其 “脚本 语言 "(scripting-language) 本 身 的 范畴 ， 而 成 为 一 种 集 健 壮 性 、 高 
效 性 和 通用 性 为 一 身 的 编程 语言 。 最 新 的 语言 版 本 为 严谨 的 大 型 软件 开 
发 定义 了 诸多 新 的 特性 。 


JavaScript: 名 字 和 版 本 


JavaScript 是 由 Web 发 展 初期 的 网 景 《Netscape) 公司 创 
建 ，"JavaScript" 是 Sun Microsystem 公 司 〈 现 在 的 Oracle) 的 注册 商标 ， 
用 来 特 指 网 景 〈 现 在 的 Mozilla) 对 这 门 语言 的 实现 。 网 景 将 这 门 语言 作 
为 标准 提交 给 了 ECMA 一 一 欧洲 计算 机 制造 协会 由 于 商标 上 的 冲 
突 ， 这 门 语言 的 标准 版 本 改 了 一 个 丑陋 的 名 字 "ECMAScript"。 同 样 由 于 
商标 的 冲突 ， 微 软 对 这 门 语言 的 实现 版 本 取 了 一 个 广为人知 的 名 
字 "Jscript"。 实 际 上 ， 几 乎 所 有 人 都 将 这 门 语言 叫做 "JavaScript"。 本 书 
也 仅仅 使 用 "ECMAScript" 来 指 代 语言 标准 。 


在 最 近 10 年 间 ， 所 有 的 Web 浏 览 絮 部 实现 了 第 3 版 ECMAScript 标 
准 ， 我 们 也 已 经 不 必 再 去 考虑 版 本 写 了: 语言 标准 已 经 很 稳定 了 ， 并 且 
被 几乎 所 有 浏览 器 完整 地 实现 了 。 最 近 ，ECMAScript 第 5 版 定义 了 新 的 



































语言 标准 ， 在 撰写 本 书 时 ， 浏 览 器 已 经 开始 实现 它 了 。 除 了 
ECMAScript 3 长 期 保留 下 来 的 特性 ， 本 书 还 涵盖 了 所 有 ECMAScript 5 的 
新 特性 。 正 如 我 们 经 常 将 JavaScript 简 写成 JS 一 样 ，ECMAScript 3 和 
ECMAScript 5 有 时 也 会 简写 成 ES3 和 ES5。 


当 我 们 提 到 这 门 语言 本 喘 时 ， 通 第 所 指 的 语言 版 本 是 ECMAScript 3 
和 ECMAScript 5 (ECMAScript 4 已 经 开发 了 数 年 ， 但 由 于 太 过 庞大 ， 从 
未 发 布 过 正式 版 本 ) 。 有 时 会 看 到 JavaScript 的 版 本 号 《〈 比 如 JavaScript 
1.5 或 JavaScript 1.8) 。 这 些 是 Mozilla 的 版 本 号 : 版 本 1.5 基 本 上 束 是 
ECMAScript 3， 后 续 版 本 包含 了 非 标 准 的 语言 扩展 (参照 第 11 章 ) 。 最 
后 ，JavaScript 解 释 器 或 者 “引擎 ”(engine) 也 有 版 本 号 ， 比 如 ，Google 
将 它 的 JavaScript 解 释 器 叫做 V8， 在 撰写 本 书 时 V8 引擎 最 新 版 本 是 3.0。 


为 了 有 用 起 见 ， 通 常 每 一 种 编程 语言 都 有 人 各自 的 开发 平台 、 标 准 库 
或 API 函 数 ， 用 来 提供 诸如 基本 输入 输出 的 功能 。JavaScript 语 言 核心 针 
对 文本 、 数 组 、 日 期 和 正则 表达 式 的 操作 定义 了 很 少 的 API， 但 是 这 些 
API 不 包括 输入 输出 功能 。 输 入 和 输出 功能 (类 似 网 络 、 存 储 和 图 形 相 
关 的 复杂 特性 ) 是 由 JavaScript 所 属 的 “ 答 主 环境 ”(host enviroment) 提 
供 的 。 这 里 所 说 的 宿主 环境 通常 是 Web 浏 览 器 (第 12 间 会 介绍 两 个 不 基 
于 Web 浏 览 器 的 JavaScript 箱 主 环 境 ) ， 本 书 第 一 部 分 涵盖 了 语言 本 身 的 
特性 以 及 少量 的 内 置 API。 第 二 部 分 讲解 了 JavaScript 如 何在 Web 浏 览 器 
中 工作 ， 并 涵盖 基于 浏览 器 的 API 一 这 部 分 也 称 做 “客户 端 
JavaScript”。 


本 书 第 三 部 分 是 核心 API 的 参考 手册 。 比 如 ， 在 这 部 分 ， 可 以 查 
找 "Array" 以 获得 JavaScript 数 组 操作 API 的 详细 信息 。 第 四 部 分 是 客户 端 
JavaScript 参 考 手册 ， 比 如 ， 你 可 以 在 这 部 分 查找 "canvas" 来 获得 HTML 
5<canvas 之 元 素 定 义 的 图 形 编程 API。 


本 书 首 先 讲解 初级 的 基础 部 分 ， 然 后 讲解 更 高 级 和 更 抽象 的 内 容 。 
本 书 的 章节 也 是 如 此 安排 以 便 你 能 循序 阅读 。 但 学 习 一 门 新 的 编程 语言 
绝 非 易 事 ， 当 然 要 完整 插 述 这 门 语言 就 没 办 法 苛 求 知识 丘 的 循 次 渐进 ， 
每 一 种 语言 特性 都 和 其 他 特性 相互 关联 ， 本 书 的 知识 点 也 是 前 后 参照 
的 ， 有 时 参照 的 知识 点 在 后 续 草 节 ， 有 时 在 已 经 阅读 的 音节。 本章 快 速 
介绍 了 语言 核心 部 分 和 客户 端 API 及 其 关键 特性 ， 以 便 你 能 更 方便 更 深 
入 地 阅读 理解 后 续 章 市 





























JavaScript 初 探 


当 学 习 一 门 新 的 编程 语言 的 时 候 ， 应 当 对 照 书 中 的 示例 边 学 边 动手 
做 ， 反 复 演练 以 加 深 自己 的 理解 。 因 此 ， 你 需要 一 个 JavaScript 解 释 器 。 
柱 运 的 是 ， 每 一 个 Web 浏 览 占 都 包含 一 个 JavaScript 解 释 器 ， 当 你 阅读 本 
书 时 ， 你 可 能 已 经 在 电脑 上 安装 了 不 止 一 个 Web 浏 览 器 了。 


可 以 通过 在 HTML 文 件 里 写 一 个 二 script 二 标签 来 租 入 JavaScript 代 
码 ， 当 浏 贤 右 加 载 HTML 文 件 的 时 候 ， 它 会 自动 执行 这 段 代 码 ， 随 后 会 
有 提 到 。 幸 运 的 是 ， 如 果 运 行 的 是 一 小 段 JavaScript 代 人 码 ， 则 不 必 每 次 都 
这 样 做 。 我 们 可 以 利用 Firefox 的 一 个 强大 的 革命 性 的 插件 Firebug〈 见 图 
1-1， 可 以 从 http://getfirebug.com/ 下 载 Firebug) 来 运行 这 些小 段 代 码 ， 而 
a 可 以 用 来 调试 、 试 验 和 学 习 。 
通常 在 浏览 器 的 “工具 ? 深 单 中 可 以 看 到 类 似 “ 开 发 者 工具 ?或 者 “Web 控 制 
台 ” 的 选项 (Firefox 4 内 置 了 “Web 控 制 台 ”不 过 更 推荐 使 用 Firebug)〉。 
可 以 通过 按 F12 键 或 者 Cal+Shift+J 快 捷 键 来 唤醒 控制 台山 。 控 制 台 工 具 
通 种 会 在 浏览 融 窗 口 的 顶部 或 底部 ， 有 时 候 也 可 以 单独 打开 一 个 窗口 
〈 见 图 1-1) ， 这 样 会 更 加 方便 。 


通常 “开发 者 工具 面板 ”窗口 包含 了 很 多 选项 卡 ， 可 以 查看 HTML 文 
代 结 构 、 CSS 样 式 、 网 络 请 求 等 。 其 中 第 一 个 选项 卡 是 "JavaScript 控 制 

， 可 以 直接 输入 JavaScript 代 人 码 并 运行 出 结 末 。 用 这 种 方式 来 调试 
JavaSerpt 简 音叉 实 用 这 里 强烈 推荐 读者 使 用 这 种 方式 来 辅助 你 阅读 











一 些 现 代 浏 览 器 有 可 能 实现 了 一 个 简单 的 控制 台 API。 可 以 通过 使 
用 函数 console.log0) 来 癌 控制 台 输 出 消息 ， 使 用 console.log0 来 做 简单 的 
输出 演示 ， 通 过 这 种 方式 可 以 非常 方便 地 调试 本 书 的 示例 代码 。 同 样 ， 
也 可 以 通过 给 alert() 函 数 传 入 一 段 文 本 来 弹出 一 个 对 话 框 ， 但 这 种 输出 
调试 信息 的 方法 更 具 侵 入 性 。 








YN ee Wm Mi pom mm 
Cy ist A oy WT 0 Dot io Mey Pt [| 
we th 和 #ty 名 村 上 | 
让 

人 人 
‘heii mi ] 
se 

- i 
sr A A 
st 秋天 下 公公 
see bch "hi 
Tiwh 
>is i 全 可 如 届 


| 

? 

me Ls 。 15 如 外 中 

5 

sp roth 了 Fit se oe 
si ,| fo bl 


Wn Fee Co 





图 1-1 Firebug 控 制 台 


1.1 _ JavaScript 语言 核心 


本 节 是 JavaScript 语 言 的 一 个 快速 概览 ， 也 是 本 书 第 部 分 的 快速 概 
览 。 在 本 章 之 后 ， 我 们 将 着 重 关 注 JavaScript 的 基础 知识 : 第 2 章 讲 解 
JavaScript 注 释 、》 分 写 和 Unicode 字 符 集 ; 第 3 章 会 更 加 有 意 意思， 主要 讲解 
JavaScript 变 量 和 赋 信 。 这 里 有 一 些 示 例 代 码 来 说 明 这 两 章 的 重点 内 容 : 

















// 所 有 在 双 斜 线 之 后 的 内 容 都 属于 注释 

// 仔 细 阅 读 这 里 的 注释 : 它们 对 JavaScript 代 码 做 了 解释 
// 变 量 是 表示 值 的 一 个 符号 名 字 

// 变 量 是 通过 var 关 键 字 声明 的 

Var Xx; /7 声明 一 个 变量 x 
// 值 可 以 通过 等 号 赋值 给 变量 
X=0;// 现 在 变量 x 的 值 为 06 
x//=>0: 通 过 变量 获取 其 值 
//JavaScript 支 持 多 种 数据 类 型 
X=1;// 数 字 
x=0 .01;// 整 数 和 实数 共用 一 种 数据 类 型 

x="hello world";// 由 双 引 号 内 的 文本 构成 的 字符 串 
Xx='JavaScript' ; /7 单 引 号 内 的 文本 同样 构成 字符 日 
Xx=true;// 布 尔 值 
x=false;// 另 一 个 布尔 值 
x=null;//null 是 一 个 特殊 的 值 ， 意 思 是 " 空 " 
x=undefined;//undefined 和 null 非 常 类 似 
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JavaScript 中 两 个 非常 重要 的 数据 类 型 是 对 象 和 数组 。 第 6 章 介 绍 对 
象 ， 第 7 章 介 绍 数 组 ， 对 象 和 数组 在 JavaScript 中 是 如 此 之 重要 ， 以 至 于 
你 御 本 所 中 处 处 部 上 看 到 它们 的 身影 。 











eave 
// 对 象 是 名 / 值 对 的 集合 ， 或 字符 串 到 值 映射 的 
var book={// 对 象 是 花 括号 括 起 来 的 
topic:"JavaSscript",// 属 性 "topic" 的 值 是 "JavaScript" 
fat:true// 属 性 "fat" 的 值 是 true 

};// 右 花 括号 标记 了 对 象 的 结束 
// 通 过 "." 或 "[] "来 访问 对 象 属性 
book.topic//=>"Javascript" 
book["fat"]//=>true :另外 一 种 获取 属性 的 方式 
book.author="Flanagan";// 通 过 赋值 创建 一 个 新 属性 
book.contents={;// 舍 是 一 个 空 对 象 ， 它 没有 属性 
//JavaScript 同 样 支持 数组 (以 数字 为 索引 的 列表 ) 
var primes=[2,3,5,7];// 拥 有 4 个 值 的 数组 ， 由 "[" 和 "]" 划 定 边界 
primes[0]//= 之 2: 数 组 中 的 第 一 个 元 素 (索引 为 9) 

primes .length//= 之 4: 数 组 中 的 元 素 个 数 

primes[primes. length-1]//=>7: 数 组 的 最 后 一 个 元 素 
primes[4]=9;// 通 过 赋值 来 添加 新 元 素 

primes[4]=11;// 或 通过 赋值 来 改变 已 有 的 元 素 

var empty=[];//[] 是 空 数组 ， 它 具有 0 个 元 素 
empty.length//=>0 
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/7 数组 和 对 象 中 都 可 以 包含 男 一 个 数组 或 对 象 : 
var points=[// 具 有 两 个 元 素 的 数组 
{xX:0,y:0}, // 每 个 元 素 都 是 一 个 对 象 
{xX:1,y:1} 


var data= {// 一 个 包含 两 个 属性 的 对 象 


trial1:[[1,2],[3,4]],// 每 一 个 属性 都 是 数组 
trial2:[[2,3],[4,5]]// 数 组 的 元 素 也 是 数组 
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上 上 段 代 人 码 中 通过 方 括号 定义 数组 元 素 和 通过 花 括 号 定义 对 象 属性 名 
和 属性 值 之 间 的 映射 关系 的 ye 初始 化 表达 式 (initializer 
expression) ， 第 4 章 有 专门 的 介绍 。 表 达 式 是 JavaScript 中 的 一 个 短语 ， 
这 个 短语 可 以 通过 运算 得 出 人 通过 “.” 和 “[]” 来 引用 对 象 属性 或 数 
组 元 素 的 值 束 构成 一 个 表达 式 。 比 如 ， 请 看 一 下 上 述 代码 中 独占 一 行 的 
表达 式 ， 其 后 的 注释 中 箭头 〈=>) 后 的 值 就 是 表达 式 的 运算 结果 。 这 
种 写法 是 本 书 中 的 一 种 约定 表述 方式 。 


JavaScript 中 最 常见 的 表达 式 写 法 是 像 下 面 代码 这 样 使 用 运算 符 


(operator) : 


























// 运 算 符 作用 于 操作 数 ， 生 成 一 个 新 的 值 
// 最 常见 的 是 算术 运算 符 
3+2//=>5: 加 法 
3-2//=>1: 减 法 
3*2//=>6: 乘 法 
3/2//=>1.5: 除 法 
points[1].x-points[9].x//=>1: 更 复杂 的 操作 数 也 能 照常 工作 
"3"+"2"/V=>"32":+ 可 以 完成 加 法 运算 也 可 以 作 字符 串 连接 
//JavaScript 定 义 了 一 些 算术 运算 符 的 简写 形式 

var count=0;// 定 义 一 个 变量 
count++; /7/ 自 增 1 
count--;// 自 减 1 
count+=2;// 自 增 2: 和 "count=count+2;" 写 法 一 样 
count*=3;// 自 乘 3: 和 "count=count*3;" 写 法 一 样 
count/V/=>>6;: 变 量 名 本 身 也 是 一 个 表达 式 

// 相 等 关系 运算 符 用 来 判断 两 值 是 否 相 等 

// 不 等 、 大 于 、 小 于 运算 符 的 运算 结果 是 true 或 false 
var X=2, y=3;// 这 里 的 = 等 号 是 赋值 的 意思 ， 不 是 比较 相等 
x==y//= Sfalse: 相等 
Xx1=y//=>true :不 等 
X<y//=>true :小 于 
x<=y//=>true :小 于 等 于 
x>y//=>false :大 于 等 于 
x>=y//=>false: 大 于 等 于 
"two"=="three"//=>false: 两 个 字符 串 不 相等 
"two">"three"/V=>true:"tw" 在 字母 表 中 的 索引 大 于 "th 
false==(Xx>y)//=>true:false 和 false 相 等 

// 届 辑 运 算 符 是 对 布尔 值 的 合并 或 求 反 
(x==2)&&(y==3)//=>true: 两 个 比较 都 是 true， 久 多 表 示 " 与 " 
(x>3)|11(y<3)//=>false :两 个 比较 不 都 是 true，| | 表示 "或 " 
1(Xx==y)//=>true:1! 求 反 





















































































































































ee 语 ? 是 表达 式 的 话 ， 那 么 整个 句子 就 称 做 语句 
会 详细 讲解 。 在 上 述 代码 中 ， 以 分 号 号 结束 的 行 均 

| (下 面 的 代 冯 中 ， 会 看 到 省 略 分 号 的 多 行 语 。 实 际 上 ， 
语句 和 表达 式 之 间 有 很 多 共同 之 处 ; 粗略 地 讲 ， ， 
值 但 并 不 作 任 何 操作 ， 它 并 不 改变 程序 的 运行 状态 。 而 语句 并 不 包含 一 
个 值 〈 或 者 说 它 包 含 的 值 我 们 并 不 关心 ) ， 但 它们 改变 程序 的 运行 状 
态 。 在 上 文中 已 经 见 过 变量 声明 语句 和 赋值 语句 。 2 是 “控制 
结构 ”(control structure) ， 比 如 条 件 判 断 和 循环 。 在 介 函数 之 后 ， 
我 们 给 出 相关 的 示例 代码 。 


函数 是 带 有 名 称 (named) 乌 和 参数 的 JavaScript 代 码 段 ， 可 以 一 次 
定义 多 次 调用 。 第 8 章 会 正式 详细 地 讲解 函数 。 与 对 象 和 数组 一 样 ， 在 
本 书 的 很 多 地 方 都 会 提 到 函数 。 这 里 是 一 些 简单 的 示例 代码 : 





























// 函 数 是 一 段 带 有 参数 的 JavaScript 代 码 端 ， 可 以 多 次 调用 
function plus1i(x){// 定 义 了 名 为 plusi1 的 一 个 函数 ， 带 有 参数 x 
return x+1;// 返 回 一 个 比 传 入 的 参数 大 的 值 






































} 

// 函 数 的 代码 块 是 由 花 括号 包 时 起 来 的 部 分 
plus1(y)//=>4:y 为 3， 调 用 函数 的 结果 为 3+1 

Var square=function(x){// 函 数 是 一 种 值 ， 可 以 赋值 给 变量 
return x*x;// 计 算 函 数 的 值 
了 7/ 分 } 号 标识 了 赋值 语句 的 结束 
square(pLlus1(y) )/V/=>16 :在 一 个 表达 式 中 调用 两 个 函数 










































































当 将 函数 和 对 象 合 写 在 一 起 时 ， 函 数 就 变 成 了 “方法 ”(Cmethod) : 











// 当 函数 赋值 给 对 象 的 属性 ， 我 们 称 为 

//" 方 法 "， 所 有 的 JavaScript 对 象 都 含有 方法 
var a= Es // 创 建 一 个 空 数 组 
a.push(1,2,3);//push() 方 法 向 数组 中 添加 元 素 
a.reverse();// 男 一 个 方法 : 将 数组 元 素 的 次 序 反 转 

// 我 们 也 可 以 定义 自己 的 方法 ，"this" 关 键 字 是 对 定义 方法 
// 的 对 象 的 引用 : 这 里 的 例子 是 上 文中 报到 的 包含 两 个 点 位 置信 息 的 数组 
points.dist=function(){// 定 义 一 个 方法 用 来 计算 两 点 之 间 的 距离 
var p1=this[9];// 通 过 this 获 得 对 当前 数组 的 引用 
var p2=this[1];// 并 取得 调用 的 数组 前 两 个 元 素 
var a=p2.Xx-p1.Xx;V/X 坐 标 轴 上 的 距离 
var b=p2.y-p1.y;V/VY 坐 标 轴 上 的 距 
return Math.sqrt(a*a+// 勾 股 定理 
我 们 称 为 bxb) ;// 用 Math .sqrt( ) 来 计算 平方 根 
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}; 
points ,dist()//=>1.414: 求 得 两 个 点 之 间 的 距离 





现在 ， 给 出 一 些 控 制 语句 的 例子 ， 这 里 的 示例 函数 体内 包含 了 最 负 
见 的 JavaScript 控 制 语句 : 





























// 这 些 JavaScript 语 句 使 用 该 语法 包含 条 件 判断 和 循环 
// 使 用 了 类 似 C、C++、Java 和 其 他 语言 的 语法 
function abs(x){// 求 绝对 值 的 函数 
if(x> 之 =0){V/V/if 语 句 . , 

return x; 77 如 果 比 较 结果 为 true 则 执行 这 里 的 代码 ， 


} 
// 子 句 的 结束 . 
else{// 当 if 条 件 不 满足 时 执行 else 子 句 


return-x; 




































































} 
// 如 果 分 支 中 只 有 一 条 语句 ， 花 括号 是 可 以 省 略 的 











} 

// 注 意 if/else 中 典 套 的 return 语 名 
function factorial(n){// 计 算 阶 乘 的 函数 
var product=1;// 给 product 赋 值 为 1 
while(n>1) {// 当 ( ) 内 的 表达 式 为 true 时 循环 执行 {} 内 的 代码 
product*=n;//"product=product*n;" 的 简写 形式 
n--;/A/"n=n-1;" 的 简写 形式 



































} 
// 循 环 结束 
return product;// 返 回 product 


factorial(4)//=>24:1*4*3*2 

function factorial2(n){// 实 现 循环 的 另 一 种 写法 
var iproduct=1;// 给 product 赋 值 为 1 
for(i=2;i<=n; ;i+4+)// 将 i 从 2 自 兽 至 n 
product*=i; // 循 环 体 ， 当 循环 体 中 只 有 一 名 代码 ， 可 以 省 略 仔 
return product;// 返 回 计 算 好 的 阶乘 
































} 
factorial2(5)//=>120:1*2*3*4*5 





JavaScript 是 一 种 面 同 对 象 的 编程 语言 ， 但 和 传统 的 面 同 对 象 义 有 很 
大 区 别 。 第 9 章 将 详细 讲解 JavaScript 中 的 面向 对 象 编程 ， 这 一 章 有 大 量 
的 示例 代码 ， 是 本 书 中 最 长 的 一 章 。 这 里 有 一 个 简单 的 示例 ， 。 
展示 了 如 何在 JavaScript 中 定义 一 个 类 来 表示 2D 平 面 几 何 中 的 点 。 
类 实例 化 的 对 象 拥有 一 个 名 为 r0 的 方法 ， 角 来 计算 该 点 到 原点 的 此 











// 定 义 一 个 构造 函数 以 初始 化 一 个 新 的 Point 对 象 

function Point(x,y)f{// 按 照 惯例 ， 构 造 函 数 均 以 大 写字 母 开始 
this.,x=x;// 关 键 字 this 指 代 初 始 化 的 实例 
this.y= =y;// 将 函 数 参 数 存储 为 对 象 的 属性 


} 

// 不 需要 return 

// 使 用 new 关 键 字 和 构造 函数 来 创建 一 个 实例 

var p=new Point(1,1);// 平 面 几何 中 的 点 (1,1) 
// 通 过 给 构造 函数 的 prototye 对 象 赋值 

// 来 给 Point 对 象 定 义 方法 
Point.prototype.r=function(){ 
2 



























































return Math.sqrt(// 返 回 x 

+y2 的 平方 根 

this.x*this.x+//this 指 代 调 用 这 个 方法 的 对 象 
this.y*this.y); 

};//Point 的 实例 对 象 p( 以 及 所 有 的 Point 实 例 对 象 ) 继承 了 方法 r() 
p.r()//=>1.414... 











第 9 章 是 第 一 部 分 的 精华 所 在 ， 后 续 的 各 章 做 了 一 些 零 星 的 延伸 ， 
将 我 们 对 JavaScript 语 言 核 心 的 探索 带 辐 尾声 。 第 10 章 主要 讲解 了 正则 表 
达 式 的 语法 ， 并 演示 了 如 何 使 用 这 些 “ 正 则 表达 式 ? 进 行文 本 的 模式 匹 
配 。 第 11 章 介绍 JavaScript 语 言 核心 的 子 集 和 超 集 。 最 后 ， 在 进入 客户 并 
JavaScript 的 内 容 之 前 ， 第 12 章 介绍 两 种 在 Web 浏 览 嚣 之 外 的 两 种 
JavaScirpt 运 行 环境 。 


[IF12 用 来 唤醒 /关闭 Firebug 操 作 面板 ，Ctrl+Shift+J 用 来 唤醒 错误 控制 台 
(Error Console)。 


[2 这 里 “名 称 ” 含 义 是 指 函 数 具有 固定 标识 ， 并 不 是 指 函 数 变 量 名 称 。 














1.2 客户 端 JavaScript 


JavaScript 语 言 核心 部 分 的 内 容 中 的 知识 点 交叉 引用 比较 多 ， 且 知识 
点 的 层次 感 并 不 分 明 。 而 在 客户 端 JavaScript 部 分 的 内 容 编排 方式 有 了 较 
大 改变 。 依 照 本 书 给 定 的 知识 点 顺序 进行 学 习 ， 完 全 可 以 学 会 如 何在 
Web 浏 览 嚣 中 使 用 JavaScript。 但 如 果 你 想 通 过 阅读 本 书 来 学 习 客户 端 
JavaScript 的 话 ， 不 能 只 将 眼光 落 在 第 二 部 分 ， 所 以 本 节 会 对 于 客户 端 编 
程 技术 做 一 个 快速 概览 ， 随 后 会 给 出 一 个 有 深度 的 示例 。 


第 13 章 是 第 二 部 分 的 第 一 章 ， 该 章 介 绍 如 何 让 JavaScript 在 web 浏览 
器 中 运行 起 来 。 从 该 章 学 到 的 最 重要 的 内 容 是 ，JavaScript 代 人 码 可 以 通过 
二 scirpt 二 标签 来 艇 入 到 HTML 文 件 中 : 














<html> 

<head> 

<script src="library.js"></script>><!-- 引 入 一 个 JavaScript 库 - -> 
</head> 

<body> 

<p>This is a paragraph of HTML<=/p> 

二 script 之 // 在 这 里 编写 咎 入 到 HTML 文 件 中 的 JavaScript 代 码 
</script> 

<p~>Here is more HTML</P> 

</body> 

</html> 
































第 14 章 讲解 Web 浏 览 占 端 脚本 技术 ， 并 涵盖 客户 问 JavaScript 中 的 一 
些 重要 全 局 函数 ， 例 如 : 








=<script> 

function moveon( ){// 通 过 弹出 一 个 对 话 框 来 询问 用 户 一 个 问题 

var answer=confirm(" 准 备 好 了 吗 ?");// 单 击 "确定 "按钮 ， 浏 览 器 会 加 载 一 个 新 页 面 
if(answer)window.1location="http://taobao.com"; 


















































} 

// 在 1 分 钟 (6 万 毫秒 ) 后 执行 定义 的 这 个 函数 
setTimeout (moveon, 60000 ) ; 
</script> 








我 们 注意 到 ， 本 节 展 示 的 客户 端 示例 代码 要 比 前 面 的 示例 代码 要 长 
很 多 。 这 里 的 示例 代码 并 不 是 用 来 在 Firebug (或 者 其 他 调试 工具 〉 控 制 
台 窗 口中 直接 输入 的 ， 而 是 作为 一 个 单独 的 HTML 文件 ， 并 在 Web 浏 览 
器 中 直接 打开 运行 的 。 比 如 ， 上 上 述 代码 段 就 是 一 个 HTML 文件 的 完 束 内 
合 。 


第 15 章 的 内 容 更 加 务实 一 “通过 脚本 来 操纵 HTML 文 档 内 容 。 它 将 
展示 如 何 选取 特定 的 HTML 元 素 、 如 何 给 HTMEL 元 素 设 置 必 性、 如 何 修 
改元 素 内 容 ， 以 及 如 何 给 文档 添加 新 节点 。 这 里 的 示例 函数 展示 了 如 何 
查找 和 修改 基本 文档 的 内 容 : 





























// 在 document 中 的 一 个 指定 的 区 域 输出 调试 消息 
// 如 果 document 不 存在 这 样 一 个 区 域 ， 则 创建 一 个 

function debug(msg){// 通 过 查看 HTML 元 素 id 属 性 来 查找 文档 的 调试 部 分 

var 1og=document .getElementById("debuglog");// 如 果 这 个 元 素 不 存在 ， 则 创建 一 个 
if(11og){ 

1og=document .createElement ("div");// 创 建 一 个 新 的 div 过 元 素 
lo0g.id="debuglog";// 给 这 个 元 素 的 HTML id 赋值 

1og.innerHTML="<h1>Debug Log</h1>";// 定 义 初始 内 容 

document .body.appendchild(10g);// 将 其 添加 到 文档 的 末尾 







































































} 

// 将 消息 包装 在 <pre> 中 ， 并 添加 至 10g 中 
var pre=document.createElement("pre");// 创 建 <pre 二 标签 

var text=document.createTextNode(msg);// 将 msg 包 装 在 一 个 文本 节点 中 
pre.appendChild(text);// 将 文本 添加 至 <pre> 
log.appendCchild(pre);// 将 二 pre 二 添加 至 log 
} 





























第 15 章 讲述 JavaScript 如 何 操 纵 HTML 中 定义 Web 内 容 的 元 素 。 第 16 
te CSS 样 式 定 义 了 内 容 的 
展示 方式 。 这 通常 会 使 用 到 HTML 元 素 的 style 和 class 属 性 : 








function hide(e,reflow){// 通 过 JavaScript 操 纵 样式 来 隐藏 元 素 e 
if(reflow){// 如 果 第 二 个 参数 是 true 
e.Sstyle.display="none"// 隐 藏 这 个 元 素 ， 其 所 占 的 空间 也 随 之 消失 









































} 
else{f// 和 否则 
e.style.visibility="hidden";// 将 e 隐 藏 ， 但 是 保留 其 所 占 的 空间 
} 
} 
function highlight (e){// 通 过 设置 CSS 类 来 高 之 显示 e 
// 简 单 地 定义 或 追加 HTML 类 属性 
// 这 里 假设 CSS 样 式 表 中 已 经 有 "hilite" 类 的 定义 
if(!e.className)e.className="hilite"; 
else e.className+="hilite"; 


} 

















































































































可 以 通过 JavaScript 来 操控 Web 浏 览 右 中 的 HTML 内 容 和 文档 的 CSS 
样式 ， 同 样 ， 也 可 以 通过 事件 处 理 程序 (event handler) 来 定义 文档 的 
行为 。 事 件 处 理 程序 是 一 个 在 浏览 器 中 注册 的 JavaScript 函 数 ， 当 特定 类 
型 的 事件 发 生 时 浏览 器 便 调 用 这 个 函数 。 通 党 我 们 关心 的 事件 类 型 是 鼠 
标点 击 事件 和 键盘 按键 事件 〈 在 智能 手机 中 则 是 各 种 触 碰 事件 ) 。 或 者 
说 ， 当 浏览 器 完成 了 文档 的 加 载 ， 当 用 户 改变 窗口 大 小 或 当 用 户 向 








HTML 表单 元 系 中 输入 数据 时 便 会 触发 一 个 事件 。 第 17 章 详细 描述 如 何 
0 


定义 事件 处 理 程序 最 简单 的 方法 是 ， 给 HTML 的 以 "on" 为 前 缀 的 属 
性 绑 定 一 个 回调 。 当 写 一 些 简 单 的 测试 程序 时 ， 最 实用 的 方法 就 是 
给 "oncjlick" 处 理 程 序 绑 定 回调 。 假 定 已 经 将 上 文中 的 debug0 和 hide0) 两 
个 函数 保存 至 名 为 debug.js 和 hide.js 的 文件 中 ， 那 么 就 可 以 写 一 个 简单 的 
HTML 测 试 文件 ， 来 给 二 button 二 元 素 的 ondlick 属 性 指定 一 个 事件 处 理 
程序 : 














<script src="debug.js">></script> 

<script src="hide.js"></script> 

Hello 

<button onclick="hide(this,true);debug('hide button 1');">Hide1l</button> 
<button onclick="hide(this);debug('hide button 2');">Hide2</button> 
World 





下 面 这 些 客户 端 JavaScript 代 人 码 用 到 了 事件 ， 它 给 一 个 很 重要 的 事件 
一 一 "load" 事 件 注册 了 一 个 事件 处 理 程序 。 同 时 ， 也 展示 了 注 
册 "click" 事 件 处 理 函 数 更 高 级 的 一 种 方法 : 











//"1oad" 事 件 只 有 在 文档 加 载 完成 后 才 会 触发 

// 通 常 需要 等 待 1oad 事 件 发 生 后 才 开 始 执行 JavaScript 代 码 

window.onload=function( ){// 当 文档 加 载 完 成 时 执行 这 里 的 代码 

// 找 到 文档 中 所 有 的 <img 二 标签 

var images=document.getElementsByTagName("img");// 遍 历 ijmages， 给 每 个 节点 的 "click" 事 
件 添加 事件 处 理 程序 

// 在 点 击 图 片 的 时 候 将 图 片 隐藏 

for(var i=0;i<images.length;i++){ 

var image=images[i]; 

if(image.addEventListener)// 注 册 事件 处 理 程序 的 另 一 种 方法 

image.addEventListener("click",hide,false); 

else// 兼 容 [IE8 及 以 前 的 版 本 


image.attachEvent("onclick",hide); 


































































































} 
// 这 便 是 上 面 注册 的 事件 处 理 函 数 
function hide(event){event,.target.style.visibility="hidden";} 


}; 























第 15 一 17 章 讲述 了 如 何 使 用 JavaScript 来 操控 网 页 的 内 容 
(HTML) 、 样 式 (CSS) 以 及 行为 (事件 处 理 ) 。 这 些 章 所 讨论 的 
API 多 少 有 些 复杂 ， 且 宇 仿 仍 具 [有 粮 糕 的 浏览 器 兼容 性 ， 也 正 是 由 于 这 
个 原因 ， 很 多 客户 端 JavaScript 程 序 员 选择 使 用 * 库 ?或 “框架 ”来 简化 他 们 








的 编码 工作 。 最 流行 的 库 非 jQuery 更 属 。 第 19 章 将 会 详细 介绍 jQuery 
库 。jQuery 定 义 了 一 套 灵巧 易 用 的 API， 用 来 操控 文档 内 容 、 样 式 和 行 
为 。jQuery 经 过 了 完整 的 测试 ， 在 所 有 现代 主流 浏览 器 ， 甚 至 在 IE6 这 
种 早期 浏览 絮 中 都 可 以 照常 运 行 。 


jQuery 代码 非常 易于 识别 ， 因 为 它 充 分 利用 了 一 个 名 为 $0 的 函数 。 
这 里 用 jQuery 重 写 了 上 文中 提 到 的 debug() 函 数 : 








function debug(msg){ 
var 10g=$("#debuglog");// 找 到 要 显示 msg 的 元 素 . 
if(1og,1length==9){// 如 果 不 存在 则 创建 之 





一 





lJ]og=$("<=div id='debuglog'>><hi>Debug Log<=/h1i></div>"); 
1og.appendTo(document .body);// 并 将 其 追加 到 body 里 
























































} 
1og.append($("<pre/>").text(msg) );// 将 msg 包 装 在 <pre> 中 ， 再 追加 到 1og 里 
} 








目前 我 们 所 提 到 的 第 二 部 分 的 4 章 都 是 围绕 网 页 展开 讨论 的 。 后续 
的 4 章 将 着 眼 点 转 回 Web 应 用 。 这 几 章 的 内 容 并 不 是 讨论 如 何 通 过 编写 
操控 内 容 、 样 式 和 行为 的 脚本 使 用 Web 浏 览 器 来 演 染 文档 ; 而 是 讲解 如 
何 将 Web 浏 览 器 当做 应 用 平台 ， 并 描述 了 用 以 文 持 更 复杂 精细 的 客户 端 
Web 应 用 的 现代 浏览 器 API。 第 18 章 讲解 如 何 使 用 JavaScript 来 发 起 HITP 
请 求 。 第 20 章 摘 述 数据 存储 的 机 制 以 及 客户 端 应 用 中 的 会 话 状 态 的 保 
持 。 第 21 章 涵盖 基于 HTML 的 <vanvas 之 标签 的 客户 端 API， 用 来 进行 
任意 形状 图 形 的 绘制 。 最 后 ， 第 22 章 讲解 HTML5 所 提供 的 新 一 代 Web 
应 用 API。 网 络 、 存 储 、 图 形 : 这 些 都 是 web 浏 览 器 提供 的 操作 系统 级 
的 服务 ， 它 们 定义 了 全 新 的 跨 平台 的 应 用 环境 。 如 果 你 正在 进行 基于 那 
些 支 持 这 些 新 API 的 浏览 器 的 开发 ， 这 将 是 你 作为 客户 问 JavaScript 程 序 
员 最 激动 人 心 的 时 刻 。 最 后 4 章 并 没有 太 多 示例 代码 ， 但 下 面 的 例子 使 
用 了 这 些 新 的 API。 


示例 : 一 个 JavaScript 宽 球 计 算 器 
本 章 最 后 展示 一 个 例子 ， 这 个 例子 集中 使 用 了 诸多 技术 ， 展 示 了 真 


实 环境 下 的 客户 端 JavaScript (包括 HTML 和 CSS) 编程 。 例 1-1 给 出 了 一 
个 简单 的 贷款 计算 器 应 用 的 代码 ， 如 图 1-2 所 示 。 
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图 1-2 一 个 贷款 计算 器 Web 应 用 

在 看 代码 〈 例 1-1) 之 前 应 当先 仔细 阅读 本 段 文字 。 你 不 需要 理解 
所 有 内 容 ， 代 码 中 有 着 完整 的 注释 ， 至 少 你 应 该 能 正确 运行 这 段 代码 得 
到 如 图 1-2 所 示 的 界面 。 这 里 的 例子 展示 了 诸多 JavaScript 语 言 核心 特 
性 ， 同 样 展示 了 重要 的 客户 端 JavaScript 技 术 : 

:如 何在 文档 中 查找 元 素 

如何 通过 表单 input 元 素来 获取 用 户 的 输入 数据 

:如 何 通 过 文档 元 素来 设置 HTML 内 容 

:如 何 将 数据 存储 在 浏览 器 中 

:如 何 使 用 脚本 发 起 HTTP 请 求 

:如 何 利 用 二 canvas 二 元 素 绘图 








例 1-1: 


<IDOCTYPE html> 


<html> 
<head> 


基于 JavaScript 实 现 的 贷款 计算 器 


<title>Javascript Loan Calculator</title> 

二 style 二 /* 这 是 一 个 CSS 样 式 表 :定义 了 程序 输出 的 样式 */ 
.Output{font-weight:bold;}/* 计 算 结果 定义 为 粗 体 */ 
#payment{text-decoration:underline;}/* 定 义 id="payment" 的 元 素 样 式 */ 


#graph{border:solid black 1px;}/* 
th, td{vertical-align:top;}/* 表 格 六 


</style> 
</head> 
<body> 
< 





这 是 一 个 HTML 表 格 ， 








苇 中 








程序 将 在 二 span 二 元 素 中 








这 些 id 将 在 表格 下 面 的 JavaScript 代 码 中 用 
input 元 素 定义 了 "onchange" 或 "onclick" 的 事 
定 的 JavaScript 代 码 段 





执行 指 
SS 
<table> 























































































































图 表 有 一 个 1 像素 的 边框 */ 
元 格 对 其 方式 为 顶端 对 齐 */ 
包含 <input > 元 素 可 以 用 来 输入 数据 。 
显示 计算 结果 ， 这 些 元 素 都 具有 类 似 "interset" 和 "years" 的 id 
到 。 我 们 注意 到 ， 有 一 些 
件 处 里程 序 ， 以 便 用 户 在 输入 数据 或 者 点 击 inputs 时 


<tr 过 <th>Enter Loan Data:<=/th> 


<td><=/td> 












































<th>Loan Balance,Cumulative Equity,and Interest Payments</th></tr> 
<tr><td>Amount of the loan($):<=/td> 
<td>><input id="amount"onchange="calculate();"></td> 


<td rowspan=8> 


<canvas id="graph"width="400"height="250"></canvas></td></tr> 
<tr><td>Annual interest(%):<=/td> 
<td><=<input id="apr"onchange="calculate();"></td></tr> 
<tr><td>Repayment period(years):</td> 
<td><input id="years"onchange="calculate();"~></td> 
<tr><td>Zipcode(to find lenders):</td> 
<td>><input id="zipcode"onchange="calculate();"></td> 
<tr><th>Approximate Payments:<=/th> 
<td><button onclick="calculate();">Calculate</button></td></tr> 
<tr><td>Monthly payment:<=/td> 
<td>$<=span class="output"id="payment">></span></td></tr> 
<tr><td>Total payment:<=/td> 
<td>$<=span class="output"id="total"></span></td></tr> 
<tr><td>Total interest:</td> 
<td>$<=span class="output"id="totalinterest"></span></td></tr> 
<tr><th>Sponsors:</th><td colspan=2> 
Apply for your loan with one of these fine lenders: 


<div id= 
</table> 


一 !- -随后 是 Javascirpt 代 码 ， 这 些 代码 内 嵌 在 了 一 个 <script 之 标签 里 
放 在 天 head 之 标签 中 - -> 
<<!- -将 JavaScript 代 码 放 在 HTML 代 码 之 后 仅仅 是 为 了 便于 理解 - -> 


的 严格 模式 /* 


里 程 


二 !-- 通 常情 况 下 ， 这 些 


























“脚本 代码 应 当 



























































"lenders">></div></td></tr> 
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这 时 会 调用 
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<script> 

"use strict";// 如 果 浏 览 器 支持 的 话 ， 则 开启 ECMAScript 5 
* 这 里 的 脚本 定义 了 caculate( ) 函数， 在 HTML 代 码 中 绑 定 事件 处 理 
“这 个 函数 从 <input 之 元 素 中 读 取 数 居 ， 计 算 贷 款 赔 付 信息 ， 

* 同样 ， 这 里 还 保存 了 用 户 数据 、 展 示 了 放贷 人 链接 并 绘制 出 了 图 表 
WA 

function calculate(){// 查 找 文档 中 用 于 输入 输出 的 元 素 





























var amount=document .getElementById("amount"); 


将 结果 显示 在 <span 之 元 素 中 





的 ， 将 从 input 元 素 中 获取 输入 数据 


var apr=document .getElementById("apr"); 

var years=document .getElementById("years"); 

var zipcode=document.getElementById("zipcode"); 

var payment=document.getElementById("payment"); 

var total=document.getElementById("total"); 

var totalinterest=document.getElementById("totalinterest");// 假 设 所 有 的 输入 都 是 





t 














// 将 百分比 格式 转换 为 小 数 格式 ， 并 从 年 利率 转换 为 月 利率 

// 将 年 度 赔付 转换 为 月 度 赔付 

var principal=parseFloat(amount .Value ) ， 

var interest=parseFloat(apr.value)/100/12,; 

var payments=parseFloat(years.value)*12;// 现 在 计算 月 度 赔付 的 数 
var x=Math.pow(1+interest,payments);//Math.pow() 进 行 寡 次 运算 
var monthly=(principal*x*interest)/(x-1);// 如 果 结 果 没 有 超过 JavaScript 能 表示 的 数字 范 
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旧 户 的 输入 也 正确 
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网 络 错误 























// 这 里 所 展示 的 结果 就 是 合法 的 
if(isFinite(monthly)){// 将 数据 填充 至 输出 字段 的 位 置 ， 四 舍 五 入 到 小 数 点 后 两 位 数字 
payment.innerHTML=monthly.toFixed(2); 
total.innerHTML=(monthly*payments).torFixed(2); 
totalinterest.innerHTML=((monthly*payments)-principal).toFixed(2);// 将 用 户 的 输入 数 



























































怖 保存 下来， 这 样 在 下 次 访问 时 也 能 取 到 数据 











save (amount. value,apr .value, years.value,zipcode.value);// 找 到 并 展示 本 地 放贷 人 ， 但 忽略 



































try{// 捕 获 这 段 代 码 抛 出 的 所 有 异常 


getLenders(amount.value,apr.value,years.value,zipcode.value); 


























} 
catch(e){/* 忽 略 这 些 异 常 */}// 最 后 ， 用 图 表 展 示 贷 款 余额 、 利 息 和 资产 收益 
chart(principal,interest,monthly,payments); 














} 

else{fV// 计 算 结 果 不 是 数字 或 者 是 无 穷 大 ， 意 味 着 输入 数据 是 非法 或 不 完整 的 
// 清 空 之 前 的 输出 数据 
payment .innerHTML="";// 清 空 元 素 的 文本 内 容 
total.innerHTML="" 
totalinterest.innerHTML="",， 
chart();// 不 传 参数 的 话 就 是 清除 医 
} 


} 

// 将 用 户 的 输入 保存 至 localStorage 对 象 的 属性 中 

// 这 些 属性 在 再 次 访问 时 还 会 继续 保持 在 原 位 

// 如 果 你 在 浏览 器 中 按照 file://URL 的 方式 直接 打开 本 地 文件 ， 
// 则 无 法 在 某 些 浏 览 器 中 使 用 存储 功能 (比如 FireFox) 

// 而 通过 HTTP 打 开 文件 是 可 行 的 
function save(amount,apr,years,zipcode)t{ 
if(window.localStorage){// 只 有 在 浏览 器 支持 的 时 候 才 运行 这 里 的 代码 
localStorage.1loan amount=amount; 
localStorage.1loan_apr=apr,; 

JocalStorage.1loan_years=years,; 

localStorage.1loan zipcode=zipcode; 


} 


} 

// 在 文档 首次 加 载 时 ， 将 会 尝试 还 原 输 入 字段 

window,.onload=function( ){// 如 果 浏 览 器 支持 本 地 存储 并 且 上 次 保存 的 值 是 存在 的 
if(window.localStorage& &localStorage.1loan amount){ 

document .getElementById("amount").value=localStorage.1loan_ amount; 
document .getElementById("apr").value=localStorage.1loan apr; 
document .getElementById("years").value=localStorage.1loan years; 
document .getElementById("zipcode").value=localStorage.1loan zipcode; 
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} 

};// 将 用 户 的 输入 发 送 至 服务 器 端 脚本 (理论 上 ) 将 

// 返 回 一 个 本 地 放贷 人 的 链接 列表 ， 在 这 个 例子 中 并 没有 实现 这 种 查找 放贷 人 的 服务 
// 但 如 果 该 服务 存在 ， 该 函数 会 使 用 它 

































































function getLenders(amount,apr,years,zipcode){// 如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 ， 
则 退出 

if(!window.XMLHttpRequest)return;// 找 到 要 显示 放贷 人 列表 的 元 素 

var ad=document .getElementById("lenders"); 

if(lad)return;// 如 果 返 回 为 室 ， 则 退出 

// 将 用 户 的 输入 数据 进行 URL 编 码 ， 并 作为 查询 参数 附加 在 URL 里 

var url="getLenders.php"+// 处 理 数 据 的 URL 地 址 

"?amt="+encodeURIComponent (amount)+// 使 用 查询 串 中 的 数据 

"&apr="+encodeURIComponent (apr)+ 

"&yrs="+encodeURIComponent (years)+ 

"&zip="+encodeURIComponent (zipcode);// 通 过 XMLHttpRequest 对 象 来 提取 返回 数据 

var req=new XMLHttpRequest();// 发 起 一 个 新 的 请 求 

req .open("GET", url1);// 通 过 URL 发 起 一 个 HTTP GET 请 求 

req.send(null);// 不 带 任何 正文 发 送 这 个 请 求 

// 在 返回 数据 之 前 ， 注 册 了 一 个 事件 处 理 函 数 ， 这 个 处 理 函数 

// 将 会 在 服务 器 的 响应 返回 至 客户 端的 时 候 调用 

// 这 种 异步 编程 模型 在 客户 端 JavaScript 中 是 非常 常见 的 

req.onreadystatechange=function(){ 

if(req.readystate==4& &req.status==200){// 如 果 代 码 运行 到 这 
整 的 HTTP 响 应 

var response=req.responseText;//HTTP 响 应 是 以 字符 串 的 形式 呈现 的 

var lenders=JSON.parse(response);// 将 其 解析 为 JS 数 组 

// 将 数组 中 的 放贷 人 对 象 转换 为 HTML 字 符 串 形式 

Var list=""; 

for(var i=0;i<lenders.length;i++){ 

list+="<1i>><a href='"+lenders[i] .url+"'>>"+ 

lenders[il].name+"</a>",，; 
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这 里 ， 说 明 我 们 得 到 了 一 个 合法 且 完 
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} 

// 将 数据 在 HTML 元 素 中 呈现 出 来 

ad,innerHTML="<U1L>"+1L1ISst+"”</uU1>"， 

} 

} 

// 在 HTML<canvas> 元 素 中 用 图 表 展 示 月 度 贷款 余额 、 利 息 和 资产 收益 

// 如 果 不 传 入 参数 的 话 ， 则 清空 之 前 的 图 表 数 据 

function chart(principal, interest,monthJly, payments ){ 

var graph=document .getElementById("graph"); Sits 

graph .width=graph .width;// 用 一 种 巧妙 的 手法 清除 画布 

// 如 果 不 传 入 参数 ， 或 者 浏览 器 不 支持 画布 ， 则 直接 返回 

if(arguments. length==0||!graph.getcontext)return;// 获 得 画布 元 素 的 "context" 对 象 ， 这 个 
对 象 定义 了 一 组 绘画 API 

var g=graph.getcontext("2d");// 所 有 的 绘画 操作 都 将 基于 这 个 对 象 

var width=graph .width, 

height=graph.height;// 获 得 画布 大 小 

// 这 里 的 函数 作用 是 将 付款 数字 和 美元 数据 转换 为 像素 

function paymentToX(n){ 

return n*width/payments,;} 

function amountToY(a){ 

return height-(a*height/(monthly*payments*1.05));}// 付 款 数据 是 一 条 从 (0,0) 到 
(payments,monthly*payments ) 的 直线 

g.moveTo(paymentToX(0),amountToY(0));// 从 左下 方 开 始 

g.lineTo(paymentToX(payments),// 绘 至 右上 方 

amountToY(monthly*payments)); 
.lineTo(paymentToX(payments),amountToY(0));// 骨 全 
.ClosePath( );// 将 结尾 连接 至 开头 
.fillSstyle="#f88";// 亮 红色 
.fil11() ;// 填 充 矩 形 
.font="bold 12px sans-serif";// 定 义 一 种 字体 
.fillText("Total Interest Payments",20,20);// 将 文字 绘 利 
// 很 多 资产 数据 并 不 是 线性 的 ， 很 难 将 其 反映 至 图 表 中 


var equity=0; 
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到 图 例 中 
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g.beginPath();// 开 始 绘制 新 图 形 
g.moveTo(paymentToX(0),amountToY(0)); // 从 左 下 方 开始 
for(var p=1;p<=payments ; p++){// 计 算出 每 一 笔 赔付 的 利息 
var th Mo or le (nine nan Co by nb et ent 


equity+=(monthly-thisMonthsInterest);// 得 到 资产 额 
.lineTo(paymentToX(p),amountToY(equity));// 将 数据 绘制 到 画布 上 





















































.lineTo(paymentToX(payments),amountToY(0));// 将 数据 线 绘制 至 x 轴 
.ClosePath( ) ;// 将 线条 结尾 连接 至 线条 开头 

.fillStyle="green";// 使 用 绿色 绘制 图 形 
.fil1( );// 曲 线 之 下 的 部 分 均 填充 
.fillText("Total Equity",20,35);// 文 本 颜色 设置 为 绿色 
/再 次 循环 ， 余 额 数据 显示 为 黑色 粗 线条 

var bal=principal; 

g.beginPath()， 
g.moveTo(paymentToX(0),amountToY(bal)); 

for(var p=1;p==payments;p++){ 

var thisMonthsInterest=bal*interest; 
bal-=(monthly-thisMonthsInterest); // 得 到 资产 额 
g.lineTo(paymentToX(p),amountToY(bal));// 将 直线 连接 至 某 点 
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.Stroke( ) ; // 绘 制 余额 的 曲线 

.fillStyle="black";// 使 用 黑色 字体 

.fillText ("Loan Balance",20,50);// 图 例文 字 

// 将 年 度数 据 在 X 轴 做 标记 
g.textAlign="center";// 文 字 居 中 对 齐 

var y=amountToOY(0);//Y 坐 标 设 为 0 

for(var year=1;year*12<=payments;year++){// 遍 历 每 旬 
var x=paymentToX(year*12);// 计 算 标 记 位 置 
g.fillRect(x-0.5,y-3,1,3);// 开 始 绘制 标记 
if(year==1)g.fillText("Year",Xx,y-5);// 在 坐标 轴 做 标记 
if(year%5==0& &year*121==payments)// 每 5 年 的 数据 
g.fillText(String(year),x,y-5); 





} 
g .linewidth=3;// 将 直线 宽度 加 粗 
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} 

// 将 赔付 数额 标记 在 右边 界 
g.textAlign="right";// 文 字 右 对 齐 
g.textBaseline="middle";// 文 字 垂 直 居 中 

var ticks=[monthly*payments,principal];// 我 们 将 3 
var rightEdge=paymentToX(payments ) ;// 设 置 X 坐 标 
for(var i=0;i<ticks.length;i++){// 对 每 两 个 点 做 循环 
var y=amountToY(ticks[i]);// 计 算 每 个 标记 的 Y 坐 标 
g.fillRect (rightEdge-3,y-0.5,3,1);// 绘 制 标记 
g.fillText(String(ticks[i].toFixed(0)),// 绘 制 文本 
rightEdge-5, y); 

} 


} 
</script> 


</body> 
</html> 
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第 一 部 分 JavaScript 语言 核心 


本 书 该 部 分 〈 第 2 一 12 章 ) 描述 JavaScript 语 言 核 心 。 这 部 分 是 该 语 
言 的 主要 参考 资料 。 学 习 之 初 通读 一 过 该 部 分 ， 以 后 在 遇 到 JavaScript 的 
难点 时 ， 回 到 这 里 重新 查阅 相关 内 容 以 巩固 知识 的 掌握 : 
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第 2 章 ”词法 结构 


编程 语言 的 词法 结构 是 一 套 基础 性 规则 ， 用 来 描述 如 何 使 用 这 门 语 
言 来 编写 程序 。 作 为 语法 的 基础 ， 它 规定 了 诸如 变量 名 是 什么 样 的 、 怎 
么 写 注释 ， 以 及 程序 语句 之 间 如 何 分 隔 等 规则 。 本 章 用 很 短 的 篇 幅 来 介 
绍 JavaScript 的 词法 结构 。 


2.1 字符 集 

JavaScript 程 序 是 用 Unicode 字 符 集 编写 的 。Unicode 是 ASCII 和 Latin- 
1 的 超 集 ， 并 文 持 地 球 上 几乎 所 有 在 用 的 语言 。ECMAScript 3 要 求 
JavaScript 的 实现 必须 支持 Unicode 2.1 及 后 续 版 本 ，ECMAScript 5 则 要 求 


支持 Unicode 3 及 后 续 版 本 。 可 以 参考 3.2 节 的 “边栏 ?来 了 解 更 多 关于 
Unicode 和 JavaScript 的 信息 。 


2.1.1 区 分 大 小 写 


JavaScript 是 区 分 大 小 写 的 语言 。 也 就 是 说 ， 关 键 字 、 变 量 、 函 数 名 
和 所 有 的 标识 符 〈identifier) 都 必须 采取 一 致 的 大 小 写 形式 。 比 如 ， 关 
键 字 "while" 必 须 写成 "while"， 而 不 能 写成 "While" 或 者 "WHILE"。 同 
样 ，"online"、"Online"、"OnLine" 和 "ONLINE" 是 4 个 不 同 的 变量 名 。 

















但 需要 注意 的 是 ，HTML 并 不 区 分 大 小 写 (尽管 XHTML 区 分 大 小 
写 ) 。 由 于 它 和 客户 端 JavaScript 联 系 紧 密 ， 因 此 这 点 区 别 很 容易 混 清 
山 。 许 多 客户 端 JavaScript 对 象 和 属性 与 它们 所 表示 的 HTML 标 签 和 属性 
同名 。 在 HIML 中 ， 这 些 标签 和 属性 名 可 以 使 用 大 写 也 可 以 是 小 写 ， 而 
在 JavaScript 中 则 必须 是 小 写 。 例 如 ， 在 HTML 中 设置 事件 处 理 程序 时 ， 
oncjlick 属 性 可 以 写成 onClick， 但 在 JavaScript 代 码 〈 或 者 XHTML 文档 ) 
中 ， 必 须 使 用 小 写 的 onclick。 


2.1.2 空格、 换行 符 和 格式 控制 符 


JavaScript 会 忽略 程序 中 标识 〈token) 乌 之 间 的 空格 。 多 数 情 况 
下 ，JavaScript 同 样 会 包 略 换行 符 〈2.5 节 提 到 了 一 种 意外 情形 ) 。 由 于 
可 以 在 代码 中 随意 使 用 空格 和 换行 ， 因 此 可 以 采用 整齐 、 一 致 的 缩 进 来 
形成 统一 的 编码 风格 ， 从 而 提高 代码 的 可 读 性 。 











除了 可 以 识别 普通 的 空格 符 〈u0020) ，JavaScript 还 可 以 识别 如 下 
这 些 表示 空格 的 字符 :水 平 制 表 符 〈\u0009) 、 垂 直 制 表 符 
Gu000B) 、 换 页 符 〈\u000C) 、 不 中 断 空 白 (u00A0)、 字 节 序 标记 
CuFEFF)， 以 及 在 Unicode 中 所 有 Zs 类 别 的 字符 包 。JavaScript 将 如 下 字符 
识别 为 行 结 束 符 : 换行 符 〈(\u000A) ， 回 车 符 〈\u000D) ， 行 分 隔 符 
(Cu2028) ， 段 分 隔 符 〈\u2029) 。 回 车 符 加 换行 符 在 一 起 被 解析 为 一 
个 单行 结束 符 。 


Unicode 格 式 控制 字符 (Cf 类 峡 ) ， 比 如 “从 右 至 左 书写 标 
记 ”(\u200F) 和 “从 左 至 右 书写 标记 ”Qu200E)〉 乌 ， 控 制 着 文本 的 视觉 
显示 ， 这 对 于 一 些 非 英语 文本 的 正确 显示 来 说 是 至 关 重 要 的 ， 这 些 字符 
可 以 用 在 JavaScirpt 的 注释 、 字 符 串 直接 量 和 正则 表达 式 直接 量 中 ， 但 不 
能 用 在 标识 符 〈 比 如 ， 变 量 名 ) 中 。 但 有 个 例外 ， 零 宽 连 接 符 
Cu200D) 和 有 零 宽 非 连接 符 (FEFF) 岛 是 可 以 出 现在 标识 符 中 的 ， 但 
不 能 作为 标识 符 的 首 字符 。 上 文 也 提 到 了 ， 字 节 序 标记 格式 控制 符 
CUFEFF) 被 当成 了 空格 来 对 待 。 


2.1.3 ”Unicode 转 义 序列 


在 有 些 计 算 机 硬件 和 软件 里 ， 无 法 显示 或 输入 Unicode 字 符 全 集 。 
为 了 文 持 那些 使 用 老 旧 技术 的 程序 员 ，JavaScript 定 义 了 一 种 特殊 序列 ， 
使 用 6 个 ASCII 字 符 来 代表 任意 16 位 Unicode 内 码 。 这 些 Unicode 转 义 序 列 
均 以 \u 为 前 级 ， 其 后 跟随 4 个 十 六 进 制 数 ( 使 用 数字 以 及 大 写 或 小 写 的 
字母 A~F 表 示 ) 。 这 种 Unicode 转 义 写 法 可 以 用 在 JavaScript 字 符 串 直接 
量 、 正 则 表达 式 直接 量 和 标识 符 中 关键 字 除 外 〉。 例 如 ， 字 符 6 的 
Unicode 转 义 写法 为 00E9， 如 下 两 个 JavaScript 字 符 串 是 完全 一 样 的 : 





























"café"==="caf\uO0e9"//=>>true 





Unicode 转 义 写 法 也 可 以 出 现在 注释 中 ， 但 由 于 JavaScript 会 将 注释 
忽略 ， 它 们 只 是 被 当成 上 下 文中 的 ASCII 字 符 处 理 ， 而 且 并 不 会 被 解析 
为 其 对 应 的 Unicode 字 符 。 


2.1.4 标准 化 
Unicode 人 允许 使 用 多 种 方法 对 同一 个 字符 进行 编码 。 比 如 ， 字 





符 “6” 可 以 使 用 Unicode 字 符 \u00E9 表 示 ， 也 可 以 使 用 普通 的 ASCII 字 符 e 
跟随 一 个 语调 符 \u0301。 在 文本 编辑 嚣 中， 这 两 种 编码 的 显示 结果 一 模 
一 样 ， 但 它们 的 二 进 制 编码 表示 是 不 一 样 的 ， 在 计算 机 里 也 不 相等 。 
Unicode 标 准 为 所 有 字符 定义 了 一 个 首选 的 编码 格式 ， 并 给 出 了 一 个 标 
准 化 的 处 理 方式 将 文本 转换 为 一 种 适合 比较 的 标准 格式 ，JavaScript 会 认 
为 它 正 在 解析 的 程序 代码 已 经 是 这 种 标准 格式 ， 不 会 再 对 其 标识 符 、 字 
符 串 或 正则 表达 式 作 标准 化 处 理 。 


2.2 ”注释 


JavaScript 文 持 两 种 格式 的 注释 。 在 行 尾 “0/” 之 后 的 文本 都 会 被 
JavaScript 当 做 注释 忽略 掉 的 。 此 外 ，”“*>” 和 "“#/” 之 间 的 文本 也 会 当做 注 
释 ， 这 种 注释 可 以 跨行 书号， 但 不 能 有 般 套 的 注释 。 下 面 都 是 合法 的 
JavaScript 注 释 : 


























// 这 里 是 单行 注释 
/* 这 里 是 一 段 注释 */// 这 里 是 男 一 段 注 释 
J 
* 这 又 是 一 段 注释 
* 这 里 的 注释 可 以 连 写 多 行 
*/ 


2.3 ”直接 量 


所 谓 直 接 量 〈literal) ， 就 是 程序 中 直接 使 用 的 数据 值 。 下 面 列 出 
的 都 是 直接 量 : 










































































12// 数 字 

1.2// 小 数 

"hello world"// 字 符 串 文本 
'Hi'// 另 一 个 字符 串 
true// 布 尔 值 
false// 另 一 个 布尔 值 
/javascript/gi 

// 正 则 表达 式 直 接 量 〈 用 做 模式 匹配 ) 
null// 空 





















































第 3 章 会 详细 讲解 数字 和 字符 串 直 接 量 。 正 则 表达 式 直 接 量 会 在 第 
es 
交 量 ， 例 如 : 





{X:1,y:2}// 对 象 
[1,2,3,4,5]// 数 组 





2.4 标识 符 和 保留 字 


标识 符 就 是 一 个 名 字 。 在 JavaScript 中 ， 标 识 符 用 来 对 变量 和 函数 进 
行 命名 ， 或 者 用 做 JavaScript 代 码 中 某 些 循环 语句 中 的 跳 转 位 置 的 标记 。 
JavaScript 标 识 符 必 须 以 字母 、 下 划 线 〈(_) 或 美元 符 〈$) 开始 。 后 续 的 
字符 可 以 是 字母 、 数 字 、 下 划 线 或 美元 符 ( 数 字 是 不 允许 作为 首 字符 出 
现 的 ， 以 便 JavaScript 可 以 轻易 区 分 开标 识 符 和 数字 ) 。 下 面 是 合法 的 标 


识 符 ; 








工 
my_variable_name 
v13 

_dummy 

$str 





出 于 可 移植 性 和 易于 书写 的 考虑 ， 通 常 我 们 只 使 用 ASCII 字 母 和 数 
字 来 书写 标识 符 。 然 而 需要 注意 的 是 ，JavaScript 人 允许 标识 符 中 出 现 
Unicode 字 符 全 集中 的 字母 和 数字 。 从 技术 上 讲 ，ECMAScript 标 准 也 
允许 在 标识 符 的 首 字 符 后 面 出 现 Unicode 字 符 集中 的 Mn 类 、Mc 类 和 Pc 
| 。 由 此 ， 程 序 员 也 可 以 使 用 非 英 语 语言 或 数学 符号 来 书写 标识 
符 : 











Var si=true; 
varn=3.14; 





和 其 他 任何 编程 语言 一 样 ，JavaScript 保 留 了 一 些 标识 符 为 自己 所 
用 。 这 些 “ 保 留 字 ” 不 能 用 做 普通 的 标识 符 ， 下 面 会 讲 到 。 


保留 字 


JavaScript 把 一 些 标识 符 拿 出 来 用 做 自己 的 关键 字 。 因 此 ， 就 不 能 
在 程序 中 把 这 些 关 键 字 用 做 标识 符 了 : 








break delete function return typeof 


Case do 全 switch var 
catch else in this void 
continue false instanceof throw while 
debugger finally new true with 
default for null try 


JavaScript 同 样 保留 了 一 些 关 键 字 ， 这 些 关 键 字 在 当前 的 语言 版 本 中 
9 ， 但 在 未 来 版 本 中 可 能 会 用 到 。ECMAScript 5 保留 了 这 些 关 
5 


class const enum export extends import super 


此 外 ， 下 面 这 些 关 键 字 在 普通 的 JavaScript 代 码 中 是 合法 的 ， 但 是 在 
严格 模式 下 是 保留 字 : 





implements let private public yield 
interface package protected static 








严格 模式 同样 对 下 面 的 标识 符 的 使 用 做 了 严格 限制 ， 它 们 并 不 完全 
征 保留 字 ， 但 不 能 用 做 变量 名 、 函 数 名 或 参数 名 : 








arguments eval 





ECMAScript 3 将 Java 的 所 有 关键 字 都 列 为 自己 的 保留 字 ， 尽 管 这 些 
保留 字 在 ECMAScript 5 中 放宽 了 限制 ， 但 如 果 你 希望 代码 能 在 基于 
ECMAScript 3 实现 的 解释 器 上 运行 的 话 ， 应 当 避 免 使 用 这 些 关 键 字 作为 
标识 符 : 


abstract double goto native static 


boolean enum implements package super 

byte export import private synchronized 
char extends int protected throws 

class final interface public transient 
const float long short volatile 








JavaScript 预 定义 了 很 多 全 局 变量 和 函数 ， 应 当 避 免 把 它们 的 名 字 用 
做 变量 名 和 函数 名 : 





arguments encodeURI Infinity Number RegExp 
Array encodeURIComponent isFinite € 0bject String 
Boolean Error jsNaN parseFloat SyntaxError 
Date eval JSON parseInt TypeError 
decodeURI EvalError Math RangeError undefined 
decodeURIComponent Function NalN ReferenceError URIError 


JavaScript 的 具体 实现 可 能 定义 独 有 的 全 局 变量 和 函数 ， 每 一 种 特定 
的 JavaScript 运 行 环境 《〈 客 尸 端 、 服 务 需 端 等 ) 都 有 目 己 的 一 个 全 局 属性 
列表 ， 这 一 点 是 需要 牢记 的 。 参 照 第 四 部 分 的 Window 对 象 来 了 解 客户 
端 JavaScript 中 定义 的 全 局 变量 和 函数 列表 。 


2.5 可 选 的 分 号 


和 其 他 许多 编程 语言 一 样 ，JavaScript 使 用 分 号 〈;) 将 语句 (参见 
第 5 章 ) 分 隔 开 。 这 对 增强 代码 的 可 读 性 和 整洁 性 是 非常 重要 的 : 缺少 
分 隔 符 ， 一 条 语句 的 结束 就 成 了 下 一 条 语句 的 开始 ， 反 之 亦 然 。 在 
JavaScript 中 ， 如 果 语 句 各 自 独 占 一 行 ， 通 常 可 以 省 略语 句 之 间 的 分 号 
《程序 结尾 或 右 花 括号 “}” 之 前 的 分 号 也 可 以 省 略 ) 。 许 多 JavaScript 程 
序 员 〈 包 括 本 书 中 的 示例 代码 ) 使 用 分 号 来 明确 标记 语句 的 结束 ， 即 使 
在 并 不 完全 需要 分 号 的 时 候 也 是 如 此 。 另 一 种 风格 就 是 ， 在 任何 可 以 省 
略 分 号 的 地 方 都 将 其 省 略 ， 只 有 在 不 得 不 用 的 时 候 才 使 用 分 号 。 不 管 采 
用 哪 种 编程 风格 ， 关 于 JavaScript 中 可 选 分 写 的 问题 有 儿 个 细 届 需要 注 


局 O 




















本 下 代码 ， 因 为 两 条 语句 用 两 行书 号， 第 一 个 分 号 是 可 以 省 略 





Th 
Ow 





如 末 按 照 如 下 格式 书写 ， 第 一 个 分 写 则 不 能 省 略 挥 : 





a=3;b=4; 








需要 注意 的 是 ，JavaScript 并 不 是 在 所 有 换行 处 都 填补 分 号 : 只 有 在 
缺少 了 分 号 就 无 法 正确 解析 代码 的 时 候 ，JavaScript 才 会 填补 分 号 。 换 名 
话 讲 (类 似 下 面 代码 中 的 两 处 异常 ，， 如 果 当 前 语句 和 随后 的 非 空 格 字 
符 不 能 当成 一 个 整体 来 解析 的 话 ，JavaScript 就 在 当前 语句 行 结 束 处 填补 
分 号。 看 一 下 如 下 代码 : 














console.1og(al) 





JavaScript 将 其 解析 为 : 





var a;a=3;console.10g(a); 





JavaScript 给 第 一 行 换 行 处 添加 了 分 号 ， 因 为 如 果 没 有 分 号 ， 
JavaScript 就 无 法 解析 代码 var a a。 第 二 个 a 可 以 单独 当做 一 条 语句 "a;"， 
但 JavaScript 并 没有 给 第 二 行 结尾 填补 分 号 ， 因 为 它 可 以 和 第 三 行内 容 一 
起 解析 成 “a=3;”。 


这 些 语句 的 分 隔 规则 会 导致 一 些 划 想不到 的 情形 ， 这 段 代 码 写 成 了 
两 行 ， 看 起 来 是 两 条 独立 的 语句 : 








Var y=x+f 
(a+b).tostring() 





但 第 二 行 的 圆 括 写 却 和 第 一 行 的 f 组 成 了 一 个 函数 调用 ，JavaScript 
会 把 这 段 代 码 看 做 : 





Var y=x+f(a+b).tostring(); 





而 这 段 代 码 的 本 意 并 不 是 这 样 。 为 了 能 让 上 述 代 码 解析 为 两 条 不 同 
的 语句 ， 必 须 手 动 填写 行 尾 的 显 式 分 号 。 


通常 来 讲 ， 如 果 一 条 语句 以 “(”、“[”、“A、“+” 或 “-” 开 始 ， 那 么 它 
极 有 可 能 和 前 一 条 语句 合 在 一 起 解析 。 以 %”、“+” 和 “-” 开 始 的 语句 并 不 
贡 见 ， 而 以 “2 和 “开始 的 语句 则 非常 第 见 ， 至 少 在 一 些 JavaScript 编 码 
风格 中 是 很 普遍 的 。 有 些 程序 员 喜 欢 保 守 地 在 语句 前 加 上 一 个 分 号 ， 这 
| 分 号 被 误 删 除了 ， 当 前 语句 还 是 会 正确 地 
孚 析 : 















































var x=0// 这 里 省 略 了 分 号 
; [x, x+1, x+2] .forEach(console.10g)// 前 面 的 分 号 保证 了 正确 地 语句 解析 
































如 果 当 前 语句 和 下 一 行 语句 无 法 合并 解析 ，JavaScript 则 在 第 一 行 后 
填补 分 号 ， 这 是 通用 规则 ， 但 有 两 个 例外 。 第 一 个 例外 是 在 涉及 
returmn、break 和 continue 语 句 〈 人 参见 第 5 章 ) 的 场景 中 。 如 果 这 三 个 关键 
字 后 紧 跟 着 换行 ，JavaScript 则 会 在 换行 处 填补 分 号 。 例 如 ， 这 段 代 码 : 











return 
true; 





JavaScript 会 解析 成 : 





return;true; 





而 代码 的 本 意 是 这 样 : 





return true; 





也 就 是 说 ， 在 returm、break 和 continue 和 随后 的 表达 式 之 间 不 能 有 换 





行 。 如 果 添 加 了 换行 ， 程 序 则 只 有 在 极 特殊 的 情况 下 才 会 报错 ， 而 且 程 
序 的 调试 非常 不 方便 。 


第 二 个 例外 是 在 涉及 “++” 和 “一 一 ”运算 符 ( 见 4.8 节 ) 的 时 候 。 这 些 
运算 符 可 以 作为 表达 式 的 前 级 ， 也 可 以 当做 表达 式 的 后 级 。 如 果 将 其 用 
做 后 绥 表 达 式 ， 它 和 表达 式 应 当 在 同一 行 。 否 则 ， 行 尾 将 填补 分 号 ， 同 
时 “++2? 或 “一 一 ”将 会 作为 下 一 行 代 码 的 前 绥 操 作 符 并 与 之 一 起 解析 ， 例 
如 ， 这 段 代 码 : 

















这 段 代 码 将 解析 为 "x;++y"， 而 不 是 "x++;y"。 


呈 ] 严 格 讲 XHTML 是 区 分 大 小 写 的 ， 但 由 于 浏览 器 有 着 非常 较 强 大 的 纠 
普 能 力 ， 即 使 文档 中 包含 很 多 不 严格 的 大 小 号， 浏览 器 还 是 比较 “ 宽 
容 ” 地 正确 解析 演 染 。 

21 请 参照 http://en.wikipedia.org/wiki/Token.。 

[3]Unicode 对 其 所 有 字符 做 了 分 类 ， 这 种 分 类 使 用 “通用 类 别 值 ”表示 ， 

这 里 的 "Zs" 既 是 其 中 一 种 类 别 值 ， 特 指 疫 有 标志 符号 但 不 属于 控制 或 格 
式 字 符 的 空格 字符 。 更 多 类 别 值 的 描述 请 参见 
http://www.unicode.org/reports/tr44/ 中 关于 General _ Category Values 的 内 
[cf 是 Unicode 中 的 一 种 “通用 类 别 值 ”， 指 代 那 些 影响 文本 布局 或 文本 
处 理 操 作 但 通常 不 会 呈现 的 格式 字符 。 

[51“ 从 右 至 左 书写 标记 ”(RIGHT-TO-LEFT MARK)〉 和 “从 左 至 右 书写 标 
记 ”(LEFT-TO-RIGHT MARK) 均 属 于 双 同 字符 集 语言 ， 字 符 是 带 有 方 
同 的 ， 比 如 在 阿拉 伯 语 言 中 ， 标 点 位 于 单词 的 左 侧 ， 而 不 是 我 们 通常 熟 
悉 的 右 侧 。 

[6]ZERO WIDTH(NON-)JOINER， 零 宽 ( 非 ) 连 接 符 ， 指 没有 宽度 的 不 可 
见 连接 符 ， 在 蒙 文 、 满 文 、 锡 伯 文 等 少数 民族 语言 中 会 使 用 到 。 
[ZJUnicode 对 其 所 有 字符 做 了 分 类 ， 这 种 分 类 使 用 “通用 类 别 值 ? 表 示 ， 

这 里 的 "Mn"、"Mc" 和 "Pc" 就 是 其 中 三 种 类 别 值 ，Mn 表 示 基 字符 的 修改 
中 出 现 的 非 间距 字符 ，Mc 表 示 基 字符 的 修改 中 影响 了 基 字 符 标 志 位 的 
宽度 的 间距 字符 ，Pc 指 连接 两 个 字符 的 连接 符 或 标点 符号 。 更 多 类 别 值 
的 描述 请 参见 http://www.unicode.org/reports/tr44/ 中 关于 General Category 
Values 的 内 容 。 
































第 3 重 ” 关 型 、 值 和 变量 


计算 机 程序 的 运行 需要 对 值 (value) (比如 数字 3.14 或 文本 "hello 
world") 进行 操作 。 在 编程 语言 中 ， 能 够 表示 并 操作 的 值 的 类 型 称 做 数 
据 类 型 (type) ， 编 程 语言 最 基本 的 特性 就 是 能 够 文 持 多 种 数据 类 型 。 
当 程 序 需要 将 值 保存 起 来 以 备 将 来 使 用 时 ， 便 将 其 赋值 给 (将 值 “ 保 
存 ” 到 ) 一 个 变量 〈variable) 。 变 量 是 一 个 值 的 符号 名 称 ， 可 以 通过 名 
称 来 获得 对 值 的 引用 。 变 量 的 工作 机 制 是 编程 语言 的 另 一 个 基本 特性 。 
本 章 将 详细 讲解 JavaScript 中 的 类 型 、 值 和 变量 。 这 里 的 引言 只 做 概述 ， 
E00 后 续 章 节 会 更 深入 地 讲 


JavaScript 的 数据 类 型 分 为 两 类 : 原始 类 型 (primitive type) 和 对 象 
类 型 (object type) 。JavaScript 中 的 原始 类 型 包括 数字 、 字 符 串 和 布尔 
值 ， 本 章 会 有 单独 的 章节 专门 讲述 JavaScript 中 的 数字 ( 见 3.1 节 ) 和 字符 串 
( 见 3.2 节 )， 布 尔 值 将 会 在 3.3 节 讲解 。 


JavaScript 中 有 两 个 特殊 的 原始 值 : nul〈 空 》 和 undefined (未 定 
义 )， 它 们 不 是 数字 、 字 符 串 和 布尔 值 。 它 们 通常 分 别 代表 了 各 自 特 殊 
类 型 的 唯一 的 成 员 。3.4 节 将 会 详细 讲解 null 和 undefined。 


JavaScript 中 除了 数字 、 字 符 串 、 布 尔 值 、null 和 undefined 之 外 的 就 
是 对 象 了 。 对 象 Cobject) 是 属性 (property) 的 集合 ， 每 个 属性 都 
由 “名 / 值 对 ”( 值 可 以 是 原始 值 ， 比 如 数字 、 字 符 串 ， 也 可 以 是 对 象 ) 构 
成 。 其 中 有 一 个 比较 特殊 的 对 象 一 一 全 局 对 象 〈global object) 一 一 会 在 
3.5 节 介绍 ， 第 6 章 会 有 更 完整 详细 的 描述 。 


普通 的 JavaScript 对 象 是 “命名 值 ” 的 无 序 集合 。JavaScript 同 样 定 义 
了 一 种 特殊 对 象 一 一 数组 (array) ， 表 示 带 编号 的 值 的 有 序 集合 。 
JavaScript 为 数组 定义 了 专用 的 语法 ， 使 数组 拥有 一 些 和 普通 对 象 不 同 的 
特有 行为 特性 。 第 7 章 将 专门 讲述 数组 。 


JavaScript 还 定义 了 男 一 种 特殊 对 象 疯 数 。 疯 数 是 具有 与 它 相 关 
联 的 可 执行 代码 的 对 象 ， 通 过 调用 函数 来 运行 可 执行 代码 ， 并 返回 运算 
结果 。 和 数组 一 样 ， 函 数 的 行为 特征 和 其 他 对 象 都 不 一 样 。JavaScript 为 
使 用 函数 定义 了 专用 语法 。 对 于 JavaScript 函 数 来 讲 ， 最 重要 的 是 ， 它 们 
都 是 真 值 ， 并 且 JavaScript 可 以 将 它们 当做 普通 对 象 来 对 待 。 第 8 章 会 专 






































门 讲述 函数 。 


如 果 函 数 用 来 初始 化 《使 用 new 运 算 符 ) 一 个 新 建 的 对 象 ， 我 们 称 
之 为 构造 图 数 〈constructor) 。 每 个 构造 函数 定义 了 一 类 《class) 对 象 
一 一 由 构造 函数 初始 化 的 对 象 组 成 的 集合 。 类 可 以 看 做 是 对 象 类 型 的 子 
类 型 。 除 了 数组 〈Aray) 类 和 函数 〈Function) 类 之 外 ，JavaScript 语 言 
核心 定义 了 其 他 三 种 有 用 的 类 。 日 期 (Date) 类 定义 了 代表 日 期 的 对 
象 。 正 则 〈RegExp) 类 定义 了 表示 正则 表达 式 〈 一 种 强大 的 模式 匹配 
工具 ， 在 第 10 章 会 讲 到 ) 的 对 象 。 错 误 (Error〉 类 定义 了 那些 表示 
JavaScript 程 序 中 运行 时 错误 和 语法 错误 的 对 象 。 可 以 通过 定义 自己 的 构 
造 函 数 来 定义 需要 的 类 。 这 会 在 第 9 章 讲 述 。 


JavaScript 解 释 占 有 上 自己 的 内 存 管理 机 制 ， 可 以 自动 对 内 存 进 行 垃圾 
回收 (garbage collection ) 。 这 意味 着 程序 可 以 按 需 创建 对 象 ， 程 序 员 
则 不 必 担 心 这 些 对 象 的 销毁 和 内 存 回 收 。 当 不 再 有 任何 引用 指 同一 个 对 
2 解释 器 就 会 知道 这 个 对 象 没 用 了 ， 然 后 自动 回收 它 所 占用 的 内 存 资 
源 。 


JavaScript 是 一 种 面向 对 象 的 语言 。 不 严格 地 讲 ， 这 意味 着 我 们 不 用 
全 局 的 定义 函数 去 操作 不 同类 型 的 值 ， 数 据 类 型 本 身 可 以 定义 方法 
(method)〉 来 使 用 值 。 例 如 ， 要 对 数组 a 中 的 元 素 进行 排序 ， 不 必要 将 a 
传 入 sort() 函 数 ， 而 是 调用 a 的 一 个 方法 sortO): 


























a.sort();//sort(a) 的 面向 对 象 的 版 本 

















第 9 章 将 会 讲述 方法 的 定义 。 从 技术 上 讲 ， 只 有 JavaScript 对 象 才能 
拥有 方法 。 然 而 ， 数 字 、 字 符 串 和 布尔 值 也 可 以 拥有 自己 的 方法 (3.6 
节 解 释 其 工作 机 制 ) 。 在 JavaScript 中 ， 只 有 null 和 undefined 是 无 法 拥有 
方法 的 值 。 


JavaScript 的 类 型 可 以 分 为 原始 类 型 和 对 象 类 型 ， 也 可 分 为 可 以 拥有 
方法 的 类 型 和 不 能 拥有 方法 的 类 型 ， 同 样 可 分 为 可 变 (mutable) 类 型 
和 不 可 变 (immutable〉 类 型 。 可 变 类 型 的 值 是 可 修改 的 。 对 象 和 数组 
属于 可 变 类 型 ，JavaScript 程 序 可 以 更 改 对 象 属性 值 和 数组 元 素 的 值 。 数 
字 、 布 尔 值 、null 和 undefined 属 于 不 可 变 类 型 比如 ， 修 改 一 个 数值 
的 内 容 本 里 就 说 不 通 。 字 符 串 可 以 看 成 由 字符 组 成 的 数组 ， 你 可 能 会 认 
为 它 是 可 变 的 。 然 而 在 JavaScript 中 ， 字 符 串 是 不 可 变 的 : 可 以 访问 字符 





串 任意 位 置 的 文本 ， 但 JavaScript 并 未 提供 修改 已 知 字 符 串 的 文本 内 容 的 
方法 。3.7 节 会 详细 讲解 可 变 类 型 和 不 可 变 类 型 的 不 同 之 处 。 


JavaScript 可 以 自由 地 进行 数据 类 型 转换 。 比 如 ， 如 果 在 程序 期 望 使 
用 字符 串 的 地 方 使 用 了 数字 ，JavaScript 会 自动 将 数字 转换 为 字符 串 。 如 
果 在 期 望 使 用 布尔 值 的 地 方 使 用 了 非 布尔 值 ，JavaScript 也 会 进行 相应 的 
转换 。 类 型 转换 规则 将 在 3.8 节 讲述 。JavaScript 中 灵活 的 类 型 转换 规则 


型 转换 细节 将 在 3.8.1 节 详细 描述 。 


JavaScript 变 量 是 无 类 型 的 (untyped)， 变 量 可 以 被 赋予 任何 类 型 的 
值 ， 同 样 一 个 变量 也 可 以 重新 赋予 不 同类 型 的 值 。 使 用 var 关 键 字 来 声 
明 〈declare) 变量 。JavaScript 采 用 词法 作用 域 (lexical scoping ) 。 不 在 
任何 函数 内 声明 的 变量 称 做 全 局 变量 (global variable) ， 它 在 JavaScript 
程序 中 的 任何 地 方 都 是 可 见 的 。 在 函数 内 声明 的 变量 具有 函数 作用 域 
(function scope) ， 并 且 只 在 函数 内 可 见 。 变 量 声明 和 作用 域 将 会 在 3.9 
节 和 3.10 节 详细 讲解 。 


3 这 这 


和 其 他 编程 语言 出 不 同 ，JavaScript 不 区 分 整数 值 和 浮 点 数值 。 
JavaScript 中 的 所 有 数字 均 用 浮 点 数值 表示 。JavaScript 采 用 IEEE ”754 标 
准 包 定义 的 64 位 浮 点 格式 表示 数字 ， 这 意味 着 它 能 表示 的 最 大 值 是 
+1.7976931348623157x10308， 最 小 值 是 +5x10-324。 


按照 JavaScript 中 的 数字 格式 ， 能 够 表示 的 整数 范围 是 从 -9 007 199 
254 740 992 一 9 007 199 254 740 992( 即 -2253 一 2253)， 包 含 边 界 值 。 如 果 使 
用 了 超过 此 范围 的 整数 ， 则 无 法 保证 低位 数字 的 精度 。 然 而 需要 注意 的 
是 ，JavaScript 中 实际 的 操作 《比如 数组 索引 ， 以 及 第 4 章 讲 到 的 位 操作 
符 ) 则 是 基于 32 位 整数 。 


当 一 个 数字 直接 出 现在 JavaScript 程 序 中 ， 我 们 称 之 为 数字 直接 量 
(numeric literal) 。JavaScript 文 持 多 种 格式 的 数字 直接 量 ， 在 接 下 来 的 
小 节 中 会 有 讨论 。 注 意 ， 在 任何 数字 直接 量 前 添加 负 号 〈-) 可 以 得 到 
它们 的 负 值 。 但 负 号 是 一 元 求 反 运算 符 《〈 人 参见 第 4 章 ) ， 并 不 是 数字 直 
接 量 语法 的 组 成 部 分 。 



































3.1.1 整 型 直接 量 
在 JavaScript 程 序 中 ， 用 一 个 数字 序列 表示 一 个 十 进 制 整数 。 例 如 : 








0 


3 
10000000 


除了 十 进 制 的 整 型 直接 量 ，JavaScript 同 样 能 识别 十 六 进 制 ( 以 16 为 
基数 ) 值 。 所 谓 十 六 进 制 的 直接 量 是 指 以 "0x" 或 "0X" 为 前 级 ， 其 后 跟随 
十 六 进 制 数 串 的 直接 量 。 十 六 进 制 值 是 0 一 9 之 间 的 数字 和 a (A) 一 
f CEF) 之 间 的 字母 构成 ，a 一 { 的 字母 对 应 的 表示 数字 10 一 15。 下 面 是 十 
六 进 制 整 型 直接 量 的 例子 : 




















Oxff//15*16+15=255( 十 进 制 ) 
OxCAFE911 


尽管 ECMAScript 标 准 不 文 持 八 进 制 直接 量 ， 但 JavaScript 的 某 些 实 
现 可 以 允许 采用 八进制 〈 基 数 为 8) 形式 表示 整数 。 八 进 制 直接 量 以 数 
人 其 后 跟随 一 个 由 0 一 7《〈 包 括 0 和 7) 之 间 的 数字 组 成 的 序列 ， 
列 如 : 











0377//3*64+7*8+7=255( 十 进 币 





Ss 
— 





由 于 某 些 JavaScript 的 实现 支持 八进制 直接 量 ， 而 有 些 不 支持 ， 因 此 
最 好 不 要 使 用 以 0 为 前 级 的 整 型 直接 量 ， 毕 竞 我 们 也 无 法 得 知 当前 
JavaScript 的 实现 是 否 文 持 八进制 的 解析 。 在 ECMAScript 6《〈 见 5.7.3 节 ) 
的 严格 模式 下 ， 八 进 制 直接 量 是 明令 禁止 的 。 


3.1.2 ” 浮 点 型 直接 量 


浮 点 型 直接 量 可 以 含有 小 数 点 ， 它 们 采用 的 是 传统 的 实数 写法 。 一 
个 实数 由 整数 部 分 、 小 数 点 和 小 数 部 分 组 成 。 


此 外 ， 还 可 以 使 用 指数 记 数 法 表示 浮 点 型 和 直接 量 ， 即 在 实数 后 跟 字 
母 e 或 E， 后 面 再 跟 正 负 号 ， 其 后 再 加 一 个 整 型 的 指数 。 这 种 记 数 方法 表 
示 的 数值 ， 是 由 前 面 的 实数 乘 以 10 的 指数 次 蛙 。 





可 以 使 用 更 简洁 的 语法 表示 : 





[digits][.digits][(Ele)[(+|-)]digits] 





例如 : 





3.14 
2345.789 
.333333333333333333 


6.02e23//6.02x1023 
1.4738223E-32//1.4738223x10-32 








3.1.3 ”JavaScript 中 的 算术 运算 


JavaScript 程 序 是 使 用 语言 本 号 提供 的 算术 运算 符 来 进行 数字 运算 
a 去 算 符 (+) 、 减 法 运算 符 (-) 、 乘 法 运算 符 
、 除 法 运算 符 〈/) 和 求 余 ( 求 整除 后 的 余数 ) 运算 符 (%) 。 第 4 
剖 将 主 细 从 绍 这 些 以 及 更 多 的 运算 符 。 


除了 基本 的 运算 符 外 ， JavaScript 还 文 持 更 加 复杂 的 算术 运算 ， 这 些 
复杂 运算 通过 作为 Math 对 象 的 属性 定义 的 函数 和 常量 来 实现 : 








Math.pow(2,53)//=>9007199254740992:2 的 53 次 震 
Math.round(.6)//=>1.0: 四 售 五 入 

Math ,ceil(.6)//=>1.0: 向 上 求 整 
Math,floor(.6)//=>0.9: 向 下 求 整 

Math .abs(-5)//=>>5: 求 绝对 值 
Math ,max(x,y,Zz)// 返 回 最 大 值 
Math .min(x,y,Zz)// 返 回 最 小 值 
Math ,random( )// 生 成 一 个 大 于 等 于 0 小 于 1.09 的 伪 随 机 数 
Math .PI//T: 圆 周 率 

Math.,E//e: 自 然 对 数 的 底数 

Math .sqrt(3)//3 的 平方 根 

Math .pow(3,1/3)//3 的 立方 根 

Math.sin(0)// 三 角 函 数 :还 有 Math.cos,Math.atan 等 
Math .10g(10)//10 的 自然 对 数 
Math.1log(100)/Math .LN10// 以 10 为 底 109 的 对 数 
Math ,10g(512)/Math .LN2// 以 2 为 底 512 的 对 数 

Math .exp(3)//e 的 三 次 窜 





















































参阅 第 三 部 分 中 关于 Math 对 象 的 介绍 ， 那 里 列 出 了 JavaScript 所 文 
持 的 所 有 数学 函数 。 





JavaScript 中 的 算术 运算 在 溢出 〈overflow) 、 下 淤 (underflow) 或 
被 零 整 除 时 不 会 报错 。 当 数字 运算 结果 超过 了 JavaScript 所 能 表示 的 数字 
上 限 ( 淤 出 )， 结 果 为 一 个 特殊 的 无 穷 大 (infinity) 值 ， 在 JavaScript 中 
以 Infinity 表 示 。 同 样 地 ， 当 负数 的 值 超过 了 JavaScript 所 能 表示 的 负数 范 
围 ， 结 果 为 负 无 穷 大 ， 在 JavaScript 中 以 -Infinity 表 示 。 无 穷 大 值 的 行为 
特性 和 我 们 所 期 望 的 是 一 致 的 : 基于 它们 的 加 、 减 、 乘 和 除 运 算 结果 还 
是 无 穷 大 值 〈 当 然 还 保留 它们 的 正 负 号 )。 


下 洲 (underflow) 是 当 运 算 结果 无 限 接 近 于 零 并 比 JavaScript 能 
示 的 最 小 值 还 小 的 时 候 发 生 的 一 种 情形 。 这 种 情况 下 ，JavaScript 将 会 返 
回 0。 当 一 个 负数 发 生 下 滋 时 ，JavaScript 返 回 一 个 特殊 的 值 “ 负 零 ”>。 这 
个 值 ( 负 零 ) 几乎 和 正常 的 零 完全 一 样 ，JavaScript 程 序 员 很 少 用 到 负 


罕 。 


被 零 整除 在 JavaScript 并 不 报错 : 它 只 是 简单 的 返回 无 穷 大 
CImfinity) 或 负 无 穷 大 〈(-Infinity) 。 但 有 一 个 例外 ， 零 除 以 零 是 没有 
意义 的 ， 这 种 整除 运算 结果 也 是 一 个 非 数字 (not-a-number) 值 ， 用 
NaN 表 示 。 无 穷 大 除 以 无 穷 大 、 给 任意 负数 作 开 方 运算 或 者 算术 运算 符 
与 不 是 数字 或 无 法 转换 为 数字 的 操作 数 一 起 使 用 时 都 将 返回 NaN。 


JavaScript 预 定义 了 全 局 变量 Infinity 和 NaN， 用 来 表示 正 无 穷 大 和 非 
数字 值 。 在 ECMAScript 3 中 ， 这 两 个 值 是 可 读 / 写 的 ， 并 可 修改 。 
ECMAScript 5 修正 了 这 个 错误 ， 将 它们 定义 为 只 读 的 。 在 ECMAScript 3 
中 Number 对 象 定义 的 属性 值 也 是 只 读 的 。 这 里 有 一 些 例 子 : 











Infinity// 将 一 个 可 读 / 写 的 变量 初始 化 为 nfinity 
Number ,POSITIVE_INFINITY// 同 样 的 值 ， 只 读 
1/0// 这 也 是 同样 的 值 

Number . MAX_VALUE+1// 计 算 结果 还 是 Infinity 

Number , NEGATIVE_INFINITY// 该 表达 式 表 示 了 人 负 无 穷 大 
-InNfinity 

-1/0 

-Number .MAX_VALUE-1 

NaN// 将 一 个 可 读 / 写 的 变量 初始 化 为 NaN 
Number . NaN// 同 样 的 值 ， 但 是 只 读 

0/0// 计 算 结果 是 NaN 
Number ,MIN_VALUE/2// 发 生 下 游 : 计算 结果 为 9 
-Number .MIN_VALUE/2// 负 零 
-1/Infinity// 同 样 是 负 零 
-0 















































JavaScript 中 的 非 数字 值 有 一 点 特殊 : 它 和 任何 值 都 不 相等 ， 包 括 目 





身 。 也 就 是 说 ， 没 办 法 通过 x==NaN 来 判断 变量 x 是 否 是 NaN。 相 反 ， 应 
当 使 用 x!=x 来 判断 ， 当 且 仅 当 x 为 NaN 的 时 候 ， 表 达 式 的 结果 才 为 true。 
函数 isNaNO 的 作用 与 此 类 似 ， 如 果 参 数 是 NaN 或 者 是 一 个 非 数 字 值 〈 比 
如 字符 串 和 对 象 )， 则 返回 trtue。JavaScript 中 有 一 个 类 似 的 函数 
isFinite()， 在 参数 不 是 NaN、Infinity 或 -Infinity 的 时 候 返 回 true。 


人 负 零 值 同样 有 些 特殊 ， 它 和 正 零 值 是 相等 的 (甚至 使 用 JavaScript 的 
i 这 意味 着 这 两 个 值 几乎 一 模 一 样 ， 除 了 作为 除 
数 之 外 : 








var Zzero=0;// 正 常 的 零 值 

var negz=-0;// 负 零 值 

zero===negz//= 之 true: 正 零 值 和 负 零 值 相等 
1/zero===1/negz//=>>false: 正 无 穷 大 和 负 无 穷 大 不 等 

















3.1.4 二进制 浮 点 数 和 四 舍 五 入 错误 


实数 有 无 数 个 ， 但 JavaScript 通 过 浮 点 数 的 形式 只 能 表示 其 中 有 限 的 
个 数 〈 确 切 地 说 是 18 437 736 874 454 810 627 个 ) 。 也 就 是 说 ， 当 在 
JavaScript 中 使 用 实数 的 时 候 ， 常 常 只 是 真实 值 的 一 个 近似 表示 。 


J 了 IEEE-754 浮 点 数 表 示 法 (几乎 所 有 现代 编程 语言 所 
采用 ) ， 这 是 一 种 二 进 制 表示 法 ， 可 以 精确 地 表示 分 数 ， 比 如 1/2、1/8 
和 1/1024。 遗 憾 的 是 ， 我 们 常用 的 分 数 ( 特 别 是 在 金融 计算 方面 都 是 
十 进 制 分 数 110、1/100 等 。 二 进 制 浮 点 数 表示 法 并 不 能 精确 表示 类 似 
0.1 这 样 简 单 的 数字 。 


JavaScript 中 的 数字 具有 足够 的 精度 ， 并 可 以 极其 近似 于 0.1。 但 事 
实 是 ， 数 字 不 能 精确 表述 的 确 带 来 了 一 些 问题 。 看 下 这 段 代 人 码 : 

















Var Xx=,3- .2;//30 美 分 减 去 20 美 分 
Var y=.2- .1;//20 美 分 减 去 10 美 分 
x==y//=>>false: 两 值 不 相等 ! 
Xx==.1//=>false: .3- .2 不 等 于 ,1 
y==.1//=>true: .2- .1 等 于 .1 























由 于 舍 入 误 产 ，0.3 和 0.2 之 则 的 近似 差 值 实际 上 并 不 等 于 0.2 和 0.1 之 
间 的 近似 差 值 站。 这 个 问题 并 不 只 在 JavaScript 中 才 会 出 现 ， 理 解 这 一 点 
非常 重要 : 在 任何 使 用 三 进 制 浮 点 数 的 编程 语言 中 都 会 有 这 个 问题 。 同 


样 需要 注意 的 是 ， 上 述 代码 中 x 和 y 的 值 非常 接近 彼此 和 最 终 的 正确 值 。 
这 种 计算 结果 可 以 胜任 大 多 数 的 计算 任务 : 这 个 问题 也 只 有 在 比较 两 个 
值 是 否 相 等 的 时 候 才 会 出 现 。 


JavaScript 的 未 来 版 本 或 许 会 支持 十 进 制 数字 类 型 以 避免 这 些 舍 入 问 
题 。 在 这 之 前 你 可 能 更 愿意 使 用 大 整数 进行 重要 的 金融 计算 ， 例 如 ， 要 
使 用 整数 “分 ?而 不 要 使 用 小 数 “ 元 ?进行 基于 货币 单位 的 运算 。 


3.1.5 日 期 和 时 间 


JavaScript 语 言 核 心包 括 Date0 构 造 函 数 ， 用 来 创建 表示 日 期 和 时 间 
的 对 象 。 这 些 日 期 对 象 的 方法 为 日 期 计算 提供 了 简单 的 API。 日 期 对 象 
不 像 数 字 那 样 是 基本 数据 类 型 。 本 节 给 出 了 使 用 日 期 对 象 的 一 个 简单 教 
程 。 在 第 三 部 分 可 以 查阅 更 多 细节 : 








var then=new Date(2011,0,1);//29011 年 1 月 1 日 
var later=new Date(2011,0,1,17,10,30);// 同 一 天 ,当地 时 间 5:10:30pm, 
var now=new Date();// 当 前 日 期 和 时 间 

var elapsed=now-then;// 日 期 减法 : 计算 时 间 间 隔 的 毫秒 数 
later .getFullYear()//=~>2011 

later .getMonth()V/=>0: 从 9 开始 计数 的 月 份 
later.getDate()//=>>1: 从 1 开始 计数 的 天 数 
later.getDay()/V/=>5: 得 到 星期 几 ，0 代 表 星 期 日 ，5 代 表 星 期 一 
Later.getHours()//=> 当 地 时 间 17:5pm 
later.getUTCHours()// 使 用 UTC 表示 小 时 的 时 间 ， 基 于 时 区 


















































































































































7 YR 


字符 串 〈string) 是 一 组 由 16 位 值 组 成 的 不 可 变 的 有 序 序列 ， 每 个 
字符 通常 来 目 于 Unicode 字 符 集 。JavaScript 通 过 字符 串 类 型 来 表示 文 
本 。 字 符 串 的 长 度 〈lengh) 是 其 所 含 16 位 值 的 个 数 。JavaScript 字 符 串 
(和 其 数组 ) 的 索引 从 零 开始 : 第 一 个 字符 的 位 置 是 0， 第 二 个 字符 的 
位 置 是 1， 以 此 类 推 。 空 字符 串 (empty string) 长 度 为 0，JavaScript 中 并 
没有 表示 单个 字符 的 "字符 型 *。 要 表示 一 个 16 位 值 ， 只 需 将 其 赋值 给 字 
符 溃 变量 即 可 ， 这 个 字符 串 长 度 为 1。 


字符 集 ， 内 码 和 JavaScript 字 符 串 











JavaScript 采 用 UTEF-16 编 码 的 Unicode 字 符 集 ，JavaScript 字 符 串 是 由 
一 组 无 符号 的 16 位 值 组 成 的 序列 。 最 常用 的 Unicode 字 符 《〈 这 些 字符 属 


于 “基本 多 语种 平面 "时 ) 都 是 通过 16 位 的 内 码 表 示 ， 并 代表 字符 串 中 的 
单个 字符 ， 那 些 不 能 表示 为 16 位 的 Unicode 字 符 则 遵循 UTF-16 编 码 规则 
一 一 用 两 个 16 位 值 组 成 的 一 个 序列 《 亦 称 做 “代理 项 对 ”) 表示。 这 意味 
着 一 个 长 度 为 2 的 JavaScript 字 符 串 (两 个 16 位 值 ) 有 可 能 表示 一 个 Unicode 


sp A 


子 付 : 











var p="n";//N 由 16 位 内 码 表示 0x03c0 

Var e="e";//e 由 17 位 内 码 表示 0x1d452 
p.length//= 之 1:p 包 含 一 个 16 位 值 
e.length//=>2:e 通 过 UTF-16 编 码 后 包含 两 个 16 位 值 : "\ud835\udc52" 





























JavaScript 定 义 的 各 式 字 符 串 操作 方法 均 作 用 于 16 位 值 ， 而 非 字 符 ， 
且 不 会 对 代理 项 对 做 单独 处 理 ， 同 样 JavaScript 不 会 对 字符 串 做 标准 化 的 
加 工 ， 甚 至 不 能 保证 字符 串 是 合法 的 UTF-16 格 式 。 


3.2,1 字符 串 直 接 量 
在 JavaScript 程 序 中 的 字符 串 直 接 量 ， 是 由 单 引 号 或 双 引 号 括 起 来 的 


字符 序列 。 由 单 引 号 定 界 的 字符 串 中 可 以 包含 双 引 号 ， 由 双 引 号 定 界 的 
字符 串 中 也 可 以 包含 单 引号 。 这 里 有 几 个 字符 串 直 接 量 的 例子 : 























""// 空 字符 串 : 它 包含 6 个 字符 
"testing ' 

1 3 14" 

'name="myform"'" 

"Wouldn't you prefer O'Reilly's book?" 

"This string\nhas two lines" 

"Tis the ratio of a circle's circumference to its diameter" 











在 ECMAScript 3 中 ， 字 符 串 直接 量 必须 写 在 一 行 中 ， 而 在 
ECMAScript ”5 中 ， 字 符 串 直接 量 可 以 拆 分 成 数 行 ， 每 行 必须 以 反射 线 
Q\) 结束 ， 反 和 斜 线 和 行 结束 符 都 不 算是 字符 串 直 接 量 的 内 容 。 如 果 希 
望 在 字符 串 直接 量 中 另 起 一 行 ， 可 以 使 用 转 义 字符 由 《后 续 会 有 介 


绍 ) : 



































"two\nlines"// 这 里 定义 了 一 个 显示 为 两 行 的 字符 串 
"one\// 用 三 行 代码 定义 了 显示 为 单行 的 字符 串 ， 只 在 ECMAScript 5 中 可 用 
long\ 
line" 















































需要 注意 的 是 ， 当 使 用 单 引 号 来 定 界 字符 串 时 ， 需 要 格外 小 心 黄 文 
中 的 缩写 和 所 有 格 写 法 ， 比 如 cant 和 O'Reillys。 因 为 撤 号 和 单 引 号 是 同 
Re 所 以 必须 使 用 反 斜 线 人 来 转 义 〈 转 义 符 将 在 下 一 章 讲解 ) 所 
oo 


在 客户 端 JavaScript 程 序 设计 中 ，JavaScript 代 码 会 夹杂 HTML 代 码 的 
字符 串 ，HTML 代 码 也 会 夹杂 JavaScript 代 码 。 和 JavaScript 一 样 ，HTML 
也 使 用 单 引 号 或 者 双 引 号 来 定 界 字 符 串 ， 因 此 ， 当 JavaScript 代 人 码 和 
HTML 代 码 混 杂 在 一 起 的 时 候 ， 最 好 在 JavaScript 和 HTML 代 码 中 各 自 使 
用 独立 的 引号 风格 。 例 如 ， 在 JavaScript 表 达 式 中 使 用 单 引 号 表示 字符 
you"， 而 在 HIML 事 件 处 理 程序 属性 中 则 使 用 双 引 号 表示 字符 





<button onclick="alert('Thank you')">Click Me</button> 





22 特 义 平生 


在 JavaScript 字 符 串 中 ， 肥 冬 线 () 有 看 特殊 的 用 途 ， 肥 和 斜 线 符 写 后 加 
一 个 字符 ， 就 不 再 表示 它们 的 字面 含义 了 ， 比 如 ，\n 就 是 一 个 转 义 字符 
(escape sequence) 淖 ， 它 表示 的 是 一 个 换行 符 。 


为 一 个 例子 是 上 节 中 提 到 的 转 义 字符 \， 表 示 蛙 引 写 〈 或 撒 写 )。 
当 需 要 在 一 个 单 引号 定 界 的 字符 串 内 使 用 撤 和 写 的 时 候 ， 它 就 显得 非 闸 有 
用 。 现 在 你 就 会 明白 我 们 为 什么 把 它们 叫做 转 义 字符 了 ， 因 为 反 斜 线 可 
以 使 我 们 避免 使 用 常规 方式 解释 单 引 写 ， 当 单 引号 不 是 用 来 标记 字符 串 


结尾 时 ， 它 只 是 一 个 撒 号 : 

















'You\'re right,it can\'t be a quote' 





表格 3-1 列 出 了 JavaScript 中 的 转 义 字符 以 及 它们 所 代表 的 含义 。 其 
中 有 两 个 是 通用 的 ， 通 过 十 六 进 制 数 表 示 Latin-1 或 Unicode 中 的 任意 字 
人 码 。 例 如 ，\xA9 表 示 版 权 符 写 ， 版 权 符 号 的 Latin-1 编 码 是 十 六 进 制 数 
A9。 同 样 ，\u 表 示 由 4 个 十 六 进 制 数 指定 的 任意 Unicode 字 符 ， 比 如 ， 
\u03c0 表 示 字 符 nt。 


表 3-1，JavaScript 转 义 字 符 


转 义 字符 。 含义 

\0 ML 字符 (\u0000) 

vb 退 格 符 (\u0008) 

\t 水 平 制 表 符 (\u0009 ) 


表 3.1，Javag9cript 转 义 字符 ( 续 ) 
转 义 字符 。 含义 


\n 换行 符 (\u000A) 

V 乖 直 制 表 香 (\u000B) 

\f 换 页 符 (\u000C ) 

\r 回 车 符 (\u000D) 

时 双 引 号 (\u0022) 

Y 搬 号 或 单 引号 (\u0027) 

\ 反 笠 线 (\u005(C) 

VXMX 由 两 位 十 六 进 制 数 XX 指 定 的 Latin-1 字 符 
\uXXXX 由 4 位 十 六 进 制 数 XXXX 指 定 的 Unicode 字 符 

如 果 “” 字 符 位 于 没有 在 表 3-1 中 列 出 的 字符 前 ， 则 急 略 (当然 ， 


JavaScript 语 言 将 来 的 版 本 可 能 定义 新 的 转 义 符 ) 。 比 如 ，“ 扩 和 “入 "等 
价 。 最 后 ， 上 文 提 到 过 ， 在 ECMAScript 5 中 ， 人 允许 在 一 个 多 行 字符 串 直 
接 量 里 的 每 行 结束 处 使 用 反 斜 线 。 





3.2.3 ”字符 串 的 使 用 


JavaScript 的 内 置 功能 之 一 就 是 字符 串 连 接 。 如 果 将 加 号 (+) 运 算 符 
用 于 数字 ， 表 示 两 数 相 加 。 但 将 它 作 用 于 字符 串 ， 则 表示 字符 串 连接 ， 
将 第 二 个 字符 串 拼 接 在 第 一 个 之 后 ， 例 如 : 





msg="Hel1lo, "+"world";// 生 成 字符 串 "Hello, world" 
greeting="Welcome to my blog,"+""+nName; 





要 确定 一 个 字符 串 的 长 度 一 一 其 所 包含 的 16 位 值 的 个 数 
用 字符 串 的 length 属 性 。 比 如 ， 要 得 到 字符 串 s 的 长 度 : 


可 以 使 











s.length 





除了 length 属 性 ， 字 符 串 还 提供 许多 可 以 调用 的 方法 (可 以 在 第 三 
部 分 碍 到 详细 信息 ) : 





var s="hello,world"// 定 义 一 个 字符 串 
s,.charAt(9)//=>>"h" :第 一 个 字符 
s.charAt(s.length-1)//=>"d" :最 后 一 个 字符 
s.substring(1,4)//=>"ell" :第 2 一 4 个 字符 
Ss.Slice(1,4)//=>"el1" :同上 
s.slice(-3)//=>>"rld": 最 后 三 个 字符 
s.indexof("1")VVX=>2: 字 符 1 首 次 出 现 的 位 置 
Ss 

S 

S 

S 

S 



































.LastIndexof("1")/V/=>10: 字 符 1 最 后 一 次 出 现 的 位 置 
.indexof("1",3)V/=>3: 在 位 置 3 及 之 后 首次 出 现 字符 1 的 位 置 
.SplLit(",")VX=>["hel1o","wor1d"] 分 割 成 子 串 
:replace("h","H")V/=>"Hello,wor1d" :全 文字 符 蔡 换 
.toUpperCase( )//=>"HELLO, WORLD" 







































































记 住 ， 在 JavaScript 中 字符 串 是 固定 不 变 的 ， 类 似 replace0 和 
toUpperCase() 的 方法 都 返回 新 字符 串 ， 原 字符 串 本 映 并 没有 发 生 改变 。 


在 ECMAScript 5 中 ， 字 符 串 可 以 当做 只 读数 组 ， 除 了 使 用 charAt() 
方法 ， 也 可 以 使 用 方 括号 来 访问 字符 串 中 的 单个 字符 (16 位 值 〉: 








s="hello,world"; 
s[0]//=>"h" 
s[s.length-1]//=>>"d" 








基于 Mozilla 的 Web 浏 览 器 (比如 Firefox) 很 久之 前 就 支持 这 种 方式 
的 字符 串 索 引 ， 多 数 现代 浏览 器 (IE 除外 ) 也 紧 跟 Mozilla 的 脚步 ， 在 
ECMAScript 5 成 型 之 前 就 支持 了 这 一 特性 。 


3.2.4 ”模式 匹配 


JavaScript 定 义 了 RegExp0O 构 造 函 数 ， 用 来 创建 表示 文本 匹配 模式 的 
对 象 。 这 些 模式 称 为 “正则 表达 式 ”(regular expression) ，JavaScript 采 
用 Perl 中 的 正则 表达 式 语法 。String 和 RegExp 对 象 均 定义 了 利用 正则 表 
达 式 进行 模式 匹配 和 查找 与 蔡 换 的 函数 。 


RegExp 并 不 是 JavaScript 的 基本 类 型 。 和 Date 一 样 ， 它 只 是 一 种 具 
有 实用 API 的 特殊 对 象 。 正则 表达 式 的 语法 很 复杂 ，API 也 很 丰富 。 在 
人 绍 。RgeExp 是 一 种 强大 和 常用 的 文本 处 理工 

具 ; 本 节 具 是 一 个 概述 


尽管 RegExp 并 不 是 语言 中 的 基本 数据 类 型 ， 但 是 它们 依然 具有 直 
接 量 写法 ， 可 以 直接 在 JavaScript 程 序 中 使 用 。 在 两 条 和 斜 线 之 间 的 文本 构 
成 了 一 个 正则 表达 式 直 接 量 。 第 二 条 和 斜 线 之 后 也 可 以 跟随 一 个 或 多 个 字 
母 ， 用 来 修饰 匹配 模式 的 含义 ， 例 如 : 

















/AHTMLVVV 匹 配 以 HTML 开 始 的 字符 串 
/[1-9][90-9]*/// 匹 配 一 个 非 零 数字 ， 后 面 是 任意 个 数字 
A/\bjavascript\b/i// 匹 配 单 词 "javascript"， 和 忽略 大 小 写 












































RegExp 对 象 定义 了 很 多 有 用 的 方法 ， 字 答 串 同样 具有 可 以 接收 
RegExp 参 数 的 方法 ， 例 如 : 





var text="testing:1,2,3";// 文 本 示例 
var pattern=/\d+/g// 匹 配 所 有 包含 一 个 或 多 个 数字 的 实例 
pattern.test(text)//=>true: 匹 配 成 功 

en 























text.match(pattern)//=>["1" v9] es. 
text.replace(pattern, "#" 下 >， testing: #,# 
text, split(/\D+/);//=>["' 2 ke 9 用 间 笋 字 字 符 截取 字 符 串 


3.3 布尔 值 
布尔 值 指 代 真 或 假 、 开 或 关 、 是 或 否 。 这 个 类 型 只 有 两 个 值 ， 保 留 























字 true 和 false。 
JavaScript 程 序 中 的 比较 语句 的 结果 通常 都 是 布尔 值 ， 例 如 : 


a==4 


这 段 代码 用 来 检测 变量 a 的 值 是 否 等 于 4。 如 果 等 于 ， 比 较 结果 的 布 
和 尔 值 就 是 true; 如 果 不 等 ， 比 较 结 果 则 为 false。 


布尔 值 通常 用 于 JavaScript 中 的 控制 结构 中 。 例 如 ，JavaScript 中 的 
if/else 语 句 ， 如 果 布 尔 值 为 true 执 行 第 一 段 逻 辑 ， 如 果 为 false 执 行 男 一 段 
逻辑 。 通 各 将 一 个 创建 布尔 值 的 比较 直接 与 使 用 这 个 比较 的 语句 结合 在 
一 起 ， 结 果 如 下 所 示 : 





if(a==4) 
b=b+1; 
else 
a=a+1; 





这 段 代 码 检测 变量 a 是 否 等 于 4。 如 果 等 于 ， 则 b 加 1; 否则 ，a 加 1。 
我 们 同样 会 在 3.8 节 讨论 到 ， 任 意 JavaScript 的 值 都 可 以 转换 为 布尔 值 。 
下 面 这 些 值 会 被 转换 成 false: 


Undefined 
nu 








所 有 其 他 值 ， 包 括 所 有 对 象 〈 数 组 ) 都 会 转换 成 true。false 和 上 面 6 
个 可 以 转换 成 false 的 值 有 时 称 做 “ 假 值 ”(falsy value)， 其 他 值 称 做 “ 真 
值 ”(truthy value)。JavaScript 期 望 使 用 一 个 布尔 值 的 时 候 ， 假 值 会 被 当成 
false， 真 值 会 被 当成 true。 


来 看 一 个 例子 ， 假 设 变量 o 是 一 个 对 象 或 是 null， 可 以 通过 一 条 计 语 
句 来 显 式 地 检测 o 是 否 是 非 null 值 : 





If(o!==nul1).，,， 


不 等 操作 符 “!==” 将 o 和 null 比 较 ， 并 得 出 结果 为 true 或 false。 可 以 先 
忽略 这 里 的 比较 语句 ，null 是 一 个 假 值 ， 对 象 是 一 个 真 值 : 


if(0)... 


对 于 第 一 种 情况 ， 只 有 当 o 不 是 null 时 才 会 执行 证 后 的 代码 ， 第 二 种 
情况 的 限制 没 那么 严格 : 只 有 o 不 是 false 或 任何 假 值 《比如 nujll 或 
undefined〉 时 它 才 会 执行 这 个 让。 到 底 选 用 哪 条 语句 取决 于 期 望 赋 给 o 的 
值 是 什么 。 如 果 需 要 将 null 与 0 或 "区 分 开 来 ， 则 需要 使 用 一 个 显 式 的 比 


较 。 





布尔 值 包含 toString0 方 法 ， 因 此 可 以 使 用 这 个 方法 将 字符 串 转 换 
为 "true" 或 "false"， 但 它 并 不 包含 其 他 有 用 的 方法 。 除 了 这 个 不 重要 的 
API， 还 有 三 个 重要 的 布尔 运算 符 。 


“& & ”运算 符 执行 了 逻辑 与 AND) 操作 。 当 且 仅 当 两 个 操作 数 都 
是 真 值 时 它 才 返回 true; 否则 返回 false。 “运算 符 是 布尔 或 〈OR) 操 
作 ， 如 果 两 个 操作 数 其 中 之 一 为 真 值 它 就 返回 true， 如 果 两 个 操作 数 都 
古 假 值 则 返回 false。 最 后 ， 一 元 操作 符 “!” 执 行 了 布尔 非 (NOT) 操作 : 
如 果 操 作 数 是 真 值 则 人 返回 false; 如 采 是 假 值 ， 则 返回 true。 比 如 : 


if( (x==0& &y==0)||!(z==0)){//x 和 y 都 是 零 或 z 是 非 零 
} 





关于 操作 数 的 完整 的 细节 可 以 参照 4.10 节 。 
3.4 null 和 undefined 


null 是 JavaScript 语 言 的 关键 字 ， 它 表示 一 个 特殊 值 ， 党 用 来 描述 “ 空 
值 >。 对 null 执 行 typeof 预 算 ， 结 果 返 回 字 符 串 "object"， 也 就 是 说 ， 可 以 
将 null 认 为 是 一 个 特殊 的 对 象 值 ， 含 义 是 “ 非 对 象 ”。 但 实际 上 ， 通 常 认 
为 null 是 它 自 有 类 型 的 唯一 一 个 成 员 ， 它 可 以 表示 数字 、 字 符 串 和 对 象 
是 “无 值 ”* 的 。 大 多 数 编 程 语言 和 JavaScript 一 样 含 有 null: 你 可 能 对 null 或 
nil 很 眼熟 。 


JavaScript 还 有 第 二 个 值 来 表示 值 的 空缺 。 用 未 定义 的 值 表示 更 深层 











次 的 “ 空 值 ”。 它 是 变量 的 一 种 取 值 ， 表 明 变 量 没有 初始 化 ， 如 果 要 查询 
对 象 属性 或 数组 元 素 的 值 时 返回 undefined 则 说 明 这 个 属性 或 元 素 不 存 
在 。 如 果 函 数 没 有 返回 任何 值 ， 则 返回 undefined。 引 用 没有 提供 实 参 的 
函数 形 参 的 值 也 只 会 得 到 undefined。undefined 是 预定 义 的 全 局 变量 〈 它 
和 mnull 不 一 样 ， 它 不 是 关键 字 ) ， 它 的 值 就 是 “未 定义 ”。 在 ECMAScript 
3 中 ，undefined 是 可 读 / 写 的 变量 ， 可 以 给 它 赋 任意 值 。 这 个 错误 在 
ECMAScript ”5 中 做 了 修正 ，undefined 在 该 版 本 中 是 只 读 的 。 如 果 使 用 
typeof 运 算 符 得 到 undefined 的 类 型 ， 则 返回 "undefined"， 表 明 这 个 值 是 
这 个 类 型 的 唯一 成 员 。 


尽管 null 和 undefined 是 不 同 的 ， 但 它们 都 表示 “ 值 的 空缺 >， 两 者 往 
往 可 以 互 换 。 判 断 相 等 运算 符 “==” 认 为 两 者 是 相等 的 〈 要 使 用 严格 相等 
运算 符 “===? 来 区 分 它们 ) 。 在 希望 值 是 布尔 类 型 的 地 方 它们 的 值 都 是 
假 值 ， 和 false 类 似 。null 和 undefined 都 不 包含 任何 属性 和 方法 。 实 际 
上 ， 使 用 “> 和“[]?” 来 存 取 这 两 个 值 的 成 员 或 方法 都 会 产生 一 个 类 型 错 


1 天 。 








你 或 许 认为 undefined 是 表示 系统 级 的 、 出 乎 意料 的 或 类 似 错误 的 值 
的 空缺 ， 而 null 是 表示 程序 级 的 、 正 常 的 或 在 意料 之 中 的 值 的 空缺 。 如 
果 你 想 将 它们 赋值 给 变量 或 者 属性 ， 或 将 它们 作为 参数 传 入 函数 ， 最 佳 
选择 是 使 用 null。 


95 本局 对 条 


前 几 节 讨论 了 JavaScript 的 原始 类 型 和 原始 值 。 对 象 类 型 一 一 对 象 、 
数组 和 函数 一 在 本 书 中 均 会 有 独立 章节 来 讲述 。 但 有 一 类 非常 重要 的 
对 象 ， 我 们 不 得 不 现在 就 把 它们 讲 清楚 一 一 全 局 对 象 。 全 局 对 象 
(global ”object〉 在 JavaScript 中 有 着 重要 的 用 途 : 全 局 对 象 的 属性 是 全 
局 定义 的 符号 ，JavaScript 程 序 可 以 直接 使 用 。 当 JavaScript 解 释 器 局 动 
时 (或 者 任何 Web 浏 览 器 加 载 新 页 面 的 时 候 )， 它 将 创建 一 个 新 的 全 局 
对 象 ， 并 给 它 一 组 定义 的 初始 属性 : 


:全 局 属性 ， 比 如 undefined、Infinity 和 NaN。 

















-全 局 函数 ， 比 如 isNaN()、parseInt()( 见 3.8.2 节 〉 和 eval()( 见 4.12 
节 ) 


.构造 函数 ， 比 如 Date0)、RegExpO、String0、Object0 和 ArrayO 


( 见 3.8.2 节 ) 
全 局 对 象 ， 比 如 Math 和 JSON( 见 6.9 节 ) 


全 局 对 象 的 初始 属性 并 不 是 保留 字 ， 但 它们 应 该 当做 保留 字 来 对 
待 。2.4.1 节 列 出 了 所 有 这 些 属性 。 本 章 对 一 部 分 全 局 属性 也 有 描述 。 其 
他 属性 在 其 他 章节 也 会 讲述 。 可 以 在 第 三 部 分 中 通过 名 称 查 找到 ， 或 者 
通过 别名 "Global" 来 找到 这 些 全 局 对 象 。 对 于 客户 端 JavaScript 来 讲 ， 
Window 对 象 定 义 了 一 些 额 外 的 全 局 属性 ， 可 以 在 第 四 部 分 中 查看 它 
人 


在 代码 的 最 项 级 一 一 不 在 任何 函数 内 的 JavaScript 代 码 
JavaScript 关 键 字 this 来 引用 全 局 对 象 : 








可 以 使 用 


























var global=this;// 定 义 一 个 引用 全 局 对 象 的 全 局 变量 




















在 客户 并 JavaScript 中 ， 在 其 表示 的 浏览 器 窗口 中 的 所 有 JavaScript 
代码 中 ，Window 对 象 充当 了 全 局 对 象 。 这 个 全 局 Window 对 象 有 一 个 属 
性 window 引 用 其 自身 ， 它 可 以 代 蔡 this 来 引用 全 局 对 象 。Window 对 象 定 
义 了 核心 全 局 属性 ， 但 它 也 针对 Web 浏 览 器 和 客户 端 JavaScript 定 义 了 一 
少 部 分 其 他 全 局 属性 。 


当初 次 创建 的 时 候 ， 全 局 对 象 定义 了 JavaScript 中 所 有 的 预定 义 全 局 
值 。 这 个 特殊 对 象 同样 包含 了 为 程序 定义 的 全 局 值 。 如 果 代 码 声 明了 一 
个 全 局 变量 ， 这 个 全 局 变量 就 是 全 局 对 象 的 一 个 属性 ，3.10.2 厄 有 关于 
此 的 详尽 解释 。 


3.6 ”包装 对 象 

JavaScript 对 象 是 一 种 复合 值 : 它 是 属性 或 已 命名 值 的 集合 。 通 
过 “.” 符 号 来 引用 属性 值 。 当 属性 值 是 一 个 函数 的 时 候 ， 称 其 为 方法 。 通 
过 o.m0) 来 调用 对 象 o 中 的 方法 。 

我 们 看 到 字符 串 也 同样 具有 属性 和 方法 : 























人 性 Ap 


var s="hello world!";// 一 个 字符 串 
var word=s.substring(s.index0of("")+1,s.length);// 使 用 字符 串 的 属性 





























字符 串 既 然 不 是 对 象 ， 为 什么 它 会 有 属性 昵 ? 只 要 引用 了 字符 串 $ 
的 属性 ，JavaScript 就 会 将 字符 串 值 通过 调用 new ”String(s) 的 方式 转换 成 
对 象 ， 这 个 对 象 继承 了 字符 串 的 方法 〈 见 6.2.2 节 ) ， 并 被 用 来 处 理 属性 
的 引用 。 一 旦 属性 引用 结束 ， 这 个 新 创建 的 对 象 就 会 销毁 〈 其 实在 实现 
上 并 不 一 定 创建 或 销毁 这 个 临时 对 象 ， 然 而 整个 过 程 看 起 来 是 这 样 ) 。 


同 字 符 串 一 样 ， 数 字 和 布尔 值 也 具有 各 上 自 的 方法 : 通过 Number() 和 
Boolean() 构 造 函 数 创建 一 个 临时 对 象 ， 这 些 方法 的 调用 均 是 来 自 于 这 个 
临时 对 象 。null 和 undefined 没 有 包装 对 象 : 访问 它们 的 属性 会 造成 一 个 
类 型 错误 。 


看 如 下 代码 ， 思 考 它 们 的 执行 结果 : 

















var s="test";// 创 建 一 个 字符 串 
s .len=4;// 给 它 设置 一 个 属性 
var t=s .len;// 查 询 这 个 属性 









































当 运 行 这 段 代码 时 ，t 的 值 是 undefined。 第 二 行 代码 创建 一 个 临时 
字符 串 对 象 ， 并 给 其 len 属 性 赋值 为 4， 随 即 销毁 这 个 对 象 。 第 三 行 通过 
原始 的 (没有 被 修改 过 ) 字 符 串 值 创 建 一 个 新 字符 串 对 象 ， 答 试 谈 取 其 len 
属性 ， 这 个 属性 上 自然 不 存在 ， 表 达 式 求 值 结果 为 undefined。 这 段 代 人 码 说 
明了 在 读 取 字符 串 、 数 字 和 布尔 值 的 属性 值 〈 或 方法 ) 的 时 候 ， 表 现 的 
像 对 象 一 样 。 但 如 果 你 试图 给 其 属性 赋值 ， 则 会 急 略 这 个 操作 : 修改 只 
是 发 生 在 临时 对 象 导 上 ， 而 这 个 临时 对 象 并 未 继续 保留 下 来 。 


存 取 字 符 串 、 数 字 或 布尔 值 的 属性 时 创建 的 临时 对 象 称 做 包 六 对 
象 ， 它 只 是 偶尔 用 来 区 分 字符 串 值 和 字符 串 对 象 、 数 字 和 数值 对 象 以 及 
布尔 值 和 布尔 对 象 。 通 第 ， 包 沪 对 象 只 是 被 看 做 古 一 种 实现 细 市 ， 而 不 
用 特别 关注 。 由 于 字符 串 、 数 字 和 布尔 值 的 属性 都 是 只 读 的 ， 并 且 不 能 
给 它们 定义 新 属性 ， 因 此 你 需要 明 昌 它们 是 有 别 于 对 象 的 。 


需要 注意 的 是 ， 可 通过 String0，Number0 或 Boolean(0) 构 造 函 数 来 显 
式 创建 包装 对 象 : 


























var s="test",n=1,b=true;// 一 个 字符 串 、 数 字 和 布尔 值 
var S=new String(s);// 一 个 字符 串 对 象 
var N=new Number(n);// 一 个 数值 


var B=new Boolean(b);// 一 个 布尔 对 象 











部 














JavaScript 会 在 必要 时 将 包装 对 象 转换 成 原始 值 ， 因 此 上 段 代 码 中 的 
对 象 S、N 和 B 常 常 一 一 但 不 总 是 一 一 表现 的 和 值 sS、n 和 b 一 样 。“==” 等 
于 运算 符 将 原始 值 和 其 包装 对 象 视 为 相等 ， 但 “===” 全 等 运算 符 将 它们 
视 为 不 等 。 通 过 typeof 运 算 符 可 以 看 到 原始 值 和 其 包装 对 象 的 不 同 。 


3.7 不 可 变 的 原始 值 和 可 变 的 对 象 引 用 


JavaScript 中 的 原始 值 (undefined、null、 布 尔 值 、 数 字 和 字符 串 ) 
与 对 象 〈 包 括 数 组 和 函数 ) 有 着 根本 区 别 。 原 始 值 是 不 可 更 改 的 ; 任何 
方法 都 无 法 更 改 〈 或 “突变 ”) 一 个 原始 值 。 对 数字 和 布尔 值 来 说 显然 如 
此 一 一 改变 数字 的 值 本 里 就 说 不 通 ， 而 对 字符 串 来 说 就 不 那么 明显 了 ， 
因为 字符 串 看 起 来 像 由 字符 组 成 的 数组 ， 我 们 期 望 可 以 通过 指定 索引 来 
修改 字符 串 中 的 字符 。 实 际 上 ， a 字符 串 中 所 
0 返回 了 一 个 修改 后 的 字符 串 ， 实 际 上 返回 的 是 一 个 新 的 

字符 列 如 











var s="hello";// 定 义 一 个 由 小 写字 母 组 成 的 文本 
s .toUpperCase();// 返 回 "HELLO"， 但 并 没有 改变 s 的 值 


S 
//=>"he11o" :原始 字符 串 的 值 并 未 改变 















































原始 值 的 比较 是 值 的 比较 : 只 有 在 它们 的 值 相等 时 它们 才 相 等 。 这 
对 数字 、 布 尔 值 、nul 和 undefined 来 说 听 起 来 有 点 儿 难 懂 ， 并 没有 其 他 
办 法 来 比较 它们 。 同 样 ， 对 于 字符 串 来 说 则 并 不 明显 : 如 果 比 较 两 个 单 
独 的 字符 串 ， 当 且 仅 当 和 它们 的 长 度 相 等 且 每 个 索引 的 字符 都 相等 时 ， 
JavaScript 才 认为 它们 相等 。 


对 象 和 原始 值 不 同 ， 首 先 ， 它 们 古 可 变 的 一 一 它们 的 值 是 可 修改 





Var 0={X:1};// 定 义 一 个 对 象 

0 .X=2;// 通 过 修改 对 象 属性 值 来 更 改 对 象 
0.y=3;// 再 次 更 改 这 个 对 象 ， 给 它 增加 一 个 新 属性 
var a=[1,2,3]// 数 组 也 是 可 修改 的 

a[9]=0; // 更 改 数 组 的 一 个 元 素 

a[3]=4;// 给 数组 增加 一 个 新 元 素 









































对 象 的 比较 并 非 值 的 比较 : 即使 两 个 对 象 包含 同样 的 属性 及 相同 的 
值 ， 它 们 也 是 不 相等 的 。 各 个 索引 元 系 完 全 相等 的 两 个 数组 也 不 相等 。 





var o={x:1}, p={X:1}; // 具 有 相同 属性 的 两 个 对 象 
o===p//=>>false: 两 个 单独 的 对 象 永 不 相等 

var a=[],b=[]; // 丙 个 单独 的 空 数组 
a===b//=>false: 两 个 单独 的 数组 永 不 相等 





























我 们 通常 将 对 象 称 为 引用 类 型 (reference type) ， 以 此 来 和 
JavaScript 的 基本 类 型 区 分 开 来 。 依 照 术 语 的 叫 法 ， 对 象 值 都 是 引用 
Creference) ， 对 象 的 比较 均 是 引用 的 比较 : 当 且 仅 当 它们 引用 同一 个 
基 对 象 时 ， 它 们 才 相 等 。 





var a=[];// 定 义 一 个 引用 空 数 组 的 变量 a 
var b=a; // 变 量 b 引 用 同一 个 数组 
b[0]=1; // 通 过 变量 b 来 修改 引用 的 数组 
a[9]//=>1: 变 量 a 也 会 修改 
a===b//=>true:a 和 b 引 用 同一 个 数组 ， 因 此 它们 相等 



























































就 像 你 刚 看 到 的 如 上 代码 ， 将 对 象 “或 数组 ) 赋值 给 一 个 变量 ， 仅 
仅 是 赋值 的 引用 值 : 对 象 本 号 并 没有 复制 一 次 。 如 果 你 想得到 一 个 对 象 
或 数组 的 副本 ， 则 必须 显 式 复制 对 象 的 每 个 属性 或 数组 的 每 个 元 素 。 下 
面 这 个 例子 则 是 通过 循环 来 完成 数组 复制 〈 见 5.5.3 节 ) : 














Var a=['a','b 3 'c'];// 待 复制 的 数组 
var b=[];// 复 制 到 的 目标 空 数组 
for(var i=0;i<a.length;i++){// 遍 历 a[] 中 的 每 个 元 素 
b[i]=a[ri] ; // 将 元 素 值 复制 到 b 中 
} 
































同样 的 ， 如 果 我 们 想 比 较 两 个 单独 的 对 象 或 者 数组 ， 则 必须 比较 它 
们 的 属性 或 元 系 。 下 面 这 段 代码 定义 了 一 个 比较 两 个 数组 的 函数 : 





function equalArrays(ayb){ 

if(a.length!=b.length)return false; Se 
for(var i=0;i<a.length; i++)// 循 环 避 历 所 
if(a[i]!==b[i])return false;// 如 果 有 任 意 元 索 不 等 则 数组 不 相等 
return true;// 和 否则 它们 相等 


} 


3.8 ”类 型 转换 
JavaScript 中 的 取 值 类 型 非常 灵活 ， 我 们 已 经 从 布尔 值 看 到 了 这 一 



































点 : 当 JavaScript 期 望 使 用 一 个 布尔 值 的 时 候 ， 你 可 以 提供 任意 类 型 值 ， 

Javascript 将 根据 需 ;要 目 行 转换 类 型 。 一 些 值 ( 真 值 ) 转换 为 tue， 其 他 

值 〈 假 值 ) 转换 为 false。 这 在 其 他 类 型 中 同样 适用 : 如 果 JavaScript 期 望 

使 用 一 个 字符 串 ， 它 把 给 定 的 值 将 转换 为 字符 串 。 如 果 JavaScript 期 望 使 

人 它 把 给 定 的 值 将 转换 为 数字 〈 如 果 转 换 结 果 无 意义 的 话 将 
返回 NaN) ， 一 些 例 子 如 下 : 





"objects" //=>"10 objects" .数字 10 转 换 成 字符 串 
"4! 2 >28: 两 个 字符 串 均 转换 为 数字 

var n=1-"x";//= 定 NaN: 字 符 串 "x" 无 法 转换 为 数字 

n+"objects' 1//= 二 "NaN objects" :NaN 转 换 为 字符 串 "NaN" 























表 3-2 简 要 说 明 省 在 JavaScript 中 如 何 进行 类 型 转换 。 表 3-2 中 的 粗 体 
部 分 突出 显示 了 那些 让 你 倍 感 意外 的 类 型 转换 。 空 单元 格 表示 不 必要 也 
没有 执行 转换 。 








表 3.2，Javag9cript 类 型 转换 


入 


undefined 
null 


true 
false 


"(和 伯 下) 


"1,2"( 非 空 ,数字 ) 
"one"( 非 空 , 非 数 字 ) 


NaN 
Infinity 
-Infinity 


1( 无 穷 大 , 非 零 ) 


{}( 任 总 对 象 ) 
[] (任意 数组 ) 


[9] (1 个 数字 元 素 ) 
[ "3 ]( 其 他 数组 ) 


转换 为 
字符 串 
"Undefined 
"null" 


"true” 
"false" 


"p 
'p 

"NaN" 
“Infinity” 
“Infinity 
"1 

参考 3.8.3 节 


0 


使 用 join( ) 方 法 


function(){}( 任 意 函 数 ) 参考 3.8 .3 市 


布尔 值 对 象 

false throws TypeError 

false throws TypeError 
new Boolean(true) 
new Boolean(false) 

false new String("") 

true new String("1,2") 

true new String("one") 

false new Number(0) 

false new Number(-0) 

false new Number(NaN) 

true new Number(Infinity) 

true new Number(-Infinity) 

true new Number(1) 

true 

true 

true 

true 

true 


表 3-2 中 提 到 的 原始 值 到 原始 值 的 转换 相对 简单 ， 我 们 已 经 在 3.3 市 


讨论 过 转换 为 布尔 值 的 情况 了 。 所 有 原始 值 转换 为 字符 串 的 情形 也 已 经 
明确 定义 。 转 换 为 数字 的 情形 比较 微妙 。 那 些 以 数字 表示 的 字符 串 可 以 
直接 转换 为 数字 ， 也 人 允许 在 开始 和 结尾 处 带 有 空格 。 但 在 开始 和 结尾 处 
的 任意 非 空 格 字 符 都 不 会 被 当成 数字 直接 量 的 一 部 分 ， 进 而 造成 字符 串 
转换 为 数字 的 结果 为 NaN。 有 一 些 数字 转换 看 起 来 让 人 奇怪 : true 转 换 
为 1，false、 空 字符 串 "" 转 换 为 0。 
原始 值 到 对 象 的 转换 也 非常 简单 ， 原 始 值 通过 调用 String()、 

Number() 或 Boolean0 构 造 函 数 ， 转 换 为 它们 各 上 自 的 包装 对 象 〈( 见 3.6 


eg 


nul 和 undefined 属 于 例外 ， 当 将 它们 用 在 期 望 是 一 个 对 象 的 地 方 都 
会 造成 一 个 类 型 错误 (TypeError) 异常 ， 而 不 会 执行 正常 的 转换 。 


对 象 到 原始 值 的 转换 多 少 有 些 复杂 ，3.8.3 届 将 以 此 为 专题 专门 讲 
述 。 
3.8.1 转换 和 相等 性 


由 于 JavaScript 可 以 做 灵活 的 类 型 转换 ， 因 此 其 “==” 相 等 运算 符 也 随 
相等 的 含义 灵活 多 变 。 例 如 ， 如 下 这 些 比较 结果 均 是 true: 














null==undefined// 这 两 值 被 认为 相等 

"0"==0// 在 比较 之 前 字符 串 转 换 成 数字 

0==false// 在 比较 之 前 布尔 值 转换 成 数字 
"0"==false// 在 比较 之 前 字符 串 和 布尔 值 都 转换 成 数字 














类 型 转换 。 


需要 特别 注意 的 是 ， 一 个 值 转换 为 男 一 个 值 并 不 意味 着 两 个 值 相 
和 等。 比如， 如 果 在 期 望 使 用 布尔 值 的 地 方 使 用 了 undefined， 它 将 会 转换 
为 false， 但 这 并 不 表明 undefined==false。JavaScript 运 算 符 和 语句 期 望 使 
用 多 样 化 的 数据 类 型 ， 并 可 以 相互 转换 。if 语 句 将 undefined 转 换 为 
false， 但 “==” 运 算 符 从 不 试图 将 其 操作 数 转换 为 布尔 值 。 


3.8.2” 显 式 类 型 转换 





尽管 JavaScript 可 以 自动 做 许多 类 型 转换 ， 但 有 时 仍 需要 做 显 式 转 
换 ， 或 者 为 了 使 代码 变 得 清晰 易 读 而 做 显 式 转换 。 


做 显 式 类 型 转换 最 简单 的 方法 承 是 使 用 Boolean0)、INumberO)、 
String0) 或 ObjectO 函 数 。 我 们 在 3.6 节 已 经 介绍 过 了 。 当 不 通过 new 运 算 
符 调 用 这 些 函 数 时 ， 它 们 会 作为 类 型 转换 函数 并 按照 表 3-2 所 摘 述 的 规 
则 做 类 型 转换 : 


Number("3")//=>3 
String(false)//=>"false" 或 使 用 false.toString() 
Boolean([])//=>true 

Object(3)//=>new Number(3) 























需要 注意 的 是 ， 除 了 null 或 ndefined 之 外 的 任何 值 都 具有 toString0 
方法 ， 这 个 方法 的 执行 结果 通常 和 String0 方 法 的 返回 结果 一 致 。 同 样 需 
要 注意 的 是 ， 如 果 试 图 把 hull 或 undefined 转 换 为 对 象 则 会 像 表 3-2 所 描述 
的 那样 抛 出 一 个 类 型 错误 (TypeError) 。ObjectO 函 数 在 这 种 情况 下 不 
会 抛 出 异常 ， 它 仅 简单 地 返回 一 个 新 创建 的 空 对 象 


JavaScript 中 的 某 些 运 算 符 会 做 隐 式 的 类 型 转换 ， 有 时 用 于 类 型 转 
换 。 如 果 “+” 运 算 符 的 一 个 操作 数 是 字符 串 ， 它 将 会 把 力 外 一 个 操作 数 
转换 为 字符 串 。 一 元 “+” 运 算 符 将 其 操作 数 转换 为 数 子 。 同 样 ， 一 
元 “! ”运算 符 将 其 操作 数 转换 为 布尔 值 并 取 反 。 在 代码 中 会 经 常见 到 这 
种 类 型 转换 的 惯用 法 : 





x+""// 等 价 于 String(x) 
+X// 等 价 于 Number (xX). 也 可 以 写成 x-0 
!11x// 等 价 于 Boolean(x) .注意 是 双 叹 号 











在 计算 机 程序 中 数字 的 解析 和 格式 化 是 非常 普通 的 工作 ，JavaScript 
中 提供 了 专门 的 函数 和 方法 用 来 做 更 加 精确 的 数字 到 字符 串 (number- 
to-string) 和 字符 串 到 数字 (string-to-number)〉 的 转换 。 


Number 类 定义 的 toString0 方 法 可 以 接收 表示 转换 基数 (radix) 则 的 
可 选 参数 ， 如 果 不 指定 此 参数 ， 转 换 规则 将 是 基于 十 进 制 。 同 样 ， 亦 可 
以 将 数字 转换 为 其 他 进 制 数 〈 范 围 在 2 一 36 之 间 ) ， 例 如 : 





var n=17; 
binary_string=n.toString(2);// 转 换 为 "10001" 


octal_string="g"+n.toString(8);// 转 换 为 "921" 
hex_string="0Ox"+n,toString(16);// 转 换 为 "0x11" 











当 处 理财 务 或 科学 数据 的 时 候 ， 在 做 数字 到 字符 串 的 转换 过 程 中 ， 
你 期 望 自己 控制 输出 中 小 数 点 位 置 和 和 有效 数字 位 数 ， 或 者 决定 是 否 需 要 
站 数 记 数 法 。Number 类 为 这 种 数字 到 字符 串 的 类 型 转换 场景 定义 了 三 
个 方法 。toFixed0 根 据 小 数 点 后 的 指定 位 数 将 数字 转换 为 字符 串 ， 它 从 
不 使 用 指数 记 数 法 。toExponential0 使 用 指数 记 数 法 将 数字 转换 为 指数 
形式 的 字符 串 ， 其 中 小 数 点 前 只 有 一 位 ， 小 数 点 后 的 位 数 则 由 参数 指定 
(也 就 是 说 有 效 数字 位 数 比 指定 的 位 数 要 多 一 位 ) 内，toPrecision0) 根 据 
指定 的 有 效 数 字 位 数 将 数字 转换 成 字符 串 。 如 果 有 效 数 字 的 位 数 少 于 数 
字 整 数 部 分 的 位 数 ， 则 转换 成 指数 形式 。 我 们 注意 到 ， 所 有 三 个 方法 都 
会 适当 地 进行 四 舍 五 入 或 填充 0。 看 一 下 下 面 几 个 例子 : 





var n=123456.789 ， 
toFixed(0);//"123457" 
toFixed(2);//"123456.79" 
toFixed(5);//"123456.78900" 
toExponential(1);//"1.2e+5" 
toExponential(3);//"1.235e+5" 
topPrecision(4);//"1.235e+5" 
topPrecision(7);//"123456.8" 
topPrecision(10);//"123456.7890" 


Sy 





如 果 通 过 Number() 转 换 水 数 传 入 一 个 字符 串 ， 它 会 试图 将 其 转换 为 
一 个 整数 或 浮 点 数 直 接 量 ， 这 个 方法 只 能 基于 十 进 制 数 进行 转换 ， 并 且 
不 能 出 现 非法 的 尾随 字符 。parseInt() 函 数 和 parseFloat() 函 数 〈 它 们 是 全 
局 函数 ， 不 从 属于 任何 类 的 方法 ) 更 加 灵活 。parseIntO 只 解析 整数 ， 而 
parseFloat() 则 可 以 解析 整数 和 浮 点 数 。 如 果 字 符 串 前 级 是 "0x" 或 
者 "0X"，parseInt() 将 其 解释 为 十 六 进 制 数 虹 ，parseInt() 和 parseFloat() 都 
会 跳 过 任意 数量 的 前 导 空 格 ， 尽 可 能 解析 更 多 数值 字符 ， 并 忽略 后 面 的 
内 容 。 如 果 第 一 个 非 空格 字符 是 非法 的 数字 直接 量 ， 将 最 终 返 回 NaN: 

















parseInt("3 blind mice")//=>3 
parseFloat("3.14 meters")//=>3.14 
parseInt("-12.34")//=-12 
parseInt("OxFF")//=>255 
parseInt("Oxff")//=>255 
parseInt("-OXFF")//=>-255 
parseFloat(".1")//=>0.1 
parseInt("0.1")//=>0 
parseInt(".1")//=>NaN :整数 不 能 以 " ." 开 始 
parseFlLoat("$72.47");//=>NaN :数字 不 能 以 "$" 开 
二 一 





boi 





parseIntO 可 以 接收 第 二 个 可 选 参 数 ， 这 个 参数 指定 数字 转换 的 基 
数 ， 合 法 的 取 值 范围 是 2 一 36， 例 如 : 





parseInt("11",2);//=>3(1*2+1) 
parseInt("ff",16);//=>255(15*16+15) 
parseInt("zz",36);//=>1295(35*36+35) 
parseInt("077",8);//=63(7*8+7) 
parseInt("077",10);//=>77(7*10+7) 





3.8.3 对象 转换 为 原始 值 


对 象 到 布尔 值 的 转换 非常 简单 :所 有 的 对 象 ( 包 括 数组 和 函数 ) 都 
转换 为 tue。 对 于 包装 对 象 亦 是 如 此 : new Boolean(false) 是 一 个 对 象 而 
不 是 原始 值 ， 它 将 转换 为 true。 


对 象 到 字符 串 〈object-to-string) 和 对 象 到 数字 (object-to-number) 
的 转换 是 通过 调用 待 转换 对 象 的 一 个 方法 来 完成 的 。 一 个 抹 烦 的 事实 
是 ，JavaScript 对 象 有 两 个 不 同 的 方法 来 执行 转换 ， 并 且 接 下 来 要 讨论 的 
一 些 特殊 场景 更 加 复杂 。 值 得 注意 的 是 ， 这 里 提 到 的 字符 串 和 数字 的 转 
换 规 则 只 适用 于 本 地 对 象 Cnative object) 。 宿 主 对 象 〈 例 如 ， 由 Web 浏 
览 器 定义 的 对 象 ) 根据 各 自 的 算法 可 以 转换 成 字符 串 和 数字 。 


所 有 的 对 象 继承 了 两 个 转换 方法 。 第 一 个 是 toString0， 它 的 作用 是 
返回 一 个 反映 这 个 对 象 的 字符 串 。 默 认 的 toString0 方 法 并 不 会 返回 一 个 
有 趣 的 值 〈 在 例 6-4 中 我 们 会 及 现 它 非常 有 用 )〉: 














({xX:1,y:2}).tostring()//=>"[object Object]" 





很 多 类 定义 了 更 多 特定 版 本 的 toString0) 方 法 。 例 如 ， 数 组 类 

(Array class) 的 toString() 方 法 将 每 个 数组 元 素 转 换 为 一 个 字符 串 ， 并 
在 元 素 之 间 添 加 逗号 后 合并 成 结果 字符 串 。 函 数 类 (Function class) 的 
toString() 方 法 返回 这 个 函数 的 实现 定义 的 表示 方式 。 实 际 上 ， 这 里 的 实 
现 方式 是 通常 是 将 用 户 定 义 的 函数 转换 为 JavaScript 源 代码 字符 串 。 日 期 
类 (Date class) 定义 的 toString0) 方 法 返回 了 一 个 可 读 的 (可 被 JavaScript 
解析 的 乌 ) 日 斯 和 时 间 字 符 串 。RegExp 类 (RegExp class) 定义 的 
toString() 方 法 将 RegExp 对 象 转换 为 表示 正则 表达 式 直接 量 的 字符 串 : 











[1,2,3].toSstring()//=>"1,2,3" 


(function(x){f(x);}).toSstring()//=>"function(x){\n f(x);\n}" 
/\d+/g.tostring() 

//=>"/\\d+/g" 

new Date(2010,0,1).toSstring()//=>"Fri Jan 01 2010 00:00:00 GMT-0800(PST)" 





另 一 个 转换 对 象 的 函数 是 valueOfO。 这 个 方法 的 任务 并 未 详细 定 
义 : 如 果 存 在 任意 原始 值 ， 它 就 默认 将 对 象 转换 为 表示 它 的 原始 值 。 对 
象 是 复合 值 ， 而 且 大 多 数 对 象 无 法 真正 表示 为 一 个 原始 值 ， 因 此 默认 的 
valueOfO 方 法 简单 地 返回 对 象 本 刁 ， 而 不 是 返回 一 个 原始 值 。 数 组 、 函 
数 和 正则 表达 式 简 单 地 继承 了 这 个 默认 方法 ， 调 用 这 些 类 型 的 实例 的 
valueOfO 方 法 只 是 简单 返回 对 象 本 有 身 。 日 期 类 定义 的 valueOfO 方 法 会 返 
回 它 的 一 个 内 部 表示 : 1970 年 1 月 1 日 以 来 的 毫秒 数 。 


























var d=new Date(2010,0,1);//2010 年 1 月 1 日 (太平 洋 时 间 ) 
d.valueof()//=>1262332800000 











通过 使 用 我 们 刚刚 讲解 过 的 toString0 和 valueOfO 方 法 ， 就 可 以 做 到 
对 象 到 字符 串 和 对 象 到 数字 的 转换 了 。 但 需要 注意 的 是 ， 在 某 些 特殊 的 
场景 中 ，JavaScript 执 行 了 完全 不 同 的 对 象 到 原始 值 的 转换 。 这 些 特 殊 场 
景 在 本 节 的 最 后 会 讲 到 。 


JavaScript 中 对 象 到 字符 串 的 转换 经 过 了 如 下 这 些 步 又 : 


-如 果 对 象 具 有 toString0 方 法 ， 则 调用 这 个 方法 。 如 果 它 返 回 一 个 
原始 值 ，JavaScript 将 这 个 值 转换 为 字符 串 ( 如 果 本 身 不 是 字符 串 的 话 )， 
并 返回 这 个 字符 串 结果 。 需 要 注意 的 是 ， 原 始 值 到 字符 串 的 转换 在 表 3- 
2 中 已 经 有 了 详尽 的 说 明 。 


如果 对 象 没 有 toString0) 方 法 ， 或 者 这 个 方法 并 不 返回 一 个 原始 
值 ， 那 么 JavaScript 会 调用 valueOfO 方 法 。 如 果 存 在 这 个 方法 ， 则 
JavaScript 调 用 它 。 如 果 返 回 值 是 原始 值 ，JavaScript 将 这 个 值 转换 为 字 
符 串 (如果 本 身 不 是 字符 串 的 话 ) ， 并 返回 这 个 字符 串 结 


.否则 ，JavaScript 无 法 从 toString0 或 valueOfO 获 得 一 个 原始 值 ， 
此 这 时 它 将 抛 出 一 个 类 型 错误 异常 。 


在 对 象 到 数字 的 转换 过 程 中 ，JavaScript 做 了 同样 的 事情 ， 只 是 它 会 
首先 党 试 使 用 valueOfO 方 法 : 














.如 果 对 象 具 有 valueOfO0 方 法 ， 后 者 返回 一 个 原始 值 ， 则 JavaScript 
将 这 个 原始 值 转换 为 数字 〈 如 果 需 要 的 话 ) 并 返回 这 个 数字 。 


否则 ， 如 果 对 象 且 有 toString(0) 方 法 ， 后 者 返回 一 个 原始 值 ， 则 
JavaScript 将 其 转换 并 返回 站。 


.个 则 ，JavaScript 抛 出 一 个 类 型 错误 异 销 。 


对 象 转换 为 数字 的 细 市 解释 了 为 什么 空 数组 会 被 转换 为 数字 0 以 及 
为 什么 具有 单个 元 素 的 数组 同样 会 转换 成 一 个 数字 。 数 组 继承 了 默认 的 
valueOfO 方 法 ， 这 个 方法 返回 一 个 对 象 而 不 是 一 个 原始 值 ， 因 此 ， 数 组 
到 数字 的 转换 则 调用 toString0) 方 法 。 空 数组 转换 成 为 空 字符 串 ， 空 字符 
串 转 换 成 为 数字 0。 含 有 一 个 元 素 的 数组 转换 为 字符 串 的 结果 和 这 个 元 
素 转换 字符 串 的 结果 一 样 。 如 果 数 组 只 包含 一 个 数字 元 系 ， 这 个 数字 转 
换 为 字符 串 ， 再 转换 回 数字 。 


JavaScript 中 的 “+” 运 算 符 可 以 进行 数学 加 法 和 字符 串 连 接 操作 。 如 
果 它 的 其 中 一 个 操作 数 是 对 象 ， 则 JavaScript 将 使 用 特殊 的 方法 将 对 象 转 
换 为 原 如 值 ， a 0 


换 ， 
将 会 放眼 对 象 到 原始 信 的 转换 委 式 进行 


“+2” 和 “==” 应 用 的 对 象 到 原始 值 的 转换 包含 日 期 对 象 的 一 种 特殊 情 
形 。 日 期 类 是 JavaScript 语 言 核心 中 唯一 的 预先 定义 类 型 ， 它 定义 了 有 意 
义 的 同人 字符 串 和 数字 类 型 的 转换 。 对 于 所 有 非 日 期 的 对 象 来 说 ， 对 象 到 
原始 值 的 转换 基本 上 是 对 象 到 数字 的 转换 (首先 调用 valueOfO ) ,日 期 
对 象 则 使 用 对 象 到 字符 串 的 转换 模式 ， 然 而 ， 这 里 的 转换 和 上 文 讲述 的 
并 不 完全 一 致 : 通过 valueOf 或 toStringO0 返 回 的 原始 值 将 被 直接 使 用 ， 而 
不 会 被 强制 转换 为 数字 或 字符 串 。 


和 “==” 一 样 ，“<<” 运 算 符 以 及 其 他 关系 运算 符 也 会 做 对 象 到 原始 值 
的 转换 ， 但 要 除去 日 期 对 象 的 特殊 情形 :任何 对 象 都 会 自 先 尝试 调用 
valueOf()， 然 后 调用 toString()。 不 管 得 到 的 原始 值 是 否 直 接 使 用 ， 它 都 
不 会 进一步 被 转换 为 数字 或 字符 串 。 


“+”、“==”、“1=” 和 关系 运算 符 是 唯一 执行 这 种 特殊 的 字符 串 到 原 
始 值 的 转换 方式 的 运算 符 。 其 他 运算 符 到 特定 类 型 的 转换 都 很 明确 ， 而 
且 对 日 期 对 象 来 讲 也 没有 特殊 情况 。 例 如 “-”( 减 号 ) 运算 符 把 它 的 两 











个 操作 数 都 转换 为 数字 。 下 面 的 代码 展示 了 日 期 对 象 
和 “+”、“-”、“==”" 以 及 “>” 的 运行 结果 : 











var now=new Date( );// 创 建 一 个 日 期 对 象 
typeof(now+1)//=>"string":"+" 将 日 期 转换 为 字符 串 
typeof(now-1)VV/=>"number'" :"-" 使 用 对 象 到 数字 的 转换 
now==now.toString()V/X=>true: 隐 式 的 和 显 式 的 字符 串 转 换 
now (now-1)V//=>true:">" 将 日 期 转换 为 数字 





















































3.9 变量 声明 


在 JavaScript 程 序 中 ， 使 用 一 个 变量 之 前 应 当先 声明 。 变 量 是 使 用 天 
键 字 var 来 声明 的 ， 如 下 所 示 : 














Var i; 
Var sum; 








也 可 以 通过 一 个 var 关 键 字 来 声明 多 个 变量 : 





Var i,sum; 





而 且 还 可 以 将 变量 的 初始 赋值 和 变量 声明 合 写 在 一 起 : 





var message="hello",; 
var i=0,]j=0, k=0; 








如 果 未 在 var 声 明 语 句 中 给 变量 指定 初始 值 ， 那 么 虽然 声明 了 这 个 
变量 ， 但 在 给 它 存 入 一 个 值 之 前 ， 它 的 初始 值 就 是 undefined。 


我 们 注意 到 ， 在 for 和 fovin 循 环 〈 在 第 5 章 会 讲 到 ) 中 同样 可 以 使 用 
语句， 这 样 可 以 更 简洁 地 声明 在 循环 体 语法 内 中 使 用 的 循环 变量 。 
列 如 : 








for(var i=0;i<10;i++)console.1log(i); 
for(var i=0,j=10;i<10;i++,j--)console.1log(i*j); 
for(var p in o)console.1og(p)， 





如 果 你 之 前 编写 过 诸如 C 或 Java 的 静态 语言 出 ， 你 会 注意 到 在 
JavaScript 的 变量 声明 中 并 没有 指定 变量 的 数据 类 型 。JavaScript 变 量 可 
以 是 任意 数据 类 型 。 例 如 ， 在 JavaScript 中 首先 将 数字 赋值 给 一 个 变量 ， 
随后 再 将 字符 串 赋值 给 这 个 变量 ， 这 是 完全 合法 的 : 








Var i=10; 
i="ten"; 


重复 的 声明 和 遗漏 的 声明 


使 用 var 语 句 重 复 声明 变量 是 合法 且 无 害 的 。 如 宁 重 复 声 明 带 有 初 
始 化 器 ， 那 么 这 就 和 一 条 简单 的 赋值 语句 没什么 两 样 。 


如 果 你 试图 读 取 一 个 没有 声明 的 变量 的 值 ，JavaScript 会 报错 。 在 
ECMAScript 5 严格 模式 〈 见 5.7.3 节 ) 中 ， 给 一 个 没有 声明 的 变量 赋值 也 
会 报错 。 然 而 从 历史 上 讲 ， 在 非 严格 模式 下 ， 如 果 给 一 个 未 声明 的 变量 
赋值 ，JavaScript 实 际 上 会 给 全 局 对 象 创 建 一 个 同名 属性 ， 并 且 它 工作 起 
来 像 〈 但 并 不 完全 一 样 ， 查 看 3.10.2 节 ) 一 个 正确 声明 的 全 局 变量 。 这 
意味 着 你 可 以 侥幸 不 声明 全 局 变量 。 但 这 是 一 个 不 好 的 习惯 并 会 造成 很 
多 bug， 因 此 ， 你 应 当 始 终 使 用 var 来 声明 变量 。 


3.10 ”变量 作用 域 


一 个 变量 的 作用 域 (scope〉 是 程序 源 代码 中 定义 这 个 变量 的 区 
域 。 全 局 变量 拥有 全 局 作用 域 ， 在 JavaScript 代 码 中 的 任何 地 方 都 是 有 定 
义 的 。 然 而 在 函数 内 声明 的 变量 只 在 函数 体内 有 定义 。 它 们 是 局 部 变 
量 ， 作 用 域 是 局 部 性 的 。 函 数 参 数 也 是 局 部 变量 ， 它 们 只 在 函数 体内 有 
定义 。 

在 函数 体内 ， 局 部 变量 的 优先 级 高 于 同名 的 全 局 变量 。 如 果 在 函数 


内 声明 的 一 个 局 部 变量 或 者 函数 参数 中 带 有 的 变量 和 全 局 变量 重 名 ， 那 
么 全 局 变量 束 被 局 部 变量 所 这 雷 。 



































var scope="global";// 声 明 一 个 全 局 变量 
function checkscope(){ 
var scope="local";// 声 明 一 个 同名 的 局 部 变量 
return scope;// 返 回 局 部 变量 的 值 ， 而 不 是 全 局 变量 的 值 





















































checkscope( )//=>>"local" 








尽管 在 全 局 作用 域 编写 代码 时 可 以 个 写 var 语 句 ， 但 声明 局 部 变量 
时 则 必须 使 用 var 语 句 。 思 考 一 下 如 果 不 这 样 做 会 怎样 : 





scope="global";// 声 明 一 个 全 局 变量 ， 甚 至 不 用 var 来 声明 
function checkscope2(){ 
scope="local";// 糟 糕 ! 我 们 刚 修改 了 全 局 变量 
myscope="local";// 这 里 显 式 地 声明 了 一 个 新 的 全 局 变 
return[scope,myscope];// 返 回 两 个 值 






























































上 地 

















checkscope2()//=["local", "local"] :产生 了 副作用 
scope//=>"1ocal" :全 局 变量 修改 了 
myscope//=>"1ocal" :全 局 命名 空间 搞 乱 了 

















函数 定义 是 可 以 人 套 的 。 由 于 每 个 函数 都 有 它 目 己 的 作用 域 ， 因 此 
会 出 现 几 个 局 部 作用 域 诅 套 的 情况 ， 例 如 : 








var scope="global scope";// 全 局 变量 
function checkscope(){ 

var scope="local scope";// 局 部 变量 
function nested(){ 

var scope="nested scope";// 髓 套 作 用 域内 的 局 部 变量 
return scope;// 返 回 当前 作用 域内 的 值 

} 









































return nested(); 

















} 
checkscope()VV/=>" 抠 套 作用 域 " 








3.10.1 函数 作用 域 和 声明 提前 


在 一 些 类 似 C 语 言 的 编程 语言 中 ， 花 括号 内 的 每 一 段 代 码 都 共有 各 
自 的 作用 域 ， 而 且 变 量 在 声明 它们 的 代码 段 之 外 是 不 可 见 的 ， 我 们 称 为 
块 级 作用 域 (block scope) ， 而 JavaScript 中 没有 块 级 作用 域 。JavaScript 
取而代之 地 使 用 了 函数 作用 域 (function scope) : 变量 在 声明 它们 的 函 
数 体 以 及 这 个 函数 体 藤 套 的 任意 也 函数 体内 都 是 有 定义 的 。 


在 如 下 所 示 的 代码 中 ， 在 不 同位 置 定义 了 变量 i、j 和 k， 它 们 都 在 同 
一 个 作用 域内 一 一 这 三 个 变量 在 函数 体内 均 是 有 定义 的 。 














function test(o){ 

var i=0;//i 在 整个 函数 体内 均 是 有 定义 的 

if(typeof Oo=="object'"){ 

var j=0;//j 在 函数 体内 是 有 定义 的 ， 不 仅仅 是 在 这 个 代码 段 内 

for(var k=0;k 二 10;k++){//k 在 函数 体内 是 有 定义 的 ， 不 仅仅 是 在 循环 内 
console. log(k); // 输 出 数字 和 ~ 9 











} 
console.1log(k);//k 已 经 定义 了 ， 输 出 10 
































} 
console.10g(j);//j 已 经 定义 了 ,但 可 能 没有 初始 化 
} 





JavaScript 的 函数 作用 域 是 指 在 函数 内 声明 的 所 有 变量 在 函数 体内 始 
终 是 可 见 的 。 有 意思 的 是 ， 这 意味 看 变量 在 声明 之 前 甚 全 已 经 可 用 。 
JavaScript 的 这 个 特性 被 非 正 式 地 称 为 声明 提前 〈hoisting) ， 即 
JavaScript 函 数 里 声明 的 所 有 变量 《但 不 涉及 赋值 ) 都 被 “提前 前 "至 至 函数 体 
的 顶部 H， 看 一 下 如 下 代码 ; 

















var scope="global"; 

function f()t{ 

console. log( scope); // 输 出 "undefined"， 而 不 是 "glo 

var scope="local" ; // 变 量 在 这 里 赋 初 始 值 ， 但 变量 析 竹 久 教 体 内 任何 地 方 均 是 有 定义 的 
console. log(scope); // 输 出 "local" 

} 





























你 可 能 会 误 以 为 函数 中 的 第 一 行 会 输出 "global"， 因 为 代码 还 没有 
执行 到 var 语 句 声明 局 部 变量 的 地 方 。 其 实 不 然 ， 由 于 函数 作用 域 的 特 
性 ， 局 部 变量 在 整 2 有 定义 的 ， 也 就 是 说 ， 在 函数 体内 局 
部 变量 诞 关 了 同名 全 局 变量 。 尽早 如 此 ， 只 有 在 程序 执行 到 var 语 句 的 
时 候 ， 局 部 变量 才 会 被 真正 赋值 。 因 此 ， 上 述 过 程 等 价 于 : 将 函数 内 的 
变量 声明 “提前 至 函数 体 顶 部 ， 同 时 变量 初始 化 留 在 原来 的 位 置 














function 千 (){ 

var scope;// 在 函数 顶部 声明 了 局 部 变量 
console.1log(scope);// 变 量 存在 ， 但 其 值 是 "undefined" 
scope="local";// 这 里 将 其 初始 化 并 赋值 
console. 1og(scope)， // 这 里 它 具 有 了 我 们 所 期 望 的 值 
} 

































































在 具有 块 级 作用 域 的 编程 语言 中 ， 在 狭小 的 作用 域 里 让 变量 声明 和 
使 用 变量 的 代码 尽 可 能 靠近 彼此 ， 通常 来 讲 ， 这 是 一 个 非常 不 错 的 编程 

习惯 。 由 于 JavaScript 没 有 块 级 作用 域 ， 因 此 一 些 程序 员 特 意 将 变量 声明 
~ 而 不 是 将 声明 靠近 放 在 使 用 变量 之 处 。 这 种 做 法 使 得 
他 们 的 源 代码 非常 清晰 地 反映 了 真实 的 变量 作用 域 。 


3.10.2 ”作为 属性 的 变量 


当 声 明 一 个 JavaScript 全 局 变量 时 ， 实 际 上 是 定义 了 全 局 对 象 的 一 个 
属性 〈 见 3.5 节 ) 。 当 使 用 var 声 明 一 个 变量 时 ， 创 建 的 这 个 属性 是 不 可 
配置 的 〈 见 6.7 市 ) ， 也 就 是 说 这 个 变量 无 法 通过 delete 运 算 符 删 除 。 可 
能 你 已 经 注意 到 了 ， 如 果 你 没有 使 用 严格 模式 并 给 一 个 未 声明 的 变量 赋 
值 的 话 ，JavaScript 会 自动 创建 一 个 全 局 变量 。 以 这 种 方式 创建 的 变量 是 
全 局 对 象 的 正常 的 可 配 值 属 性 ， 并 可 以 删除 它们 : 














var truevar=1;// 声 明 一 个 不 可 删除 的 全 局 变量 
fakevar=2;// 创 建 全 局 对 象 的 一 个 可 删除 的 属性 
this.fakevar2=3;// 同 上 
delete truevar//=>false :变量 并 没有 被 删除 
delete fakevar//=>true :变量 被 删除 

delete this.fakevar2//=>true: 变 量 被 删除 










































































JavaScript 全 局 变量 是 全 局 对 象 的 属性 ， 这 是 在 ECMAScript 规 范 中 
强制 规定 的 。 对 于 局 部 变量 则 没有 如 此 规定 ， 但 我 们 可 以 想象 得 到 ， 局 
部 变量 当做 跟 函 数 调 用 相关 的 某 个 对 象 的 属性 。ECMAScript 3 规范 称 该 
对 象 为 “调用 对 象 "(call object)，ECMAScript 5 规范 称 为 “声明 上 下 文 对 
象 ”(declarative environment record) 。JavaScript 可 以 允许 使 用 this 关 键 
字 来 引用 全 局 对 象 ， 却 没有 方法 可 以 引用 局 部 变量 中 存放 的 对 象 。 这 种 
存放 局 部 变量 的 对 象 的 特有 性 质 ， 是 一 种 对 我 们 不 可 见 的 内 部 实现 。 然 
We 我 们 会 在 下 一 节 展 开 
WT。 


3.10.3 ”作用 域 链 


JavaScript 是 基于 词法 作用 域 的 语言 : 通过 阅读 包含 变量 定义 在 内 的 
数 行 源码 就 能 知道 变量 的 作用 域 。 全 局 变量 在 程序 中 始终 都 是 有 定义 
。 局 部 变量 在 声明 它 的 疯 数 体内 以 及 其 所 舱 套 的 水 数 内 始终 是 有 定义 
a 


如 果 将 一 个 局 部 变量 看 做 是 自 定义 实现 的 对 象 的 属性 的 话 ， 那 么 可 
以 换个 角度 来 解读 变量 作用 域 。 每 一 段 JavaScript 代 人 码 (全 局 代码 或 函 
数 ) 都 有 一 个 与 之 关联 的 作用 域 链 (scope chain) 。 这 个 作用 域 链 是 一 
个 对 象 列表 或 者 链表 ， 这 组 对 象 定义 了 这 段 代码 “作用 域 中 ”的 变量 。 当 
JavaScript 需 要 查找 变量 x 的 值 的 时 候 〈( 这 个 过 程 称 做 “变量 解 
析 ”(variable resolution) ) ， 它 会 从 链 中 的 第 一 个 对 象 开 始 查 找 ， 如 果 
这 个 对 象 有 一 个 名 为 x 的 属性 ， 则 会 直接 使 用 这 个 属性 的 值 ， 如 果 第 一 
个 对 象 中 不 存在 名 为 x 的 属性 ，JavaScript 会 继续 查找 链 上 的 下 一 个 对 






































象 。 如 果 第 二 个 对 象 依 然 没 有 名 为 x 的 属性 ， 则 会 继续 碍 找 下 一 个 对 
象 ， 以 此 类 推 。 如 果 作 用 域 链 上 没有 任何 一 个 对 象 含有 属性 x， 那 么 就 
认为 这 段 代 码 的 作用 域 链 上 不 存在 x， 并 最 终 抛 出 一 个 引用 错误 


(ReferenceFrror〉 异 常 。 


在 JavaScript 的 最 顶层 代码 中 《也 就 是 不 包 合 在 任何 函数 定义 内 的 代 
码 ) ， 作 用 域 链 由 一 个 全 局 对 象 组 成 。 在 不 包含 租 侠 的 函数 体内 ， 作 用 
域 链 上 有 两 个 对 象 ， 第 一 个 是 定义 函数 参数 和 局 部 变量 的 对 象 ， 第 二 个 
是 全 局 对 象 。 在 一 个 骨 套 的 函数 体内 ， 作 用 域 链 上 至 少 有 三 个 对 象 。 理 
解 对 象 链 的 创建 规则 是 非常 重要 的 。 当 定义 一 个 函数 时 ， 它 实际 上 保存 
一 个 作用 域 链 。 当 调用 这 个 函数 时 ， 它 创建 一 个 新 的 对 象 来 存储 它 的 局 
部 变量 ， 并 将 这 个 对 象 添加 至 保存 的 那个 作用 域 链 上 ， 同 时 创建 一 个 新 
的 更 长 的 表示 函数 调用 作用 域 的 “ 链 ”。 对 于 嵌 套 函数 来 讲 ， 事 情 变 得 更 
加 有 趣 ， 每 次 调用 外 部 函数 时 ， 内 部 函数 又 会 重新 定义 一 忆 。 因 为 每 次 
调用 外 部 函数 的 时 候 ， 作 用 域 链 都 是 不 同 的 。 内 部 函数 在 每 次 定义 的 时 
候 都 有 微妙 的 差别 一 一 在 每 次 调用 外 部 函数 时 ， 内 部 函数 的 代码 都 是 相 
同 的 ， 而 且 关 联 这 段 代 码 的 作用 域 链 也 不 相同 。 


作用 域 链 的 概念 对 于 理解 with 语句 〈 见 5.7.1 节 ) 是 非常 有 帮助 的 ， 
同样 对 理解 闭 包 《〈 见 8.6 节 ) 的 概念 也 全 天 重要 。 


[例如 C 和 Java。 

[2]Java 程 序 员 应 该 很 熟悉 这 种 格式 ， 就 像 他 们 熟悉 双 精 度 〈double) 类 
型 一 样 。 在 C 和 C++ 的 所 有 现代 实现 中 也 都 用 到 了 双 精 度 类 型 。 

[3] 在 JavaScript 的 真实 运行 环境 中 ，0.3-0.2=0.099 999 999 999 999 98。 
[41“ 基 本 多 语种 平面 "(Basic ”Multilingual ”Plane，BMP)， 也 称 “ 零 断 
面 ”(Plan 0), 是 Unicode 中 的 一 个 编码 区 段 。 编 码 介 于 U+0000~ 一 U+FFFF 之 
间 。 

















[5lescape sequence 译 为 “ 转 义 序列 "， 有 时 也 译 成 “ 转 义 字符 ”和 “和 逃 侈 
符 ”， 本 节 中 统一 译 为 “ 转 义 字符 ”。 

[6] 这 里 的 转换 基数 是 指 二 进 制 、 八 进 制 、 十 六 进 制 等 。 

[四 如 果 指 定 的 参数 为 93， 有 效 数 字 位 数 为 4 位 。 

[8] 在 ECMAScript 3 中 ，parseIntO 可 以 对 前 绥 为 "0”( 不 能 
是 "0x" 或 "0X") 的 数字 做 八进制 转换 。 由 于 其 细节 没有 详细 说 明 ， 你 并 
无 法 直接 使 用 parseInt() 来 对 前 级 为 0 的 值 进行 解析 ， 除 非 你 明确 指出 所 

使 用 的 转换 基数 ! 在 ECMAScript 5 中 ，parseInt() 只 有 在 明确 传 入 第 二 个 
参数 8 时 才 会 解析 八进制 数 。 





[9] 这 里 的 原文 是 JavaScript-parsable， 意 指 可 以 通过 JavaScript 的 方法 过 滤 
并 再 做 封装 。 

[0] 对 象 的 toString(0) 方 法 返回 一 个 字符 串 直 接 量 〈 作 者 所 说 的 原始 

值 ) ，JavaScript 将 这 个 字符 串 转换 为 数字 类 型 ， 并 返回 这 个 数字 。 
[1] 编 程 语言 分 为 动态 〈 类 型 ) 语言 和 静态 〈 类 型 ) 语言， 动态 类 型 语 
言 是 指 在 运行 期 间 才 去 做 数据 类 型 检查 的 语言 ， 也 就 是 说， 在 用 动态 类 
型 的 语言 编程 时 ， 永 远 也 不 用 给 任何 变量 指定 数据 类 型 ， 该 语言 会 在 第 
一 次 赋值 给 变量 时 ， 在 内 部 将 数据 类 型 记录 下 来 。Python、Ruby 和 
JavaScript 就 是 典型 的 动态 类 型 语言 。 静 态 类 型 语言 与 动态 类 型 语言 刚好 
相反 ， 它 的 数据 类 型 是 在 编译 其 间 检 查 的 ， 也 就 是 说 在 写 程 序 时 要 声明 
所 有 变量 的 数据 类 型 ，C/C++ 是 静态 类 型 语言 的 典型 代表 ， 其 他 的 静态 
类 型 语言 还 有 C#、JAVA 等 。 

[12]“ 声 明 提 前 ”这 步 操作 是 在 JavaScript 引 擎 的 * 预 编译 ?时 进行 的 ， 是 在 
代码 开始 运行 之 前 ， 更 多 细节 请 阅读 相关 ppt: 
http:/www.slideshare.neUljijing003323/javascript-engine。 





























第 4 章 ”表达 式 和 运算 符 

表达 式 (expression) JavaScript 中 的 一 个 短语 ，JavaScript 解 释 器 会 
将 其 计算 (evaluate〉 出 一 个 结果 。 程 序 中 的 常量 是 最 简单 的 一 类 表达 
式 。 变 量 名 也 是 一 种 简单 的 表达 式 ， 它 的 值 就 是 赋值 给 变量 的 值 。 复 杂 
表达 式 是 由 简单 表达 式 组 成 的 。 比 如 ， 数 组 访问 表达 式 是 由 一 个 表示 数 
组 的 表达 式 、 左 方 括号 、 一 个 整数 表达 式 和 右 方 括号 构成 。 它 们 所 组 成 
的 新 的 表达 式 的 运算 结果 是 该 数组 的 特定 位 置 的 元 素 值 。 同 样 的 ， 函 数 
Li 

















将 简单 表达 式 组 合成 复杂 表达 式 最 常用 的 方法 就 是 使 用 运算 符 
Coperator) 。 运 算 符 按照 特定 的 运算 规则 对 操作 数 〈 通 名 是 两 个 ) 进 

行 运算 ， 并 计算 出 新 值 。 乘 法 运算 符 “*” 是 比较 简单 的 例子 。 表 达 式 x*y 
是 对 两 个 变量 表达 式 x 和 y 进 行 运算 并 得 出 结果 。 有 时 我 们 更 愿意 说 运算 
符 返 回 了 一 个 值 而 不 是 “计算 ”出 了 一 个 值 。 

本 章 将 讲解 所 有 的 JavaScript 运 算 符 ， 同 时 也 讲解 不 涉及 运算 符 的 表 
达 式 《比如 访问 数组 元 素 和 函数 调用 ) 。 如 果 你 熟悉 C 语 法 风格 的 其 他 
编程 语言 ， 你 会 发 现 大 多 数 JavaScript 表 达 式 和 运算 符 都 似曾相识 。 

4.1 原始 表达 式 

最 简单 的 表达 式 是 “原始 表达 式 ”(primary expression) 。 原 始 表 达 
式 是 表达 式 的 最 小 单位 它们 不 再 包含 其 他 表达 式 。JavaScript 中 的 原 
始 表 达 式 包含 常量 或 直接 量 、 关 键 字 和 变量 。 

直接 量 是 直接 在 程序 中 出 现 的 常数 值 。 它 们 看 起 来 像 : 






































1.23// 数 字 直 接 量 
"hello"// 字 符 串 直接 量 
/pattern/// 正 则 表达 式 直 接 量 












































JavaScript 数 字 直 接 量 的 语法 在 3.1 节 已 经 做 了 讲解 。 字 符 串 直接 量 
在 3.2 节 做 了 讲解 。 正 则 表达 式 直 接 量 语法 在 3.2.4 节 做 了 简单 介绍 ， 在 
第 10 章 将 做 专门 讲解 。 


JavaScript 中 的 一 些 保 留 字 构成 了 原始 表达 式 : 

















true// 返 回 一 个 布尔 值 ， 真 
false// 返 回 一 个 布尔 值 : 假 
null// 返 回 一 个 值 ， 空 
this// 返 回 "当前 "对 象 























我 们 在 3.3 节 和 3.4 节 中 学 习 了 true、false 和 null。 和 其 他 关键 字 不 
同 ，this 并 不 是 一 个 常量 ， 它 在 程序 的 不 同 地 方 返回 的 值 也 不 相同 。this 
关键 字 经 常 在 面向 对 象 编程 中 出 现 。 在 一 个 方法 体内 ，this 返 回调 用 这 
0 
详细 信息 。 


最 后 ， 第 三 种 原始 表达 式 是 变量 : 














i// 返 回 变 量 i 的 值 
sum// 返 回 sum 的 值 
undefined//undefined 是 全 局 变量 ， 和 null 不 同 ， 它 不 是 一 个 关键 字 



































当 JavaScript 代 码 中 出 现 了 标识 符 ，JavaScript 会 将 其 当做 变量 而 去 
查找 它 的 值 。 如 果 变 量 名 不 存在 ， 表 达 式 运算 结果 为 undefined。 然 而 ， 
在 ECMAScript 5 的 严格 模式 中 ， 对 不 存在 的 变量 进行 求 值 会 抛 出 一 个 引 


用 错误 异常 。 
4.2 对象 和 数组 的 初始 化 表达 式 


对 象 和 数组 初始 化 表达 式 实 际 上 是 一 个 新 创建 的 对 象 和 数组 。 这 些 
初始 化 表达 式 有 时 称 做 “对 象 直接 量 * 和 “数组 直接 量 *"。 然 而 和 布尔 直接 
量 不 同 ， 它 们 不 是 原始 表达 式 ， 因 为 它们 所 包含 的 成 员 或 者 元 素 都 是 子 
表达 式 。 数 组 初始 化 表达 式 语法 非 第 简单， 我 们 以 此 开始 。 


数组 初始 化 表达 式 是 通过 一 对 方 括号 和 其 内 由 去 号 隔 开 的 列表 构成 
a J 数组 的 元 素 是 逗号 分 隔 的 表达 
工 J] 人 : 





















































[]// 一 个 空 数 组 [] 内 留 空 即 表示 该 数组 没有 任何 元 素 
[1+2, 3+4]// 拥 有 两 个 元 素 的 数组 ， 第 一 个 是 3， 第 二 个 是 7 











数组 初始 化 表达 式 中 的 元 素 初 始 化 表达 式 也 可 以 是 数组 初始 化 表达 
式 。 也 就 是 说 ， 这 些 表 达 式 是 可 以 组 套 的 : 


var matrix=[[1,2,3],[4,5,6],[7,8,9]]; 


JavaScript 对 数组 初始 化 表达 式 进 行 求 值 的 时 候 ， 数 组 初始 化 表达 式 
中 的 元 素 表 达 式 也 都 会 各 上 自 计算 一 次 。 也 束 是 说 ， 数 组 初始 化 表达 式 每 
次 计算 的 值 有 可 能 是 不 同 的 。 


数组 直接 量 中 的 列表 逗号 之 间 的 元 素 可 以 省 略 ， 这 时 省 略 的 空位 会 
填充 值 undefined。 例 如 ， 下 面 这 个 数组 包含 5 个 元 素 ， 其 中 三 个 元 素 是 
undefined: 








var sparseArray=[1,,,,5]; 








数组 直接 量 的 元 素 列表 结尾 处 可 以 留 下 单个 人 召 写 ， 这 时 并 不 会 创建 
一 个 新 的 值 为 undefined 的 元 素 。 


对 象 初始 化 表达 式 和 数组 初始 化 表达 式 非常 类 似 ， 只 是 方 括 号 被 花 
括 写 代 谷 ， 并 且 每 个 子 表达 式 都 包含 一 个 属性 名 和 一 个 冒号 作为 前 级 : 























Var p={X:2.3,y:-1.2};// 一 个 拥有 两 个 属性 成 员 的 对 象 
var gq=;// 一 个 空 对 象 
q .X=2.3;q.y=-1.2;//q 的 属性 成 员 和 p 的 一 样 























对 象 直接 量 也 可 以 租 套 ， 比 如 : 


var rectangle={upperLeft:{x:2,y:2}, 
JowerRight:{x:4,y:5}}; 


JavaScript 求 对 象 初始 化 表达 式 的 值 的 时 候 ， 对 象 表达 式 也 都 会 各 上 自 
计算 一 次 ， 并 且 和 它们 不 必 包 含 癌 数值 : 它们 可 以 是 任意 JavaScript 表 达 
式 。 同 样 ， 对 象 直 接 量 中 的 属性 名 称 可 以 是 字符 串 而 不 是 标识 符 〈 这 在 
那些 只 能 使 用 保留 字 或 一 些 非 法 标识 符 作 为 属性 名 的 地 方 非 常 有 用 ) : 








Var side=1; 
var square={"upperLeft":{x:p.x,y:p.y}, 


'lowerRight':{x:p.xt+side,y:p.yt+side}}; 








第 6 章 和 第 7 章 会 再 次 讨论 对 象 和 数组 的 初始 化 表达 式 。 
4.3 函数 定义 表达 式 


函数 定义 表达 式 定 义 一 个 JavaScript 函 数 。 表 达 式 的 值 是 这 个 新 定义 
的 函数 。 从 某 种 意义 上 讲 ， 函 数 定义 表达 式 可 称 为 “函数 直接 量 ”， 毕 竟 
对 象 初 始 化 表达 式 也 称 为 "对象 直 接 量 ”。 一 个 典型 的 函数 定义 表达 式 包 
舍 关 键 字 function， 跟 随 其 后 的 是 一 对 圆 括 号 ， 插 号 内 是 一 个 以 逗号 分 
割 的 列表 ， 列 表 含 有 0 个 或 多 个 标识 符 “〈 人 参数 名 ) ， 人 然后 再 跟随 一 个 由 
花 括 号 包 庄 的 JavaScript 代 码 段 〈 函 数 体 ) ， 例 如 : 














// 这 个 函数 返回 传 入 参数 值 的 平方 


var square=function(x){return x*x,;} 





函数 定义 表达 式 同样 可 以 包含 函 数 的 名 字 。 函 数 也 可 以 通过 函数 语 
句 来 定义 ， 而 不 是 函数 表达 式 。 更 多 详情 会 在 第 8 章 中 讨论 。 


4.4 属性 访问 表达 式 


属性 访问 表达 式 运 算得 到 一 个 对 象 属性 或 一 个 数组 元 素 的 值 。 
JavaScript 为 属性 访问 定义 了 两 种 语法 : 








expression.identifer 
expression[expression] 








一 种 写法 是 一 个 表达 式 后 跟随 一 个 句点 和 标识 符 。 表 达 式 指定 对 
象 ， 标 识 符 则 指定 需要 访问 的 属性 的 名 称 。 第 二 种 写法 是 使 用 方 括号 ， 
方 括号 内 是 为 外 一 个 表达 式 (这 种 方法 适用 于 对 象 和 数组 ) 。 i he 
达 式 指定 要 访问 的 属性 的 名 称 或 者 代表 要 访问 数组 元 素 的 索引 。 这 里 有 
一 些 具体 的 例子 : 





Var 0={X:1,y:{z:3}};// 一 个 示例 对 象 

var a=[0,4,[5,6]];// 一 个 包含 这 个 对 象 的 示例 数组 
0.x//=>1: 表达 式 0 的 x 属 性 
0.y， z//=>3:;: 表 达 式 o.y 的 z 属 性 
o["x"]//=>1: 对 象 o 的 x 属 性 











a[1]//=>4;: 表 达 式 a 中 索引 为 1 的 元 素 
a[2]["1"]//=>6: 表 达 式 a[2] 中 索引 为 1 的 元 素 
a[9].,x//=>1: 表 达 式 a[9] 的 x 属 性 





不 管 使 用 哪 种 形式 的 属性 访问 表达 式 ， 在 “.” 和 “[” 之 前 的 表达 式 总 
是 会 首先 计算 。 如 果 计算 结果 是 null 或 者 undefined， 表 达 式 会 抛 出 一 个 
类 型 错误 寞 第 ， 因 为 这 两 个 值 都 不 能 包含 任意 属性 。 如 果 运 算 结果 不 是 
对 象 ( 或 者 数组 ) ，JavaScript 会 将 其 转换 为 对 象 ( 参 考 3.6 往 ) 。 如 来 
对 象 表 达 式 后 跟随 句点 和 标识 符 ， 则 会 但 找 由 这 个 标识 符 所 指定 的 属性 
的 值 ， 并 将 其 作为 整个 表达 式 的 值 返 回 。 如 果 对 象 表达 式 后 跟随 一 对 方 
括号 ， 则 会 计算 方 括号 内 的 表达 式 的 值 并 将 它 转换 为 字符 串 。 不 论 哪 种 
情况 ， 如 果 命 名 的 属性 不 存在 ， 那 么 整个 属性 访问 表达 式 的 值 就 是 


undefined。 


显然 .identifier 的 写法 更 加 简单 ， 但 需要 注意 的 是 ， 这 种 方式 只 适用 
于 要 访问 的 属性 名 称 是 合法 的 标识 符 ， 并 且 需 要 知道 要 访问 的 属性 的 名 
字 。 如 果 属 性 名 称 是 一 个 保留 字 或 者 包含 空格 和 标点 符号 ， 或 是 一 个 数 
字 【〈 对 于 数组 来 说 ) ， 则 必须 使 用 方 括号 的 写法 。 当 属性 名 是 通过 运算 
人 
参照 6.2.1 节 ) 。 


对 象 和 其 属性 的 细 市 会 在 第 6 章 涵盖 。 数 组 及 其 元 素 会 在 第 7 章 讲 
述 。 
4.5 调用 表达 式 

JavaScript 中 的 调用 表达 式 (invocation expression) 是 一 种 调用 (或 
者 执行 ) 函数 或 方法 的 语法 表示 。 它 以 一 个 函数 表达 式 开 始 ， 这 个 函数 


表达 式 指 代 了 要 调用 的 函数 。 函 数 表达 式 后 跟随 一 对 圆 括号 ， 括 号 内 是 
一 个 以 逗号 隔 开 的 参数 列表 ， 参 数 可 以 有 0 个 也 可 有 多 个 ， 例 如 : 
































f(0)//f 是 一 个 函数 表达 式 ; 0 是 一 个 参数 表达 式 
Math.max(x,y,z)//Math.max 是 一 个 函数 ;x, y 和 z 是 参数 
a.sort()//a.sort 是 一 个 函数 ， 它 没有 参数 

















当 对 调用 表达 式 进行 求 值 的 时 候 ， 首 先 计 算 函 数 表达 式 ， 然 后 计算 
参数 表达 式 ， 得 到 一 组 参数 值 。 如 末 函 数 表达 式 的 值 不 是 一 个 可 调用 的 
对 象 ， 则 抛 出 一 个 类 型 错误 异常 《所 有 的 函数 都 是 可 调用 的 ， 即 使 宿主 


对 象 不 是 函数 它 也 有 可 能 被 调用 ， 这 里 的 区 别 将 在 8.7.7 市 讲述) 。 然 
后 ， 实 参 的 值 被 依次 赋值 给 形 参 ， 这 些 形 参 是 定义 函数 时 指定 的 ， 号 下 
来 开始 执行 函数 体 。 如 果 函 数 使 用 return 语 名 给 出 一 个 返回 值 ， 那 么 这 
个 返回 值 就 是 整个 调用 表达 式 的 值 。 人 否则 ， 调 用 表达 陈 的 值 就 是 
undefined。 函 数 调 用 一 一 包括 当 形 参 表达 式 的 个 数 和 函数 定义 中 实 参 的 
个 数 不 匹 配 的 时 候 的 运行 情况 一 一 的 细节 将 会 在 第 8 章 详 细 讨 论 。 


任何 一 个 调用 表达 式 都 包含 一 对 圆 括号 和 左 圆 括号 之 前 的 表达 式 。 
如 果 这 个 表达 式 是 一 个 属性 访问 表达 式 ， 那 么 这 个 调用 称 做 “方法 调 
用 ”(method invocation) 。 在 方法 调用 中 ， 执 行 函数 体 的 时 候 ， 作 为 属 
性 访问 主题 页 的 对 象 和 数组 便 是 其 调用 方法 内 this 的 指向 。 这 种 特性 使 得 
在 面 同 对 象 编程 范例 中 ， 函 数 ( 其 OO 名 称 为 “方法 *”)〉 可 以 调用 其 答 主 
对 象 。 参 照 第 9 章 以 获取 更 相信 的 信息 。 


并 不 是 方法 调用 的 调用 表达 式 通常 使 用 全 局 对 象 作 为 this 关 键 字 的 
值 。 然 而 在 ECMAScript 5 中 ， 那 些 通过 严格 模式 定义 的 函数 在 调用 时 将 
使 用 undefined 作 为 this 的 值 ，this 不 会 指向 全 局 对 象 。 参 照 5.7.3 节 以 获得 
更 多 关于 严格 模式 的 信息 。 


4.6 ”对 象 创建 表达 式 


对 象 创建 表达 式 (object creation expression) 创建 一 个 对 象 并 调用 

一 个 函数 (这 个 函数 称 做 构造 函数 ) 初始 化 新 对 象 的 属性 。 对 象 创建 表 

i 只 是 对 和 象 创建 表达 翅 之 前 多 了 一 个 关 
字 new: 

















new Object() 
new Point(2,3) 


如 末 一 个 对 象 创建 表达 式 不 需要 传 入 任何 参数 给 构造 阔 数 的 话 ， 那 
这 对 空 加 括号 是 可 以 省 上 略 挥 的 : 


new Object 
new Date 





当 计 算 一 个 对 象 创建 表达 式 的 值 时 ， 和 对 象 初始 化 表达 式 通 过 {} 创 
建 对 象 的 做 法 一 样 ，JavaScript 首 先 创建 一 个 新 的 空 对 象 ， 然 后 ， 


JavaScript 通 过 传 入 指定 的 参数 并 将 这 个 新 对 象 当 做 this 的 值 来 调用 一 个 
指定 的 函数 。 这 个 函数 可 以 使 用 this 来 初始 化 这 个 新 创建 对 象 的 属性 。 

那些 被 当成 构造 函数 的 函数 不 会 返回 一 个 值 ， 并 且 这 个 新 创建 并 被 初始 
化 后 的 对 象 束 是 整个 对 象 创建 表达 式 的 值 。 如 果 一 个 构造 函数 确实 返回 
本 一 个 对 象 值 ， 那 么 这 个 对 象 束 作 为 整个 对 象 创建 表达 式 的 值 ， 而 新 创 
建 的 对 象 就 废弃 了 。 


构造 函数 的 细节 将 在 第 9 章 讲述 。 
4.7 ”运算 符 概 述 


JavaScript 中 的 运算 符 用 于 算术 表达 式 、 比 较 表 达 式 、 逻 辑 表 达 式 、 
Cn 
J 参照。 


需要 注意 的 是 ， 大 多 数 运 算 符 都 是 由 标点 符号 表示 的 ， 比 
如 “+” 和 “=”。 而 男 外 一 些 运算 符 则 是 由 关键 字 表 示 的 ， 比 如 delete 和 
instanceof。 关 键 字 运算 符 和 标点 符号 所 表示 的 运算 符 一 样 都 是 正规 的 运 
算 符 ， 它 们 的 语法 都 非常 言 简 意 几 。 


表 4-1 是 按照 运算 符 的 优先 级 排序 的 ， 前 面 的 运算 符 优 先 级 要 高 于 
后 面 的 运算 符 优 先 级 。 被 水 平分 割 线 分 隅 开 来 的 运算 符 具 有 不 同 的 优先 
级 。 标 题 为 A 的 列表 示 运 算得 的 结合 性 ，L (从 左 至 右 ) 或 R〈 从 石 至 
左 ) ， 标 题 为 N 的 列表 示 操 作 数 的 个 数 。 标 题 为 “类 型 * 的 列表 示 期 望 的 
操作 数 类 型 ， 以 及 运算 符 的 结果 类 型 (在 “-” 符 号 之 后 ) 。 表 4-1 之 后 
的 段落 会 解释 优先 级 、 结 合 性 和 操作 数 类 型 的 概念 。 表 4-1 只 对 运算 符 
做 单独 讨论 。 














表 4-1: JavaScript 运算 符 

















运算 符 操作 A N 类 型 
主 前 /后 增 量 R 1 lvala 一 num 
前 /后 减 量 R 1 lval 一 num 
> 求 反 R 1 num 一 num 
转换 为 数字 R 1 num 一 num 
按 位 求 反 R 1 int 一 int 
! 迎 辑 非 R 1 bool 一 bool 
delete 删除 属性 R 1 jlval 一 bool 
typeof 检测 操作 数 类 型 R 1 any 一 str 
void 返回 undefined 值 R 1 any 一 undef 
本， 这 考 乘 ， 除 ， 求 余 L 2 num,num— num 
一 加 ， 减 L 2 num,num 一 num 
字符 串 连 接 L 2 str,str—str 
<< 左 移 位 L 2 int,int 一 int 
>> 有 符号 右 移 L 2 int,int—int 
>>> 无 符号 右 移 L 2 int,int—int 
<、<=、>、>= 比较 数字 顺序 L 2 -num,num—bool 
<、<=、>、》>= 比较 在 字母 表 中 的 顺序 L 2 str,str—bool 
instanceof 测试 对 象 类 L 2 obj,func—bool 
in 测试 属性 是 否 存在 L 2 str,obj—bool 
== 判断 相等 L 2 any,any—bool 
!= 判断 不 等 L 2 any,any—bool 
=== 判断 恒 等 L 2 any,any—bool 
l== 判断 非 恒 等 L 2 any,any—bool 
& 按 位 与 L 2 int,int—int 
A 按 位 异 或 L 2 int,int 一 int 
| 按 位 或 L 2 ijint,int 一 int 
8 逻辑 与 L 2 anyany 一 any 
|| 逻辑 或 L 2 any,any—any 
3: 条 件 运算 符 R 3 bool,any,any—any 
= 变量 赋值 或 对 象 属性 赋值 R 2 lvalany 一 any 
Wa =、 运算 且 赋 值 R 2 lvalany 一 any 
As | Ra 33=, $= 
， 忽略 第 一 个 操作 数 ， L 2 any'any 一 any 


返回 第 二 个 操作 数 


Oz lval 是 left-value 的 简写 ， 意 思 是 “ 左 值 ”。 


4.7.1 操作 数 的 个 数 


运算 符 可 以 根据 其 操作 数 的 个 数 进行 分 类 。JavaScript 中 的 大 多 数 运 
算 符 《比如 “*” 乘 法 运算 从) 是 一 个 二 元 运算 符 (binary operator) ， 将 
两 个 表达 式 合并 成 一 个 稍 复杂 的 表达 式 。 换 言 之 ， 它 们 的 操作 数 均 是 两 
个 。JavaScript 同 样 文 持 一 些 一 元 运算 符 〈unary operator) ， 它 们 将 一 个 
表达 式 转换 为 另 一 个 稍 复杂 的 表达 式 。 表 达 式 -x 中 的 “- ”运算 符 就 是 一 个 
一 元 运算 符 ， 是 将 操作 数 x 求 负 值 。 最 后 ，JavaScript 支 持 一 个 三 元 运算 
从 (ternary operator) ， 条 件 判 断 运 算 符 “?:*"， 它 将 三 个 表达 式 合并 成 一 
让 家 这 二 


4.7.2 ”操作 数 类 型 和 结果 类 型 


一 些 运算 符 可 以 作用 于 任何 数据 类 型 ， 但 仍然 希望 它们 的 操作 数 是 
指定 类 型 的 数据 ， 并 且 大 多 数 运算 符 返 回 (或 计算 出 ) 一 个 特定 类 型 的 
值 。 在 表 4-1 标 题 为 类 型 > 的 列 中 列 出 了 运算 符 操 作 数 的 类 型 “箭头 
前 ) 和 运算 结果 的 类 型 〈 稍 头 后 ) 。 


JavaScript 运 算 符 通 常会 根据 需要 对 操作 数 进 行 类 型 转换 (参照 3.8 
节 ) 。 乘 法 运算 符 “*” 希 望 操 作 数 为 数字 ， 但 表达 式 "3"*"5" 却 是 合法 
的 ， 因 为 JavaScript 会 将 操作 数 转 换 为 数字 。 这 个 表达 式 的 值 是 数字 15， 
而 不 是 字符 串 “15”。 之 前 也 提 到 过 ，JavaScript 中 的 所 有 值 不 是 真 值 就 是 
假 值 ， 因 此 对 于 那些 希望 操作 数 是 布尔 类 型 的 操作 符 来 说 ， 它 们 的 操作 
数 可 以 是 任意 类 型 。 


有 一 些 运算 符 对 操作 数 类 型 有 着 不 同 程度 的 依赖 。 最 明显 的 例子 是 
加 法 运算 符 ,，“+” 运 算 符 可 以 对 数字 进行 加 法 运算 ， 也 可 以 对 字符 串 作 
连接 。 同 样 ， 比 如 “<”* 比 较 运 算 符 可 以 根据 操作 数 类 型 的 不 同 对 数字 进 
行 大 小 值 的 比较 ， 也 可 以 比较 字符 在 字母 表 中 的 次 序 先后 。 单 个 运算 符 
了 它们 对 类 型 有 着 怎样 的 依赖 以 及 对 操作 数 进行 怎样 的 
-人 二 o 


4.7.3 左 值 
你 可 能 会 注意 到 ， 表 4-1 中 的 赋值 运算 符 和 其 他 少数 运算 符 期 望 它 


们 的 操作 数 是 lval 类 型 。 左 值 (lvalue) 是 一 个 古老 的 术语 ， 它 是 指 “ 表 
达 式 只 能 出 现在 赋值 运算 符 的 左 侧 ”。 在 JavaScript 中 ， 变 量 、 对 象 属性 











和 数组 元 素 均 是 左 值 。ECMAScript 规 范 人 允许 内 置 函数 返回 一 个 左 值 ， 
但 自 定义 的 函数 则 不 能 返回 左 值 。 


4.7.4 运算 符 的 副作用 


计算 一 个 简单 的 表达 式 〈 比 如 2*3) 不 会 对 程序 的 运行 状态 造成 任 
何 影响 ， 程 序 后 续 执 行 的 计算 也 不 会 受到 该 计算 的 影响 。 而 有 一 些 表 达 
式 则 具有 很 多 副作用 ， 前 后 的 表达 式 运 算 会 相互 影响 。 赋 值 运算 符 是 最 
明显 的 一 个 例子 : 如 果 给 一 个 变量 或 属性 赋值 ， 那 么 那些 使 用 这 个 变量 
或 属性 的 表达 式 的 值 都 会 发 生 改 变 。“++” 和 “--” 递 增 和 递减 运算 符 与 此 
类 似 ， 因 为 它们 包含 隐 : 式 的 赋值 。 delete 运 算 符 同样 有 副作用 : 删除 一 
个 属性 就 像 〈 但 不 完全 一 样 ) 给 这 个 属性 赋值 undefined。 


其 他 的 JavaScript 运 算 符 都 没有 副作用 ， 但 函数 调用 表达 式 和 对 象 创 
建 表达 式 有 些 特别 ， 在 函数 体 或 者 构造 函数 内 部 运用 了 这 些 运算 符 并 产 
我 们 说 函数 调用 表达 式 和 对 象 创建 表达 式 是 有 副 作 














4.7.5 ”运算 符 优先 级 


表 4-1 中 所 示 的 运算 符 是 按照 优先 级 从 高 到 低 排序 的 ， 每 个 水 平分 
制 线 内 的 一 组 运算 符 具 有 相同 的 优先 级 。 运 算 符 优先 级 控制 着 运算 符 的 
执行 顺序 。 .7 从 《表格 的 顶部 的 执行 总 古 先 于 优先 级 低 
《表格 的 底部 ) 的 运算 符 


看 一 下 下 面 这 个 表达 式 ; 





W=X+y*Z; 





乘法 运算 符 “*” 比 加 法 运算 符 “+” 上 共有 更 高 的 优先 级 ， 所 以 乘法 先 执 
行 ， 加 法 后 执行 。 然 后 ， 由 于 赋值 运算 符 “=” 具 有 最 低 的 优先 级 ， 因 此 
赋值 操作 是 在 右 侧 的 表达 式 计算 出 结果 后 进行 的 。 


运算 符 的 优先 级 可 以 通过 显 式 使 用 圆 括号 来 重 写 。 为 了 让 加 法 和 匈 执 
行 ， 乘 法 后 执行 ， 可 以 这 样 写 : 








w=(Xx+y)*z; 


需要 注意 的 是 ， 属 性 访问 表达 式 和 调用 表达 式 的 优先 级 要 比 表 4-1 
中 列 出 的 所 有 运算 符 都 要 高 。 看 一 下 这 个 例子 : 


typeof my.functions[x](y) 





尽管 typeof 是 优先 级 最 高 的 运算 符 之 一 ， 但 typeof 也 是 在 两 次 属性 访 
问 和 函数 调用 之 后 执行 的 。 


实际 上 ， 如 果 你 真 的 不 确定 你 所 使 用 的 运算 符 的 优先 级 ， 最 简单 的 
方法 就 是 使 用 圆 括号 来 强行 指定 运算 次 序 。 有 些 重 要 规则 需要 熟 记 : 乘 
法 和 除法 的 优先 级 高 于 加 法 和 减法 ， 赋 值 运 算 的 优先 级 非常 低 ， 通 党 总 
是 最 后 执行 的 。 

4.7.6 运算 符 的 结合 性 

在 表 4-1 中 标题 为 A 的 列 说 明了 运算 符 的 结合 性 。 工 指 从 左 至 右 结 

合 ，R 指 从 右 至 左 结 合 。 结 合 性 指定 了 在 多 个 具有 同样 优先 级 的 运算 符 


表达 式 中 的 运算 顺序 。 从 左 至 右 古 指 运 算 的 执行 是 按照 由 左 到 右 的 顺序 
进行 。 例 如 ， 减 法 运算 符 具 有 从 左 至 右 的 结合 性 ， 因 此 : 





























w=x-y-2; 
和 这 段 代码 一 模 一 样 : 

w=( (XYy)-z); 

反 过 来 讲 ， 下 面 这 个 表达 式 : 


X= 人 一 -y， 
W=X=y=Z/ 
d=a?b:c?d:e?f:g,; 


和 这 段 代 码 一 模 一 样 : 


x= 一 (-y);w=(x=(y=z));q= 


a?b:(c?d:(e?f:g)); 








因为 一 元 操作 符 、 赋 值 和 三 元 条 件 运 算 符 都 具有 从 右 至 左 的 结合 


4.7.7 ”运算 顺序 


运算 符 的 优先 级 和 结合 性 规定 了 它们 在 复杂 的 表达 式 中 的 运算 顺 
序 ， 但 并 没有 规定 子 表 达 式 的 计算 过 程 中 的 运算 顺序 。JavaScript 总 是 严 
格 按照 从 左 至 右 的 顺序 来 计算 表达 式 。 例 如 ， 在 表达 式 w=x+y*z 中 ， 将 
首先 计算 子 表达 式 w， 然 后 计算 x、y 和 z， 然 后 ，y 的 值 和 z 的 值 相 乘 ， 再 
加 上 x 的 值 ， 最 后 将 其 赋值 给 表达 式 w 所 指 代 的 变量 或 属性 。 给 表达 式 
添加 圆 括号 将 会 改变 乘法 、 加 法 和 赋值 运算 的 关系 ， 但 从 左 至 右 的 顺序 
是 不 会 改变 的 。 


只 有 在 任何 一 个 表达 式 具有 副作用 而 影响 到 其 他 表达 式 的 时 候 ， 其 
求 值 顺序 才 会 和 看 上 去 有 所 不 同 。 如 果 表 达 式 x 中 的 一 个 变量 自 增 1， 这 
个 变量 在 表达 式 z 中 使 用 ， 那 么 实际 上 是 先 计 算出 了 x 的 值 再 计算 z 的 
值 ， 这 一 点 非常 重要 凯 。 


4.8 算术 表达 却 


本 市 涵盖 了 那些 进行 算术 计算 的 运算 从， 以 及 对 操作 数 的 算术 操 
作 。 乘 法 、 除 法 和 减法 运算 符 非 党 简单， 我 们 首先 讲解 它们 。 加 法 运算 
符 单独 占 一 节 ， 因 为 加 法 同样 可 以 做 字符 串 连 接 操作 ， 并 且 其 类 型 转换 
有 些 特殊 。 一 元 运算 符 和 位 运算 符 同样 在 单独 的 两 节 中 会 讲 到 。 


基本 的 算术 运算 符 是 * (乘法 ) 、/【〔( 除 法 ) 、% ( 求 余 ) 、+ (加 
法 ) 和 -( 减 法) 。 我 们 会 在 随后 有 专门 一 节 讲 述 “+” 运 算 符 。 剩 下 的 4 
个 运算 符 非 常 简单 ， 只 是 在 必要 的 时 候 将 操作 数 转 换 为 数字 而 已 ， 然 后 
求 积 、 商 、 余 数 和 差 。 所 有 那些 无 法 转换 为 数字 的 操作 数 都 转换 为 NaN 
值 。 如 果 操 作 数 (或 者 转换 结果 )〉 是 NaN 值 ， 算 术 运 算 的 结果 也 是 
NaN 。 


运算 符 “/" 用 第 二 个 操作 数 来 除 第 一 个 操作 数 ， 如 果 你 使 用 过 那些 区 


分 整 型 和 浮 点 型 数字 的 编程 语言 ， 那 么 当 用 一 个 整数 除 以 另 一 个 整数 
时 ， 则 希望 得 到 的 结果 也 是 整数 。 但 在 JavaScript 中 ， 所 有 的 数字 都 是 浮 





























扩 型 的 ， 除 法 运算 的 结果 也 是 浮 扣 型 ， 比 如 ，5/2 的 结果 是 2.5， 而 不 是 
2。 除 数 为 0 的 运算 结果 为 正 无 穷 大 或 负 无 穷 大 ， 而 0/0 的 结果 是 NaN， 所 
有 这 些 运算 均 不 会 报错 。 


运算 符 “%?” 计 算 的 是 第 一 个 操作 数 对 第 二 个 操作 数 的 模 钙 。 换 句 话 
说 ， 就 是 第 一 个 操作 数 除 以 第 二 个 操作 数 的 余数 。 结 果 的 符号 和 第 一 个 
操作 数 〈 被 除数 ) 的 符号 保持 一 致 。 例 如 ，59%2 结 果 是 1，-5%2 的 结 


是 -1。 


求 余 运算 和 从 的 操作 数 通 常 都 是 整数 ， 但 也 适用 于 浮 点 数 ， 比 如 ， 
6.5%2.1 结 果 是 0.2。 





4.8.1 “+” 运 算 符 
人 
操作 : 


1+2//= 二 3 
"hello"+""+"there"//=>"hello there" 
mA" 2 /=>"12" 





当 两 个 操作 数 都 是 数字 或 都 是 字符 串 的 时 候 ， 计 算 结果 古 显而易见 
的 。 然 而 对 于 其 他 情况 来 说 ， 则 要 进行 一 些 必要 的 类 型 转换 ， 并 且 运 算 
符 的 行为 依赖 于 类 型 转换 的 结果 。 加 号 的 转换 规则 优先 考虑 字符 串 连 
接 ， 如 末 其 中 一 个 操作 数 是 字符 串 或 者 转换 为 字符 串 的 对 象 ， 男 外 一 个 
操作 数 将 会 转换 为 字符 串 ， 加 法 将 进行 字符 串 的 连接 操作 。 如 果 两 个 操 
作 数 都 不 是 类 字符 串 (string-like〉 的 ， 那 么 都 将 进行 算术 加 法 运算 。 


从 技术 上 讲 ， 加 法 操作 符 的 行为 表现 为 : 


.如 果 其 中 一 个 操作 数 是 对 象 ， 则 对 象 会 遵循 对 象 到 原始 值 的 转换 
规则 转换 为 原始 类 值 〈 参 照 3.8.3 节 ) : 日 期 对 象 通过 toString0 方 法 执行 
转换 ， 其 他 对 象 则 通过 valueOfO 方 法 执行 转换 〈 如 果 valueOfO 方 法 返回 
一 个 原始 值 的 话 ) 。 由 于 多 数 对 象 都 不 具备 可 用 的 valueOfO 方 法 ， 因 此 
它们 会 通过 toString() 方 法 来 执行 转换 。 


-在 进行 了 对 象 到 原始 值 的 转换 后 ， 如 下 其 中 一 个 操作 数 是 字符 串 
的 话 ， 为 一 个 操作 数 也 会 转换 为 字符 串 ， 然 后 进行 字符 串 连接 。 


相册 两 个 操作 数 都 将 转换 为 数字 (或 者 NaN) ， 然 后 进行 加 法 
天 上 。 


这 里 有 一 些 例子 : 








1+2//= >3 :加 法 
"1"+"2"7V/=>"120 ;字符 串 连接 

"1"+2/V/=>"120 :数字 转换 为 字符 串 后 进行 字符 串 连 接 
1+{}//=>"1[object Object]" :对 象 转换 为 字符 串 后 进行 字符 串 连接 
true+true//=>2: 布 尔 值 转换 为 数字 后 做 加 法 
2+nulL1LVV/=>2:nul11 转 换 为 9 后 做 加 法 
2+undefined//=>>NaN:undefined 转 换 为 NaN 后 做 加 法 
























































最 后 ， 第 要 特别 注意 的 是 ， 当 加 号 运算 符 和 学 符 串 和 数学 一 起 使 用 
时 ， 需 要 考虑 加 法 的 结合 性 的 对 运算 顺序 的 影响 。 也 惑 是 说 ， 运 算 结果 
征 依赖 于 运算 符 的 运算 顺序 的 ， 比 如 : 








1+2+"blind mice";//=>"3 blind mice" 
1+(2+"blind mice");//=>"12 blind mice" 








一 行 没有 圆 括号 , “+? 运 算 符 具 有 从 大 至 右 的 结合 性 ， 因 此 两 个 
数字 首先 进行 加 法 计算 计算 结果 和 字符 串 进行 连接 。 在 第 二 行 中 ， 
括号 改变 了 运算 顺序 : 数字 2 和 字符 串 连 接 ， 生 成 一 个 新 字符 串 ， 然 后 
数字 1 和 这 个 新 字符 串 再 次 连接 ， 生 成 了 最 终结 果 。 


4.8.2 一 元 算术 运算 符 

一 元 运算 符 作 用 于 一 个 单独 的 操作 数 ， 并 产生 一 个 新 值 。 在 
JavaScript 中 ， 一 元 运算 符 具 有 很 高 的 优先 级 ， 而 且 都 是 右 结合 (right- 
associative) 。 本 节 将 讲述 一 元 算术 运算 符 (+、-、++ 和 --) ， 必 要 时 ， 
它们 会 将 操作 数 转换 为 数字 。 需要 注意 的 是 ， “+ 和 "是 一 元 运算 符 ， 
也 是 二 元 运算 符 。 

下 面 介绍 一 元 算术 运算 符 : 

一 元 加 法 (+) 


一 元 加 法 运算 符 把 操作 数 转换 为 数字 或 者 NaN) ， 并 返回 这 个 转 
换 后 的 数字 。 如 果 操作 数 本 身 就 是 数字 ， 则 直接 返回 这 个 数字 。 


























一 元 减法 〈-) 


当 “-” 用 做 一 元 运算 符 时 ， 它 会 根据 需要 把 所作 数 转换 为 数字 ， 然 
后 改变 运算 结果 的 符号 。 


递增 (++) 


递增 “++” 运 算 符 对 其 操作 数 进行 增 量 (加 一 ) 操作 ， 操 作 数 是 一 个 
左 值 (lvalue) (变量 、 数 组 元 素 或 对 象 属性 ) 。 运 算 符 将 操作 数 转 换 
人 
或 者 性 


递增 “++” 运 算 符 的 返回 值 依 赖 于 它 相 对 于 操作 数 的 位 置 。 当 运算 符 
在 操作 数 之 前 ， 称 为 “前 增 量 ”(pre-increment) 运算 符 ， 它 对 操作 数 进 
行 增 量 计算 ， 并 返回 计算 后 的 值 。 当 运算 符 在 操作 数 之 后 ， 称 为 “后 增 
量 ”(post-increment)〉 运算 符 ， 它 对 操作 数 进 行 增 量 计算 ， 但 返回 未 做 
增 量 计算 的 (unincremented) 值 。 思 考 一 下 如 下 两 行 代码 之 间 的 区 别 |: 











var i=1,j=++i;//i 和 j 的 值 都 是 2 
var i=1,j=i++;//i 是 2，j 是 1 





需要 注意 的 是 ， 表 达 式 ++x 并 不 总 和 x=x+1 完 全 一 样 ，“++" 运 算 符 
从 不 进行 字 答 串 连 接 操作 ， 它 总 是 会 将 操作 数 转换 为 数字 并 增 1。 如 果 x 
是 字符 串 “1”，++x 的 结果 就 是 数字 2， 而 x+1 是 字符 串 “11”。 


同样 需要 注意 的 是 ， 由 于 Javascript 会 自动 进行 分 号 补 全 ， 因 此 不 能 
在 后 增 量 运算 符 和 操作 数 之 间 插 入 换行 符 。 如 果 插入 了 换行 符 ， 
JavaScript 将 会 把 操作 数 当做 一 条 单独 的 语句 ， 并 在 其 之 前 补 上 一 个 分 
9 

















不 管 是 前 增 量 还 是 后 增 量 ， 这 个 运算 符 通常 用 在 for 循 环 中 ， 用 于 控 
制 循 环 内 的 计数 器 〈 见 5.5.3 节 ) 。 
递减 〈--) 


递减 汪 " 运 算 符 的 操作 数 也 是 一 个 左 值 。 它 把 操作 数 转 换 为 数字 ， 
然后 减 1， 并 将 计算 后 的 值 重 新 赋值 给 操作 数 。 和 “++” 运 算 符 一 样 ， 递 
减 “--” 运 算 符 的 返回 值 依赖 于 它 相 对 操作 数 的 位 置 ， 当 递减 运算 符 在 操 


作 数 之 前 ， 操 作 数 减 1 并 返回 减 1 之 后 的 值 。 当 递减 运算 符 在 操作 数 之 
后 ， 操 作 数 减 1 并 返回 减 1 之 前 的 值 。 当 递减 运算 符 在 操作 符 的 右 侧 时 ， 
运算 符 和 操作 数 之 间 不 能 有 换行 符 。 


4.8.3 ”位 运算 符 


位 运算 符 可 以 对 由 数字 表示 的 二 进 制 数据 进行 更 低层 级 的 按 位 运 
算 。 尽 管 它们 并 不 是 传统 的 数学 运算 ， 但 这 里 也 将 其 归 类 为 算术 运算 
符 ， 因 为 它们 作用 于 数值 类 型 的 操作 数 并 返回 数字 。 这 些 运 算 符 在 
JavaScript 编 程 中 并 不 常用 ， 如 果 你 对 十 进 制 整数 的 二 进 制 表示 并 不 熟悉 
的 话 ， 你 可 以 跳 过 本 市 内 容 。 这 里 的 4 个 运算 符 部 是 对 操作 数 的 每 个 位 
进行 布尔 运算 ， 这 里 将 操作 数 的 每 个 位 当做 布尔 值 (1=true， 
0=false) ， 其 他 三 个 位 运算 符 用 来 进行 左 移 位 和 右 移 位 。 


位 运算 符 要 求 它 的 操作 数 是 整数 ， 这 些 整 数 表示 为 32 位 整 型 而 不 是 
64 位 浮 点 型 。 必 要 时 ， 位 运算 符 首 先 将 操作 数 转换 为 数字 ， 并 将 数字 强 
制 表示 为 32 位 整 型 ， 这 会 忽略 原 格式 中 的 小 数 部 分 和 任何 超过 32 位 的 二 
进 制 位 。 移 位 运算 符 要 求 右 操 作 数 在 0~31 之 间 。 在 将 其 操作 数 转 换 为 
无 符号 32 位 整数 后 ， 它 们 将 舍弃 第 5 位 之 后 的 二 进 制 位 ， 以 便 生成 一 个 
位 数 正 确 的 数字 。 需 要 注意 的 是 ， 位 运算 符 会 将 NaN、Infinity 和 - 
Infinity 都 转换 为 0。 


按 位 与 (&) 

位 运算 符 “&” 对 它 的 整 型 操作 数 逐 位 执行 布尔 与 AND) 操作 。 只 
有 两 个 操作 数 中 相对 应 的 位 都 是 1， 结 果 中 的 这 一 位 才 是 1。 例 如 ， 
0x1234& 0x00FF=0x0034。 

按 位 或 () 

位 运算 符 “? 对 它 的 整 型 操作 数 逐 位 执行 布尔 或 OR) 操作 。 如 果 
其 中 一 个 操作 数 相应 的 位 为 1， 或 者 两 个 操作 数 相 应 位 都 是 1， 那 么 结果 
中 的 这 一 位 就 为 1。 例 如 : 0x1234|0x00FF=0x12FF。 

按 位 寞 或 《〈^) 


位 运算 符 “* 对 它 的 整 型 操作 数 逐 位 执行 布尔 弄 或 (XOR) 操作 。 异 
或 是 指 第 一 个 操作 数 为 true 或 第 二 个 操作 数 为 tue， 但 两 者 不 能 同时 为 









































true。 如 果 两 个 操作 数 中 只 有 一 个 相应 位 为 1〈 不 能 同时 为 1) ， 那 么 结 
果 中 的 这 一 位 就 是 1。 例 如 ，0xFF00^0xFOF0=0x0FF0。 


按 位 非 〈《 一 ) 


运算 符 “ 一 ”是 一 元 运算 符 ， 位 于 一 个 整 型 参数 之 前 ， 它 将 操作 数 的 
所 有 位 取 反 。 根 据 JavaScript 中 带 符号 的 整数 的 表示 方法 ， 对 一 个 值 使 
用 “一 ”运算 符 相 当 于 改变 它 的 符号 并 减 1。 人 例如， 一 0x0F=0xFFFFFFF0 
或 -16。 


左 移 〈 雪 去 ) 


将 第 一 个 操作 数 的 所 有 二 进 制 位 进行 左 移 操作 ， 移 动 的 位 数 由 第 二 
个 操作 数 指定 ， 移 动 的 位 数 是 0 一 31 之 间 的 一 个 整数 。 例 如 ， 在 表达 式 a 
二 二 1 中 ，a 的 第 一 位 变 成 了 第 二 位 ，a 的 第 二 位 变 成 了 它 的 第 三 位 ， 以 
此 类 推 。 新 的 第 一 位 用 0 来 补充 ， 舍 莽 第 32 位 。 将 一 个 值 左 移 1 位 相当 于 
它 乘 以 2?， 左 移 两 位 相当 于 乘 以 4， 以 此 类 推 。 例 如 ，7==<=2=28。 


带 符 号 右 移 (二 二 ) 


运算 符 “ 二 二 ”将 第 一 个 操作 数 的 所 有 位 进行 右 移 操作 ， 移 动 的 位 数 
由 第 二 个 操作 数 指定 ， 移 动 的 位 数 是 0 一 31 之 间 的 一 个 整数 。 右 边 溢出 
的 位 将 忽略 。 填 补 在 左边 的 位 由 原 操作 数 的 符号 决定 ， 以 便 保 持 结果 的 
符号 与 原 操作 数 一 致 。 如 果 第 一 个 操作 数 是 正 数 ， 移 位 后 用 0 填补 最 高 
位 ; 如 果 第 一 个 操作 数 是 负 的 ， 移 位 后 就 用 1 填补 高 位 。 将 一 个 值 右 移 1 
位 ， 相 当 于 用 它 除 以 2 (忽略 余数 ) ， 碳 移 两 位 ， 相 当 于 它 除 以 4， 以 此 
类 推 ， 例 如 ，7>>1=3，-7> 之 1=-4。 











无 符号 右 移 (二 二 二) 





运算 符 “ 盖 > >” 和 运算 符 “>> ”一样 ， 只 是 左边 的 高 位 总 是 填补 
0， 与 原来 的 操作 数 符号 无 关 ， 例 如 ，-1> >4=-1， 但 是 -1 之 之 > 
4=0xOFFFFFFF。 


4.9 ”关系 表达 式 


本 节 介 绍 JavaScript 的 关系 运算 符 。 关 系 运 算 符 用 于 测试 两 个 值 之 间 
的 关系 《比如 “相等 ” “小 于 ”， 或 “是 .… 的 属性 ”>) ， 根 据 关 系 是 否 存在 


而 返回 true 或 false。 关 系 表达 式 总 是 返回 一 个 布尔 值 ， 通 各 在 让 、while 

或 者 for 语 句 〈 人 参照 第 5 章 ) 中 使 用 关系 表达 式 ， 用 以 控制 程序 的 执行 流 
程 。 接 下 来 的 几 节 将 会 讲述 相等 和 不 等 运算 符 、 比 较 运 算 符 和 JavaScript 
中 其 他 两 个 关系 运算 和 从 hn 和 instanceof。 


4.9.1 相等 和 不 等 运算 符 


“==” 和 “===” 运 算 符 用 于 比较 两 个 值 是 否 相 等 ， 当 然 它 们 对 相等 的 
定义 不 尽 相 同 。 两 个 运算 符 允 许 任意 类 型 的 操作 数 ， 如 果 操 作 数 相等 则 
返回 true， 和 否则 返回 false。“===” 也 称 为 严格 相等 运算 符 (strict 
equality) 〈《 有 时 也 称 做 恒 等 运算 符 (identity operator) ) ， 它 用 来 检测 
两 个 操作 数 是 否 严 格 相 等 。“==” 运 算 符 称 做 相等 运算 符 (equality 
operator) ， 它 用 来 检测 两 个 操作 数 是 否 相 等 ， 这 里 “相等 * 的 定义 非常 
宽松 ， 可 以 允许 进行 类 型 转换 。 


JavaScript 支 持 “=”、“==” 和 “===” 运 算 符 。 你 应 当 理 解 这 些 ( 赋 
值 、 相 等 、 恒 等 ) 运算 符 之 间 的 区 别 ， 并 在 编码 过 程 中 小 心 使 用 。 尽 管 
它们 都 可 以 称 做 “相等 ”， 但 为 了 减少 概念 混 请 ， 应 该 把 “=” 称 做 “得 到 或 
赋值 >， 把 “==” 称 做 “相等 ”， 把 “===” 称 做 “严格 相等 ”。 














两 个 值 通过 “==” 的 比较 结果 为 tue， 那 么 通过 “I=* 的 比较 结果 则 为 
false。 如 果 两 值 通过 “===” 的 比较 结果 为 tue， 那 么 通过 “==” 的 比较 结 
果 则 为 false。4.10 节 会 提 到 ，“! "运算 符 是 布尔 非 运算 符 。 我 们 只 要 记 
住 “1=" 称 做 “不 相等 "、“!==" 称 做 “不 严格 相等 "就 可 以 了 。 


在 3.7 节 已 经 提 到 ，JavaScript 对 象 的 比较 是 引用 的 比较 ， 而 不 是 值 
的 比较 。 对 象 和 其 本 吴 是 相等 的 ， 但 和 其 他 任何 对 象 都 不 相等 。 如 条 两 
个 不 同 的 对 象 具 有 相同 数量 的 属性 ， 相 同 的 属性 名 和 值 ， 它 们 依然 是 不 
相等 的 。 相 应 位 置 的 数组 元 系 是 相等 的 两 个 数组 也 是 不 相等 的 。 








值 ， 比 较 过 程 没 有 任何 类 型 转换 : 
:如 果 两 个 值 类 型 不 相同 ， 则 它们 不 相等 。 
:如果 两 个 值 都 是 null 或 者 都 是 undefined， 则 它们 不 相等 。 


如果 两 个 值 都 是 布尔 值 true 或 都 是 布尔 值 false， 则 它们 相等 。 


:如果 其 中 一 个 值 是 NaN， 或 者 两 个 值 都 是 NaN， 则 它们 不 相等 。 
NaN 和 其 他 任何 值 都 是 不 相等 的 ， 包 括 它 本 身 ! 通过 xl==x 来 判断 x 是 人 否 
为 NaN， 只 有 在 x 为 NaN 的 时 候 ， 这 个 表达 式 的 值 才 为 true。 


如果 两 个 值 为 数字 且 数 值 相 等 ， 则 它们 相等 。 如 果 一 个 值 为 0%， 田 
一 个 值 为 -0， 则 它们 同样 相等 。 


:如 果 两 个 值 为 字符 串 ， 且 所 含 的 对 应 位 上 的 16 位 数 〈 参 照 3.2 市 ) 
完全 相等 ， 则 它们 相等 。 如 果 它 们 的 长 度 或 内 容 不 同 ， 则 它们 不 等 。 两 
个 字符 串 可 能 含义 完全 一 样 且 所 显示 出 的 字符 也 一 样 ， 但 具有 不 同 编码 
的 16 位 值 。JavaScript 并 不 对 Unicode 进 行 标 准 化 的 转换 ， 因 此 像 这 样 的 
字符 串通 过 “===” 和 “==” 运 算 符 的 比较 结果 也 不 相等 。 第 三 部 分 的 
String.localeCompare(O 提 供 了 另外 一 种 比较 字符 串 的 方法 。 


:如果 两 个 引用 值 指 回 同一 个 对 象 、 数 组 或 函数 ， 则 筷 们 是 相等 
的 。 如 果 指 疝 不 同 的 对 象 ， 则 它们 古 不 等 的 ， 尽 管 两 个 对 象 具 有 完全 一 
样 的 属性 。 

相等 运算 符 “==” 和 恒 等 运 算 符 相 似 ， 但 相等 运算 符 的 比较 并 不 严 
格 。 如 果 两 个 操作 数 不 是 同一 类 型 ， 那 么 相等 运算 符 会 尝试 进行 一 些 类 
型 转换 ， 然 后 进行 比较 : 

如果 两 个 操作 数 的 类 型 相同 ， 则 和 上 文 所 述 的 严格 相等 的 比较 规 


则 一 样 。 如 果 严 格 相等 ， 那 么 比较 结果 为 相等 。 如 果 它 们 不 严格 相等 ， 
则 比较 结果 为 不 相等 。 


-如果 两 个 操作 数 类 型 不 同 , “==” 相 等 操作 符 也 可 能 会 认为 它们 相 
等 。 检 测 相 等 将 会 遵守 如 下 规则 和 类 型 转换 : 


一 如 果 一 个 值 是 null， 男 一 个 是 undefined， 则 它们 相等 。 


一 如 采 一 个 值 是 数字 ， 另 一 个 是 字符 串 ， 先 将 字符 串 转 换 为 数字 ， 
然后 使 用 转换 后 的 值 进行 比较 。 


一 如 末 其 中 一 个 值 是 rue， 则 将 其 转换 为 1 再 进行 比较 。 如 果 其 中 一 
个 值 是 false， 则 将 其 转换 为 0 再 进行 比较 。 














一 如 果 一 个 值 是 对 象 ， 另 一 个 值 是 数字 或 字符 串 ， 则 使 用 3.8.3 节 所 
提 到 的 转换 规则 将 对 象 转换 为 原始 值 ， 然 后 再 进行 比较 。 对 象 通过 
toString() 方 法 或 者 valueOfO 方 法 转换 为 原始 值 。JavaScript 语 言 核心 的 内 
置 类 首先 尝试 使 用 valueOf()， 再 尝试 使 用 toString()， 除 了 日 期 类 ， 日 期 
类 只 使 用 toStringO0 转 换 。 那 些 不 是 JavaScript 语 言 核心 中 的 对 象 则 通过 各 
自 的 实现 中 定义 的 方法 转换 为 原始 值 。 


一 其 他 不 同类 型 之 间 的 比较 均 不 相等 。 
这 里 有 一 个 判断 相等 的 小 例子 : 








"1"==true 





这 个 表达 式 的 结果 是 true， 这 表明 完全 不 同类 型 的 值 比较 结果 为 相 
等 。 布 尔 值 true 首 先 转换 为 数字 1， 然 后 再 执行 比较 。 接 下来， 字符 
串 “1” 也 转换 为 了 数字 1， 因 为 两 个 数字 的 值 相 等 ， 因 此 比较 结果 为 


true 。 








4.9.2 ”比较 运算 符 


比较 运算 符 用 来 检测 两 个 操作 数 的 大 小 关系 “数值 大 小 或 者 字母 表 
的 顺序 ) : 


小 于 (<) 
如 果 第 一 个 操作 数 小 于 第 二 个 操作 数 ， 则 “<” 运 算 符 的 计算 结果 为 


true; 人 否则 为 false。 
pt 
如 果 第 一 个 操作 数 大 于 第 二 个 操作 数 ， 则 “二 ”运算 符 的 计算 结果 为 


true; 否则 为 false。 
本) 


如 果 第 一 个 操作 数 小 于 或 者 等 于 第 二 个 操作 数 ， 则 “二 =” 运 算 符 的 
计算 结果 为 true; 否则 为 false。 








大 于 等 于 (>=) 


如 果 第 一 个 操作 数 大 于 或 者 等 于 第 二 个 操作 数 ， 则 “二 =” 运 算 符 的 
计算 结果 为 false; 否则 为 false。 


比较 操作 符 的 操作 数 可 能 是 任意 类 型 。 然 而 ， 只 有 数字 和 字符 串 才 
能 真正 执行 比较 操作 ， 因 此 那些 不 是 数字 和 字符 串 的 操作 数 都 将 进行 类 
型 转换 ， 类 型 转换 规则 如 下 : 


如果 操 作 数 为 对 象 ， 那 么 这 个 对 象 将 依照 3.8.3 节 结尾 处 所 描述 的 
转换 规则 转换 为 原始 值 : 如 果 valueOfO 返 回 一 个 原始 值 ， 那 么 直接 使 用 
这 个 原始 值 。 和 否则 ， 使 用 toString0 的 转换 结果 进行 比较 操作 。 


-在 对 象 转换 为 原始 值 之 后 ， 如 果 两 个 操作 数 都 是 字符 串 ， 那 么 将 
依照 字母 表 的 顺序 对 两 个 字符 串 进行 比较 ， 这 里 提 到 的 “字母 表 顺 序 ” 是 
组 成 这 个 字符 串 的 16 位 Unicode 字 符 的 索引 顺序 。 


.在 对 象 转换 为 原始 值 之 后 ， 如 果 至 少 有 一 个 操作 数 不 是 字符 串 ， 
那么 两 个 操作 数 都 将 转换 为 数字 进行 数值 比较 。0 和 -0 是 相等 的 。 
Infinity 比 其 他 任何 数字 都 大 〈 除 了 Infinity 本 身 ) ，-Infinity 比 其 他 任何 
数字 都 小 〈 除 了 它 自 身 ) 。 如 果 其 中 一 个 操作 数 是 (或 转换 后 是 ) 
NaN， 那 么 比较 操作 符 总 是 返回 false。 


需要 注意 的 是 ，JavaScript 字 符 串 是 一 个 由 16 位 整数 值 组 成 的 序列 ， 
字符 串 的 比较 也 只 是 两 个 字符 串 中 的 字符 的 数值 比较 。 由 Unicode 定 义 
的 字符 编码 顺序 和 任何 特定 语言 或 者 本 地 语言 字符 集中 的 传统 字符 编码 
顺序 不 尽 相 同 。 注 意 ， 字 符 串 比较 是 区 分 大 小 写 的 ， 所 有 的 大 写 的 
ASCII 字 母 都 “小 于 ”小 写 的 ASCII 字 母 。 如 果 不 注 意 这 条 不 起 眼 的 规则 的 
话 会 造成 一 些小 麻烦 。 比 如 ， 使 用 “=<=” 小 于 运算 符 比 
较 "Zoo" 和 "aardvark"， 结 果 为 true。 


参照 String.localCompare() 方 法 来 获取 更 多 字符 串 比 较 的 相关 信息 ， 
String.localCompare() 方 法 更 加 健壮 可 靠 ， 这 个 方法 参照 本 地 语言 的 字母 
表 定 义 的 字符 次 序 。 对 于 那些 不 区 分 字母 大 小 写 的 比较 来 说 ， 则 需要 首 
先 将 字符 串 转 全 部 换 为 小 写字 母 或 者 大 写字 母 ， 通 过 
String.toLowerCase() 和 String.toUpperCase() 做 大 小 写 的 转换 。 


对 于 数字 和 字符 串 操 作 符 来 说 ， 加 写 运 算 符 和 比较 运算 符 的 行为 都 









































有 所 不 同 ， 前 者 更 偏爱 字符 串 ， 如 果 它 的 其 中 一 个 操作 数 是 字符 串 的 
话 ， 则 进行 字符 串 连 接 操 作 。 而 比较 运算 符 则 更 偏爱 数字 ， 只 有 在 两 个 
操作 数 部 是 字符 串 的 时 候 ， 才 会 进行 字符 串 的 比较 : 








1+2// 加 法 .结果 是 3 

"m1"+"2"// 字 符 串 连接 ， 结 果 是 "12" 

"1"+2// 字 符 串 链接 ，2 转 换 为 "2"， 结 果 是 "12" 
11<3// 数 字 的 比较 ， 结果 为 false 

V1 "3! /7 字符 串 比 较 ， 结果 为 true 

Wi 三 3// 数 字 的 比较 ， 11" 转 换 为 11， 结 果 为 false 
"one"<3// 数 字 的 比较 ，"one" 转 换 为 NaN， 结 果 为 false 





























最 后 ， 需 要 注意 的 是 , “<=”( 小 于 等 于 ) 和 “>=”( 大 于 等 于 ) 运 
算 符 在 判断 相等 的 时 候 ， 并 个 依赖 于 相 字 运算 得 和 六 格 相等 运算 香 且 比 
较 规 则 。 相 反 ， 小 于 等 于 运算 符 只 是 简单 的 “不 大 于 ”， 大 于 等 于 运算 符 
也 只 是 “不 小 于 ?。 只 有 一 个 例外 ， 那 就 是 当 其 一 个 操作 数 是 “或 者 转换 
后 是 ) NaN 的 时 候 ， 所 有 4 个 比较 运算 符 均 返回 false。 


4.9.3 ”in 运算 符 
in 运算 符 希 望 它 的 左 操作 数 是 一 个 字符 串 或 可 以 转换 为 字符 串 ， 和 希 


望 它 的 右 操 作 数 是 一 个 对 象 。 如 果 右 侧 的 对 象 拥 有 一 个 名 为 左 操作 数值 
的 属性 名 ， 那 么 表达 式 返 回 true， 例 如 : 





var point={x:1,y:1};// 定 义 一 个 对 象 

"x"in point//= 之 true: 对 象 有 一 个 名 为 "x' ' 的 属性 
"z"in point//= >false: 对 象 中 不 存在 名 为 "z" 的 属性 
"toString"in point//=>true: 对 象 继承 了 toString( ) 方 法 
var data=[7,8,9];// 拥 有 三 个 元 素 的 数组 

"QO"in data//= 之 true: 数 组 包含 元 素 " 0" 

1 in data//=>true: 数 字 转 换 为 字符 串 
3 in data//=>false: 没 有 索引 为 3 的 元 素 




































































4.9.4 ”instanceof 运 算 符 


instanceof 运 算 符 希 望 左 操作 数 是 一 个 对 象 ， 右 操作 数 标 识 对 象 的 
类 。 如 果 左 侧 的 对 象 是 右 侧 类 的 实例 ， 则 表达 式 返 回 true; 否则 返回 
false。 第 9 章 将 会 讲 到 ，JavaScript 中 对 象 的 类 是 通过 初始 化 它们 的 构造 
这 样 的 话 ，instanceof 的 右 操作 数 应 当 是 一 个 函数 。 比 
0: 


























var d=new Date();// 通 过 Date( ) 构 造 函数 来 创建 一 个 新 对 象 

d instanceof Date;// 计 算 结果 为 true，d 是 由 Date( ) 创 建 的 

d instanceof 0bject;// 计 算 结 果 为 true， 所 有 的 对 象 都 是 0bject 的 实例 
d instanceof Number;// 计 算 结 果 为 false，d 不 是 一 个 Number 对 象 

var a=[1,2,3]; // 通 过 数组 直 接 量 的 写法 创建 一 个 数组 
a instanceof Array;// 计 算 结果 为 true，a 是 一 个 数组 
a instanceof 0bject;// 计 算 结果 为 true， 所 有 的 数组 都 是 对 象 
a instanceof RegExp;// 计 算 结果 为 false， 数 组 不 是 正则 表达 式 

















































































































需要 注意 的 是 ， 所 有 的 对 象 都 是 Object 的 实例 。 当 通过 instanceof 判 
断 一 个 对 象 是 否 是 一 个 类 的 实例 的 时 候 ， 这 个 判断 也 会 包含 对 “ 父 
类 ” ee 的 检测 。 如 果 instanceof 的 左 操 作 数 不 是 对 象 的 话 ， 
ne 回 false。 如 有 果 右 操作 数 不 是 函数 ， 则 抛 出 一 个 类 型 错误 异 
常 。 


为 了 理解 instanceof 运 算 符 是 如 何 工 作 的 ， 必 须 首 先 理解 “原型 
链 ”(prototype chain) 。 原 型 链 作 为 JavaScript 的 继承 机 制 ， 将 在 6.2.2 市 
详细 讲述 。 为 了 计 算 表 达 式 o instanceof f，JavaScript 首 先 计 算 
f.prototype， 然 后 在 原型 链 中 查找 o， 如 果 找 到 ， 那 么 o 是 f (或 者 f 的 父 
类 ) 的 一 个 实例 ， 表 达 式 返回 true。 如 果 f.prototype 不 在 o 的 原型 链 中 的 
话 乌 ， 那 么 o 就 不 是 { 的 实例 ，instanceof 返 回 false。 


4.10 逻辑 表达 式 


逻辑 运算 符 " 芭 区 ” “和 “是 对 操作 数 进行 布尔 算术 运算 ， 经 冰 
和 关系 运算 符 一 起 配合 使 用 ， 逻 辑 运算 符 将 多 个 关系 表达 式 组 合 起 来 组 
成 一 个 更 复杂 的 表达 式 。 这 些 运算 符 在 下 面 几 节 中 会 一 一 讲述 ， 为 了 更 
好 地 理解 它们 ， 应 当 首 先 回 顾 一 下 3.3 节 提 到 的 “ 真 值 ?和 * 假 值 的 概念 。 


4.10.1 逻辑 与 (色色 ) 

“& & ”运算 符 可 以 从 三 个 不 同 的 层次 进行 理解 。 最 简单 的 第 一 层 理 
解 是 ， 当 操作 数 都 是 布尔 值 的 时 候 ，“& &” 对 两 个 值 执行 布尔 与 
(AND) 操作 ， 只 有 在 第 一 个 操作 数 和 第 二 个 操作 数 都 是 true 的 时 候 ， 
它 才 返回 true。 如 果 其 中 一 个 操作 数 是 false， 它 返回 false。 


“&& "党 用 来 连接 两 个 关系 表达 式 ; 

















Xx==0& &y==0// 只 有 在 x 和 y 都 是 9 的 时 候 ， 才 返回 true 











关系 表达 式 的 运算 结果 总 是 为 true 或 false， 因 此 当 这 样 使 用 的 时 
候 ，“&&”* 运 算 符 本 身 也 返回 true 或 false。 关 系 运 算 符 的 优先 级 比 “& 
4 和 “||”) 要 高 ， 因 此 类 似 这 种 表达 式 可 以 放心 地 书写 ， 而 不 用 补充 
舌 伟 。 


但 是 “& &” 的 操作 数 并 不 一 定 是 布尔 值 ， 回 想 一 下 ， 有 些 值 可 以 当 
做 “ 真 值 ”和 “ 假 值 ”( 参 照 3.3 节 ， 假 值 是 false、null、undefined、0、-0、 
NaN 和 '"…"， 上 所 有 其 他 的 值 包括 所 有 对 象 都 是 真 值 ) 。 对 “&& ”的 第 二 层 
理解 是 ,“& ”可 以 对 真 值 和 假 值 进行 布尔 与 (AND) 操作 。 如 果 两 个 
操作 数 都 是 真 值 ， 那 么 返回 一 个 真 值 ; 否则 ， 至 少 一 个 操作 数 是 假 值 的 
话 ， 则 返回 一 个 假 值 。 在 JavaScript 中 任何 希望 使 用 布尔 值 的 地 方 ， 表 达 
式 和 语句 都 会 将 其 当做 真 值 或 假 值 来 对 待 ， 因 此 实际 上 “& &” 并 不 总 是 
返回 true 和 false， 但 也 并 无 大 碍 。 


需要 注意 的 是 ， 上 文 提 到 了 运算 符 返 回 一 个 “ 真 值 "或 者 < 假 值 "， 但 
并 没有 说 明 这 个 “ 真 值 "或 者 < 假 值 "到 底 是 什么 值 。 为 此 ， 我 们 深入 讨论 
对 “& &” 的 第 三 层 〔 也 是 最 后 一 层 ) 理解 。 运 算 符 首先 计算 左 操作 数 的 
值 ， 即 首先 计算 “& &* 左 侧 的 表达 式 。 如 果 计算 结果 是 假 值 ， 那 么 整个 
表达 式 的 结果 一 定 也 是 假 值 ， 因 此 “名 名 "这 时 简单 地 返回 左 操作 数 的 
值 ， 而 并 不 会 对 右 操作 数 进行 计算 。 


有 反 过 来 讲 ， 如 果 左 操作 数 是 真 值 ， 那 么 整个 表达 式 的 结果 则 依赖 于 
石 操作 数 的 值 。 如 果 石 操作 数 是 真 值 ， 那 么 整个 表达 式 的 值 一 定 是 真 
值 ， 如 果 右 操作 数 是 假 值 ， 那 么 整个 表达 式 的 值 一 定 是 假 值 。 因 此 ， 当 
左 操 作 数 是 真 值 时 , “区 区 "运算 符 将 计算 右 操作 数 的 值 并 将 其 返回 作为 
整个 表达 式 的 计算 结果 : 


























Var o={x:1}; 
Var p=null; 
o&&o,.x//=>1:0 是 真 值 ， 因 此 返回 值 为 0 .X 
p&&p.x//=>null:p 是 假 值 ， 因 此 将 其 返回 ， 而 并 不 去 计算 p .x 



























































这 对 于 理解 < 上 区” 可 能 不 会 去 计算 右 操 作 数 的 情况 至 关 重 要 ， 在 上 
述 示例 代码 中 ， 变 量 p 的 值 是 null， 而 如 果 计 算 表 达 式 p.x 的 话 则 会 抛 出 
一 个 类 型 错误 异常 。 但 是 示例 代码 使 用 了 “& 区 ”的 一 种 符合 语言 习惯 的 
用 法 ， 因 此 只 有 在 p 为 真 值 〈 不 能 是 nul] 或 者 undefined) 的 情况 下 才 会 计 


算 p.x。 





“& &. ”的 行为 有 时 称 做 “短路 ”(short circuiting) ， 我 们 也 会 经 常 看 
到 很 多 代码 利用 了 这 一 特性 来 有 条 件 地 执行 代码 。 例 如 ， 下 面 两 行 
JavaScript 代 码 是 完全 等 价 的 : 





























if(a==b)stop();// 只 有 在 a==b 的 时 候 才 调用 stop() 
(a==b) & & stop(); // 同 上 














一 般 来 讲 ， 当 “& &” 右 侧 的 表达 式 具 有 副作用 的 时 候 (赋值 、 递 
增 、 递 减 和 函数 调用 表达 式 ) 要 格外 小 心 。 因 为 这 些 带 有 副作用 的 表达 
式 的 执行 依赖 于 左 操 作 数 的 计算 结 


尽管 <& &” 可 以 按照 第 二 层 和 第 三 层 的 理解 进行 一 些 复兴 表达 式 运 
算 ， 但 大 多 数 情况 下 , “多 区 ?” 仅 用 来 对 真 值 和 假 值 做 布尔 计算 。 


4.10.2 ”逻辑 或 《|) 


和 如 果 其 中 一 
人 它 返 回 一 个 真 值 。 如 果 两 个 操作 数 都 是 假 值 ， 它 返 
一 个 假 值 。 


尽管 “运算 符 大 多 数 情况 下 只 是 做 简单 布尔 或 (OR) 运算 ， 和 "“& 
久 ” 一 样 ， 它 也 具有 一 些 更 复杂 的 行为 。 它 会 首先 计算 第 一 个 操作 数 的 
值 ， 也 就 是 说 会 首先 计算 左 侧 的 表达 式 。 如 果 计 算 结 果 为 真 值 ， 那 么 返 
回 这 个 真 值 。 否 则 ， 再 计算 第 二 个 操作 数 的 值 ， 即 计算 右 侧 的 表达 式 ， 
并 返回 这 个 表达 式 的 计算 结果 。 


和 “& & ”运算 和 从 一样， 同样 应 当 避 人 免 右 操作 数 包含 一 些 具 有 副作用 
的 表达 式 ， 除 非 你 目地 明确 地 在 右 侧 使 用 带 副 作用 的 表达 式 ， 而 有 可 能 
不 会 计算 右 侧 的 表达 式 。 


这 个 运算 符 最 利用 的 方式 是 用 来 从 一 组 备 选 表达 陈 中 选 出 第 一 个 真 
值 表达 式 : 




















// 如 果 max_width 己 经 定义 了 ， 直 接 使 用 它 ， 否 则 在 preferences 对 象 中 查找 max_width 
// 如 果 没有 定义 它 ， 则 使 用 一 个 写 死 的 常 
var max=max_width | |preferences.m , Max _width||500; 





















































这 种 惯用 法 通常 用 在 函数 体内 ， 用 来 给 参数 提供 默认 值 : 








// 将 o 的 成 员 属 性 Ip， 并 返 区 
function cop p){ 

p=p|1{]}， // 如 颗 间 参数 p 没 有 传 入 任何 对 象 则 使 用 一 个 新 创建 的 对 象 
// 函 数 体 内 的 主 逻 辑 
} 











五 
































4.10.3 人 逮 辑 非 《!) 


“1” 运算 和 从 是 一 元 运算 符 。 它 放置 在 一 个 单独 的 操作 数 之 前 。 它 的 
目的 是 将 操作 数 的 布尔 值 进行 求 反 。 人 例如， 如果 x 是 真 值 ， 则 !x 返 回 
false; 如 果 X 是 假 值 ， 则 民 返 回 true。 


和 “点 芒 ”与 沪 运 算 符 不 同 ，“" 运 算 符 首先 将 其 操作 数 转 换 为 布尔 
但 (参照 第 3 笃 讲 述 的 转换 规则 ， 然后 再 对 布尔 值 求 反 。 也 就 是 
说 “4 总 是 返回 true 或 者 false， 并 且 ， 可 以 通过 使 用 两 次 逻辑 非 运 算 来 得 
到 一 个 值 的 等 价 布尔 值 ; IIX《〈 人 参照 3.8.2 节 ) 。 


作为 一 个 一 元 运算 符 ，“ 具 有 很 高 的 优先 级 ， 并 且 和 操作 数 紧 密 
绑 定 在 一 起 。 如 果 你 希望 对 类 似 p& &q 的 表达 式 做 求 反 操作 ， 则 需要 使 
用 圆 括号 : !p 区 人 gd。 布尔 计算 的 更 多 原理 性 知识 不 必要 做 过 多 的 解 
释 ， 这 里 仅 用 JavaScript 代 码 做 简单 说 明 : 








// 对 于 p 和 q 取 任意 值 ， 这 两 个 等 式 都 永远 成 立 
!(p&&q)===!p||!q 
!(pl1q)===!p&&1q 


4.11 冉 值 表达 式 
JavaScript 使 用 “=” 运 算 符 来 给 变量 或 者 属性 赋值 。 例 如 : 

















i=0// 将 变量 i 设置 为 0 
0.X=1// 将 对 象 o 的 属性 x 设置 为 1 



































“=” 运 算 符 希望 它 的 左 操 作 数 是 一 个 左 值 ， 一 个 变量 或 者 对 象 属性 
(或 数组 元 素 ) 。 它 的 右 操作 数 可 以 是 任意 类 型 的 任意 值 。 冉 值 表达 式 
的 值 束 是 右 操 作 数 的 值 。 赋 值 表达 式 的 副作用 是 ， 右 操作 数 的 值 赋值 给 
左 侧 的 变量 或 对 象 属性 ， 这 样 的 话 ， 后 续 对 这 个 变量 和 对 象 属性 的 引用 














都 将 得 到 这 个 值 。 


尽管 赋值 表达 式 通 种 非 党 简单， 但 有 时 仍 会 看 到 一 些 复 杂 表达 式 包 
人 
， 就 像 这 样 : 





(a=b)==0 





如 果 这 样 做 的 话 ， 应 当 清 楚 地 知道 “=” 和 “==” 运 算 符 之 间 的 区 别 ! 
需要 注意 的 是 ，“=” 具 有 非常 低 的 优先 级 ， 通 常 在 一 个 较 长 的 表达 式 中 
人 
了 。 


赋值 操作 符 的 结合 性 是 从 右 至 左 ， 也 就 是 说 ， 如 果 一 个 表达 式 中 出 
现 了 多 个 赋值 运算 符 ， 运 算 顺序 是 从 右 到 左 。 因 此 ， 可 以 通过 如 下 的 方 
式 来 对 多 个 变量 赋值 : 

















i=j=k=0;// 把 三 个 变量 初始 化 为 9 














市 操作 的 赋值 运算 
除了 常规 的 赋值 运算 “=” 之 外 ，JavaScript 还 支持 许多 其 他 的 赋值 运 
算 符 ， 这 些 运 算 符 将 赋值 运算 符 和 其 他 运算 符 连 接 起 来 ， 提 供 一 种 更 为 
ee 
: 工 N 3: 


total+=sales_tax 


和 接 下 来 的 表达 式 是 等 价 的 : 


total=totalt+sales_tax 


运算 符 “+=” 可 以 作用 于 数字 或 字符 串 ， 如 果 其 操作 数 是 数字 ， 它 将 
执行 加 法 运算 和 赋值 操作 ;如 果 操 作 数 是 字符 串 ， 它 束 执 行 字 符 串 连 接 
操作 和 赋值 操作 。 


类 运算 符 还 包括 “-=”、“*=”、“&=” 等 。 表 4-2 列 出 了 这 一 类 的 所 


表 4-2: 赋值 运算 符 


运算 符 示例 等 价 于 
+= a+=b a=a+b 
-= a-=b a=a-b 
*= a*=b a=a*b 
/= a/=b a=a/b 
%= a%=b a=a%b 
《<= ax<<=b a=a<<b 
>>= a>>=b a=a>>b 
>>>= a>>>=b a=a>>>b 
&= a&=b a=a&b 
| = a|=b a=alb 
^= a^=b a=a^b 


在 大 多 数 情况 下 ， 表 达 式 为 : 





a op=b 





这 里 op 代表 一 个 运算 符 ， 这 个 表达 式 和 下 面 的 表达 式 等 价 : 





a=a op b 








在 第 一 行 中 ， 表 达 式 a 计 算 了 一 次 ， 在 第 二 行 中 ， 表 达 式 a 计 算 了 两 
次 。 只 有 在 a 包 含 具 有 副作用 的 表达 式 《〈 比 如 函数 调用 和 赋值 操作 ) 的 
时 候 ， 两 者 才 不 等 价 。 比 如 ， 下 面 两 个 表达 式 就 不 等 价 : 





data[i++]*=2; 
data[i++]=data[i++]*2; 


4.12 ”表达 式 计 算 


和 其 他 很 多 解释 性 语言 一 样 ，JavaScript 同 样 可 以 解释 运行 由 
JavaScript 源 代码 组 成 的 字符 串 ， 并 产生 一 个 值 。JavaScript 通 过 全 局 函 
数 eval() 来 完成 这 个 工作 : 





eval("3+2")//=>5 





动态 判断 源 代 码 中 的 字符 串 是 一 种 强大 的 语言 特性 ， 几 乎 没有 必要 
在 实际 中 应 用 。 如 条 你 使 用 了 eval0， 你 应 当 仔细 考虑 是 人 否 真 的 需要 使 
用 它 。 


下 面 讲 解 eval0 的 基础 用 法 ， 并 且 介 绍 严 格 使 用 它 的 两 种 方法 ， 从 
代码 优化 的 角度 讲 ， 这 两 种 方法 对 于 原 有 代码 造成 的 影响 是 最 小 的 。 


eval0 是 一 个 函数 还 是 一 个 运算 符 


eval0) 是 一 个 函数 ， 但 由 于 它 已 经 被 当成 运算 和 从 来 对 竺 了 ， 因 此 将 
它 放 在 本 章 来 讲述 。JavaScript 语 言 的 早期 版 本 定义 了 eval0 函 数 ， 从 那 
时 起 ， 访 语言 的 设计 者 和 解释 器 的 作者 对 其 实施 了 更 多 限制 ， 使 其 看 起 
来 更 像 运 算 符 。 现 代 JavaScript 解 释 器 进行 了 大 量 的 代码 分 析 和 优化 。 而 
eval0 的 问题 在 于 ， 用 于 动态 执行 的 代码 通常 来 讲 是 不 能 分 析 。 一 般 来 
讲 ， 如 果 一 个 函数 调用 了 eval()， 那 么 解释 器 将 无 法 对 这 个 函数 做 进 一 
2 而 将 eval0 定 义 为 函数 的 男 一 个 问题 是 ， 它 可 以 被 赋予 其 他 的 

子 : 




















Var f=eval,; 
Var g=f; 


如 果 人 允许 这 种 情况 的 话 ， 那 么 解释 器 将 无 法 放心 地 优化 任何 调用 gO 
的 函数 。 而 当 eval 是 一 个 运算 符 〈 并 作为 一 个 保留 字 ) 的 时 候 ， 这 种 问 
题 就 可 以 避免 掉 。 接 下 来 的 4.12.2 节 和 4.12.3 节 将 会 介绍 如 何 对 eval0 实 
施 更 多 的 限制 ， 以 便 让 它 的 行为 更 接近 运算 符 。 


4.12.1 eval() 


eval0 只 有 一 个 参数 。 如 果 传 入 的 参数 不 是 字符 串 ， 它 直接 返回 这 
个 参数 。 如 果 参 数 是 字符 串 ， 它 会 把 字符 串 当 成 JavaScript 代 码 进行 编译 
(parse) 时 ， 如 果 编 译 失败 则 抛 出 一 个 语法 错误 (SyntaxError〉 异常 。 
如 果 编 译 成 功 ， 则 开始 执行 这 段 代 码 ， 并 返回 字符 串 中 的 最 后 一 个 表达 
式 或 语句 的 值 ， 如 果 最 后 一 个 表达 式 或 语句 没有 值 ， 则 最 终 返 回 
undefined。 如 果 字 符 串 抛 出 一 个 异 弟 ， 这 个 寞 第 将 把 该 调用 传递 给 
evalODl。 


关于 eval0) 最 重要 的 是 ， 它 使 用 了 调用 它 的 变量 作用 域 环 境 。 也 就 
是 说 ， 它 查找 变量 的 值 和 定义 新 变量 和 函数 的 操作 和 局 部 作用 域 中 的 代 
码 完 全 一 样 。 如 果 一 个 函数 定义 了 一 个 局 部 变量 x， 然 后 调用 eval("x'")， 
它 会 返回 局 部 变量 的 值 。 如 果 它 调用 eval("x=1")， 它 会 改变 局 部 变量 的 
值 。 如 果 函 数 调 用 了 eval("var y=3;")， 它 声明 一 个 新 的 局 部 变量 y。 同 样 
地 ， 一 个 函数 可 以 通过 如 下 代码 声明 一 个 局 部 函数 : 




















eval("function f(){return x+1;}"); 


如 宋 在 最 顶层 代码 中 调用 eval0， 当 然 ， 它 会 作用 于 全 局 变量 和 全 
局 函数 。 


需要 注意 的 是 ， 传 递 给 eval() 的 字符 串 必须 在 语法 上 讲 的 通 一 一 不 
能 通过 eval0 往 函数 中 任意 粘贴 代码 片段 ， 比 如 ，eval(Creturn; 门 是 没有 意 
义 的 ， 因 为 retum 只 有 在 函数 中 才 起 作用 ， 并 且 事 实 上 ，eval 的 字符 串 执 
行 时 的 上 下 文 环 境 和 调用 函数 的 上 下 文 环境 是 一 样 的 ， 这 不 能 使 其 作为 
函数 的 一 部 分 来 运行 各。 如 果 字 符 串 作为 一 个 单独 的 脚本 是 有 语义 的 
《就 像 诸如 x=0 的 短 代 码 ) ， 那 么 将 其 传递 给 eval() 作 参数 是 完全 没有 问 
题 的 ， 否 则 ，eval0 将 抛 出 语法 错误 异常 乌 。 


4.12.2 全 局 eval0 














eval0 有 具有 更 改 局 部 变量 的 能 力 ， 这 对 于 JavaScript 优 化 器 来 说 是 一 
个 很 大 的 问题 。 然 而 作为 一 种 权宜 之 计 ，JavaScript 解 释 器 针对 那些 调用 
了 eval0 的 函数 所 做 的 优化 并 不 多 。 但 当 脚 本 定义 了 eval0 的 一 个 别名 ， 
且 用 另 一 个 名 称 调 用 它 ，JavaScript 解 释 器 又 会 如 何 工 作 呢 ? 为 了 让 
JavaScript 解 释 器 的 实现 更 加 简化 ，ECMAScript 3 标准 规定 了 任何 解释 器 
都 不 允许 对 eval0 赋 予 别名 。 如 果 evalO 函 数 通过 别名 调用 的 话 ， 则 会 抛 


出 一 个 EvalError 异 常 。 


实际 上 ， 大 多 数 的 实现 并 不 是 这 么 做 的 。 当 通过 别名 调用 时 ， 
eval0 会 将 其 字符 串 当 成 项 层 的 全 局 代码 来 执行 。 执 行 的 代码 可 能 会 定 
义 新 的 全 局 变量 和 全 局 函数 ， 或 者 给 全 局 变量 赋值 ， 但 却 不 能 使 用 或 修 
改 主 调 函 数 中 的 局 部 变量 ， 因 此 ， 这 不 会 影响 到 函数 内 的 代码 优化 。 


ECMAScript 5 是 反对 使 用 EvalError 的 ， 并 且 规 范 了 eval0 的 行 
为 。“ 直 接 的 evalj”， 当 直接 使 用 非 限定 的 "eval" 名 称 〈eval 看 起 来 像 是 一 
个 保留 字 )〉 来 调用 eval0 函 数 时 ， 通 常 称 为 “直接 eval”(direct eval) 。 直 
接 调 用 eval0) 时 ， 它 总 是 在 调用 它 的 上 下 文 作用 域内 执行 。 其 他 的 间接 
调用 则 使 用 全 局 对 象 作为 其 上 下 文 作用 域 ， 并 且 无 法 恋 、 写 、 定 义 局 部 
变量 和 函数 。 下 面 有 一 段 示例 代码 : 









































var geval=eval;// 使 用 别名 调用 eval 将 是 
var x="global", y="global";// 两 个 全 局 
function f(){// 函 数 内 执行 的 是 局 部 eval 
Var x="local";// 定 义 局 部 变量 
eval("x+='changed';");// 直 接 eval 更 改 了 局 部 变量 的 值 
return x;// 返 回 更 改 后 的 局 部 变量 





人 局 eval 
变量 
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} 

function g(){// 这 个 函数 内 执行 了 全 局 eval 
var y="local";// 定 义 局 部 变量 
geval("y+='changed';");// 间 接 调 用 改变 了 全 局 变量 的 值 
return y;// 返 回 未 更 改 的 局 部 变量 
} 




































































console.1og(f(),x);// 更 改 了 局 部 变量 : 输出 "local changed global": 
console.1og(g(),y);V/ 更 改 了 全 局 变量 : 输出 "local globalchanged": 
































我 们 注意 到 ， 全 局 eval 的 这 些 行为 不 仅仅 是 出 于 代码 优化 器 的 需要 
而 做 出 的 一 种 折 中 方案 ， 它 实际 上 是 一 种 非常 有 用 的 特性 ， 它 允许 我 们 
执行 那些 对 上 下 文 没 有 任何 依赖 的 全 局 脚本 代码 段 。 我 们 在 本 市 开始 处 
也 提 到 ， 真 正 需 要 eval 来 执行 代码 段 的 场景 并 不 多 见 。 但 当 你 真 的 意识 
到 它 的 必要 性 时 ， 你 更 可 能 会 使 用 全 局 eval 而 不 是 局 部 eval。 


IE ”9 之 前 的 早期 版 本 正和 其 他 浏览 占有 所 不 同 ， 当 通过 别名 调用 




















eval0 时 并 不 是 全 局 eval0《〈 它 也 不 会 抛 出 一 个 EvalError 异 常 ， 仅 仅 将 其 
当做 局 部 eval 来 调用 ) 。 但 正 的 确定 义 了 一 个 名 叫 execScriptO 的 全 局 函 

数 来 完成 全 局 eval 的 功能 〈 但 和 eval0 稍 有 不 同 ，execScriptO 总 是 会 返回 
null ) 。 


4.12.3 ”严格 eval0 


ECMAScript 5 严格 模式 (参照 5.7.3 节 ) 对 eval0) 函 数 的 行为 施加 了 
更 多 的 限制 ， 甚 至 对 标识 符 eval 的 使 用 也 施加 了 限制 。 当 在 严格 模式 下 
调用 eval0 时 ， 或 者 eval0 执 行 的 代码 段 以 "use ”strict" 指 令 开 始 ， 这 里 的 
eval0 是 私有 上 下 文 环境 中 的 局 部 eval。 也 就 是 说 ， 在 严格 模式 下 ，eval 
执行 的 代码 段 可 以 查询 或 更 改 局 部 变量 ， 但 不 能 在 局 部 作用 域 中 定义 新 
的 变量 或 函数 。 


此 外 ， 严 格 模式 将 "eval" 列 为 保留 字 ， 这 让 eval0 更 像 一 个 运算 符 。 
不 能 用 一 个 别名 窗 盖 eval(0) 函 数 。 并 且 变 量 名 、 函 数 名 、 函 数 参 数 或 者 
异常 捕获 的 参数 都 不 能 取 名 为 "eval"。 


4.13 ”其 他 运算 符 


JavaScript 文 持 很 多 其 他 各 种 各 样 的 运算 人 符 ， 后 续 几 节 详 细 讨 论 它 
们 : 


4.13.1 条 件 运 算 符 (?:) 


条 件 运算 符 是 JavaScript 中 唯一 的 一 个 三 元 运算 符 〈 三 个 操作 数 ) ， 
有 时 直接 称 做 “三 元 运算 符 ”。 通 稼 这 个 运算 符 写 成 “?:”， 当 然 在 代码 中 
往往 不 会 这 么 简写 ， 因 为 这 个 运算 符 拥有 三 个 操作 数 ， 第 一 个 操作 数 
第 二 个 操作 数 在 “?” 和 “:” 之 间 ， 第 三 个 操作 数 在 “:” 之 后 ， 例 
: 




















x 二 0?x: -x// 求 x 的 绝对 值 





条 件 运算 符 的 操作 数 可 以 是 任意 类 型 。 第 一 个 操作 数 当成 布尔 值 ， 
如 果 它 是 真 值 ， 那 么 将 计算 第 二 个 操作 数 ， 并 返回 其 计算 结果 。 人 否则 ， 
如 果 第 一 个 操作 数 是 假 值 ， 那 么 将 计算 第 三 个 操作 数 ， 并 返回 其 计算 结 
果 。 第 二 个 和 第 三 个 操作 数 总 是 会 计算 其 中 之 一 ， 不 可 能 两 者 同时 执 





= 
dl 
oO 


其 实 使 用 站 语句 也 会 种 来 同样 的 效果 (参照 5.4.1 市 ) ，“?:” 运 算 符 
只 是 提供 了 一 种 简写 形式 。 这 里 是 一 个 “?:” 的 典型 应 用 场景 ， 判 断 一 个 
变量 是 否 有 定义 (并 拥有 一 个 有 意义 的 真 值 昌 ) ， 如 果 有 定义 则 使 用 
它 ， 如 果 无 定义 则 使 用 一 个 默认 值 : 








greeting="hello"+(username?username:"there"); 





这 和 下 面 使 用 语句 的 代码 是 等 价 的 ， 但 显然 上 面 的 代码 更 加 简 


;5: 





greeting="hello"; 
if(username) 
greeting+=username; 
else 
greeting+="there"; 





4.13.2 ” typeof 运算 符 


typeof 是 一 元 运算 符 ， 放 在 其 单个 操作 数 的 前 面 ， 操 作 数 可 以 是 任 
意 类 型 。 返 回 值 为 表示 操作 数 类 型 的 一 个 字符 串 。 表 4-3 列 出 了 任意 值 
在 typeof 运 算 后 的 返回 值 : 


表 4-3; 任意 值 在 typeof 运 算 后 的 返回 值 


X typeof x 
undefined “undefined" 
null object 
true 或 false "boolean'" 
任意 数字 或 NaN "number" 
意 字 符 串 "string" 
任意 函数 "function" 
任意 内 置 对 象 ( 非 函 数 ) "object" 
任意 逢 主 对 象 由 编译 器 各 自 实现 的 字符 串 ， 但 不 是 "undefined"、 


"boolean"、"number" 或 "string" 





typeof 最 常用 的 用 法 是 写 在 表达 式 中 ， 束 像 这 样 : 





(typeof value=="string")?"'"+value+"'":value 





typeof 运 算 符 同 样 在 switch 语 句 〈( 见 5.4.3 节 》〉 中 非常 有 用 ， 需 要 注意 
的 是 ，typeof 运 算 符 可 以 带 上 圆 括 号 ， 这 让 typeof 看 起 来 像 一 个 函数 名 ， 
而 不 是 一 个 运算 符 关 键 字 : 





typeof(i) 





我 们 注意 到 ， 当 操作 数 是 null 的 时 候 ，typeof 将 返回 "object"。 如 果 
想 将 null 和 对 象 区 分 开 ， 则 必须 针对 特殊 值 显 式 检测 。 对 于 宿主 对 象 来 
说 ，typeof 有 可 能 并 不 返回 "object"， 而 返回 字符 串 。 但 实际 上 客户 端 
JavaScript 中 的 大 多 数 宿主 对 象 都 是 "object" 类 型 。 





由 于 所 有 对 象 和 数组 的 typeof 运 算 结 果 是 "object" 而 不 是 "function'"， 
因此 它 对 于 区 分 对 象 和 其 他 原始 值 来 说 是 很 有 帮助 的 。 如 果 想 区 分 对 象 
的 类 ， 则 需要 使 用 其 他 的 手段 ， 比 如 使 用 instanceof 运 算 符 〈 人 参照 4.9.4 
节 ) 、class 特 性 (参照 6.8.2 节 )〉 以 及 constructor 属 性 (参照 6.8.1 节 和 
39.2.2 节 ) 。 


尽管 JavaScript 中 的 函数 是 对 象 的 一 种 ， 但 typeof 运 算 符 还 是 将 函数 
特殊 对 待 ， 对 函数 做 typeof 运 算 有 着 特殊 的 返回 值 。 在 JavaScript 中 ， 函 
数 和 “可 执行 的 对 象 ”(callable object) 有 着 微妙 的 区 别 。 所 有 的 函数 都 
是 可 执行 的 《callable) ， 但 是 对 象 也 有 可 能 是 可 执行 的 ， 可 以 像 调用 函 
数 一 样 调用 它 ， 但 它 并 不 是 个 真正 的 函数 。 根 据 ECMAScript 3 规范 ， 
对 于 所 有 内 置 可 执行 对 象 ，typeof 运 算 符 一 律 返回 "function"。 
ECMAScript ”5 规范 则 扩充 至 所 有 可 执行 对 象 ， 包 括 内 置 对 象 〈native 
object) 和 牡 主 对 象 (host object) ， 所 有 可 执行 对 象 进行 typeof 运 算 都 
将 返回 "function"。 大 多 数 浏 览 器 厂 商 也 将 JavaScript 的 原生 函数 对 象 
Cnative function object) 当成 它们 的 宿主 对 象 的 方法 来 使 用 。 但 微软 却 
一 直 将 非 原 生 可 执行 对 象 Cnon-native callable object) 当成 其 客户 端的 
方法 来 使 用 ， 在 IE ”9 之 前 的 版 本 中 ， 非 原生 可 执行 对 象 的 typeof 运 算 将 
返回 "object"， 尽 管 它们 的 行为 和 函数 非常 相似 。 而 在 正 9 中 ， 这 些 客户 
疹 方 法 是 其 正 的 内 置 函 数 对 象 Cnative function object) 。 要 了 解 真 正 的 

函数 和 可 执行 对 象 之 间 的 详细 差别 请 参照 8.7.7 节 。 


4.13.3 ”delete 运 算 符 
delete 是 一 元 操作 符 ， 它 用 来 删除 对 象 属性 或 者 数组 元 素 是 。 就 像 


赋值 、 递 增 、 递 减 运算 符 一 样 ，delete 也 是 具有 副作用 的 ， 它 是 用 来 做 
删除 操作 的 ， 不 是 用 来 返回 一 个 值 的 ， 例 如 : 























var 0={X:1,y:2};// 定 义 一 个 对 象 
delete 0.X;V// 删 除 一 个 
"x"in o//= >false: 这 个 属性 在 对 象 中 不 再 存在 
var a=[1,2,3];// 定 义 一 个 数组 
delete a[21;// 删 除 最 后 一 个 数组 元 素 

2 in ai;//=>false :元素 2 在 数组 中 己 经 不 存在 了 
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a， 二 >3 :注意 ， 和 没有 改变 ， 尽 管 上 一 行 代码 删除 了 这 个 元 素 ， 但 删除 操作 留 下 了 一 
个 “ 洞 “， 实 际 上 并 没有 修改 数组 的 长 度 ， 因 此 a 数 组 的 长 度 仍然 是 3 
























































再 要 注意 的 是 ， 删 除 属 性 或 者 删除 数组 元 素 不 仅仅 是 设置 了 一 个 
undefined 的 值 。 当 删除 一 个 属性 时 ， 这 个 属性 将 不 再 存在 。 读 取 一 个 不 


存在 的 属性 将 返回 undefined， 但 是 可 以 通过 in 运算 符 〈 见 4.9.3 节 ) 来 检 
测 这 个 属性 是 人 否 在 对 象 中 存在 。 


delete 和 希望 他 的 操作 数 是 一 个 无 值 ， 如 果 它 不 是 左 值 ， 那 么 delete 将 
不 进行 任何 操作 同时 返回 true。 人 否则 ，delete 将 试图 删除 这 个 指定 的 左 
值 。 如 果 删 除 成 功 ，delete 将 返回 true。 然 而 并 不 是 所 有 的 属性 都 可 删 
除 ， 一 些 内 置 核心 和 客户 端 属性 是 不 能 删除 的 ， 用 户 通 过 var 语 句 声 明 
同样 ， 通 过 function 语 句 定 义 的 函数 和 函数 参数 也 不 
能 删除 。 


在 ECMAScript ”5 严格 模式 中 ， 如 果 delete 的 操作 数 是 非法 的 ， 比 如 
变量 、 函 数 或 函数 参数 ，delete 操 作 将 抛 出 一 个 语法 错误 
CSyntaxError) 异常 ， 只 有 操作 数 是 一 个 属性 访问 表达 式 〈 见 4.4 节 ) 的 
时 候 它 才 会 正常 工作 。 在 严格 模式 下 ，delete 删 除 不 可 配置 的 属性 〈 参 
照 6.7 节 ) 时 会 抛 出 一 个 类 型 错误 异常 。 在 非 严 格 模式 下 ， 这 些 delete 操 
ee 只 是 简单 地 返回 false， 以 表明 操作 数 不 能 执行 删除 操 


这 里 有 一 些 关 于 delete 运 算 符 的 例子 : 




















Var 0={X:1,y:2};// 定 义 一 个 变量 ， 初 始 化 为 对 象 
delete 0o.x;// 删 除 一 个 对 象 属性 ， 返 回 true 
typeof 0.x;// 属 性 不 存在 ， 返 回 "undefined" 
delete 0o.x;// 删 除 不 存在 的 属性 ， 返 回 true 
delete 0;// 不 能 删除 通过 var 声 明 的 变量 ， 返 回 false 
// 在 严格 模式 下 ， 将 抛 出 一 个 异常 
delete 1;// 参 数 不 是 一 个 左 值 ， 返 回 true 
this .x=1;// 给 全 局 对 象 定义 一 个 属性 ， 这 里 没有 使 用 var 
delete x;// 试 图 删除 它 ， 在 非 严 格 模式 下 返回 true 
// 在 严格 模式 下 会 抛 出 异常 ， 这 时 使 用 "delete this .x" 来 代 蔡 
XxX;// 运 行 时 错误 ， 没 有 定义 x 












































































































































































































































6.3” 节 还 会 有 关于 delete 操 作 符 的 讨论 。 
4.13.4 void 运算 符 


void 是 一 元 运算 符 ， 它 出 现在 操作 数 之 前 ， 操 作 数 可 以 是 任意 类 
型 。 这 个 运算 人 符 并 不 是 经 常 使 用 :操作 数 会 照常 计算 但 忽略 计算 结果 
并 返回 undefined。 由 于 void 会 忽略 操作 数 的 值 ， 因 此 在 操作 数 具 有 副 作 
用 的 时 候 使 用 void 来 让 程序 更 具 语 义 。 








这 个 运算 符 最 常用 在 客户 端的 URL 一 一 javascript:URL 中 ， 在 URL 中 
可 以 写 带 有 副作用 的 表达 式 ， 而 void 则 让 浏览 器 不 必 显 示 这 个 表达 式 的 
计算 结果 。 例 如 ， 经 常 在 HTML 代 码 中 的 =a 二 标签 里 使 用 void 运 算 符 : 








<a href="javascript:void window.open();" > 打开 一 个 新 窗口 </a> 














通过 给 过 a> 的 onclick 绑 定 一 个 事件 处 理 程 序 要 比 在 href 中 
写 "javascript:URL" 要 更 加 清晰 ， 当 然 ， 这 样 的 话 void 操作 符 融 可 有 可 无 
本 


413.5 人 如 号 运算 符 () 
逗号 运算 符 是 二 元 运算 符 ， 它 的 操作 数 可 以 是 任意 类 型 。 它 首先 计 


由 然后 计算 右 操 作 数 ， 最 后 返回 右 操作 数 的 值 ， 看 下 面 的 示 
列 代码 ; 











i=0, j=1, k=2; 





计算 结果 是 2， 它 和 下 面 的 代码 基本 上 是 等 价 的 : 





i=0;j=1;k=2; 





总 是 会 计算 左 侧 的 表达 式 ， 但 计算 结果 名 略 掉 ， 也 就 是 说 ， 只 有 左 
侧 表 达 式 具有 副作用 ， 才 会 使 用 喜 号 运算 符 让 代码 变 得 更 通顺 。 逗 号 运 
算 符 最 常用 的 场景 是 在 for 循 环 中 《〈 见 5.5.3 节 ) ， 这 个 for 循 环 通常 具有 
多 个 循环 变量 : 





//for 循 环 中 的 第 一 个 逗号 是 var 语 句 的 一 部 分 

// 第 二 个 辟 号 是 逗号 运算 符 

// 它 将 两 个 表达 式 〈i++ 和 j- - ) 放 在 一 条 for 循环 中 的 ) 语句 中 
for(var i=0,j=10;i<j;i+t++,j--) 

console.1log(i+j); 























[作者 在 这 里 揭示 了 一 种 很 容易 忽略 的 现象 。 假 设 存 在 a=1， 那 么 "b= 
(a++)+a;" 将 如 何 计算 结果 呢 ? 按 照 正文 所 述 ， 顺 序 应 该 是 ，1) 计算 b， 
2) 计算 at++ (假设 值 为 c， ，3) 计算 a，4) 计算 cta，5) 将 c+ta 的 结果 
赋值 给 b。 按 照 “++? 的 定义 ， 第 2) 步 中 a++ 的 结果 依然 是 1， 即 c 为 1， 随 


后 a 立即 增 1， 因 此 在 执行 第 3) 步 时 ，a 的 值 已 经 是 2。 所 以 b 的 结果 为 
3。 很 多 初学 者 会 误 认 为 a 增 1 的 操作 是 在 表达 式 计算 完毕 后 执行 的 。 
[2] 求 余 运 算 也 叫做 模 运 算 ， 模 就 是 余数 。 

[3] 对 象 o 中 存在 一 个 隐藏 的 成 员 ， 这 个 成 员 指 癌 其 父 类 的 原型 ， 如 果 父 
类 的 原型 是 另外 一 个 类 的 实例 的 话 ， 则 这 个 原型 对 象 中 也 存在 一 个 隐藏 
成 员 指 同 另 外 一 个 类 的 原型 ， 这 种 链条 将 许多 对 象 或 类 串 接 起 来 ， 既 是 
原型 链 。 原 文 所 讲 f.prototype 不 在 o 的 原型 链 中 也 就 是 说 fo 没有 派生 关 
系 ， 更 多 细节 请 参照 6.2.2 节 。 

[4] 这 里 的 原文 是 parse， 意 思 是 “解析 ”这 段 字 符 串 ， 更 精确 地 讲 ， 应 该 
是 “编译 ”这 段 字 符 串 ， 编 译 不 包括 代码 的 执行 。 

[5] 原 文 有 误 ， 己 修改 。 

[6] 比 如 这 段 代 码 : 

var foo=function(a){ 

eval(a); 

六 

foo("return;"); 

按照 原文 的 意思 ， 这 上 段 代 码 中 执行 eval(a) 的 上 下 文 是 全 局 的 ， 在 全 局 上 
下 文中 使 用 returmn 会 抛 出 语法 错误 :return not in function 。 

[这 里 是 指 那些 没有 语义 的 代码 所 段 通过 eval0 执 行 都 会 抛 出 语法 错误 
异常 。 

[8] 这 里 的 场景 其 实 不 包括 如 果 变 量 已 经 定义 且 值 为 false 的 情况 。 

[9] 如 果 你 是 C++ 程序 员 ， 请 注意 JavaScript 中 的 delete 和 C++ 中 的 delete 是 
完全 不 同 的 。 在 JavaScript 中 ， 内 存 的 回收 是 通过 垃圾 回收 自动 回收 的 ， 
你 不 用 担心 内 存 的 显 式 释放 问题 ， 这 样 则 完全 不 用 像 C++ 那 样 通 过 delete 
来 删除 整个 对 象 。 























第 5 章 ”语句 


第 4 章 提 到 ， 表 达 式 在 JavaScript 中 是 短语 ， 那 么 语句 (statement) 
就 是 JavaScript 整 句 或 命令 。 正 如 英文 是 用 句号 作 结 尾 来 分 隔 语句 ， 
JavaScript 语 句 是 以 分 号 结束 〈 见 2.5 节 ) 。 表 达 式 计算 出 一 个 值 ， 但 语 
句 用 来 执行 以 使 某 件 事 发 生 。 


“使 某 件 事 友 生 ” 的 一 个 方法 是 计算 融 有 副作用 的 表达 式 。 诸 如 赋值 
和 函数 调用 这 些 有 副作用 的 表达 式 ， 是 可 以 作为 单独 的 语句 的 ， 这 种 把 
表达 式 当 做 语句 的 用 法 也 称 做 表达 式 语 句 (expression statement) 。 类 
似 的 语句 还 有 声明 语句 (declaration statement) ， 声 明 语 句 用 来 声明 新 
变量 或 定义 新 函数 。 


JavaScript 程 序 无 非 就 是 一 系列 可 执行 语句 的 集合 。 默 认 情 况 下 ， 
JavaScript 解 释 融 依照 语句 的 编写 顺序 依次 执行 。 另 一 种 "使 某 件 事 发 
生 ” 的 方法 是 改变 语句 的 默认 执行 顺序 。JavaScript 中 有 很 多 语句 和 控制 
结构 (control structure) 来 改变 语句 的 默认 执行 顺序 : 


-条件 (conditional) 语句 ，JavaScript 解 释 器 可 以 根据 一 个 表达 式 的 
值 来 判断 是 执行 还 是 跳 过 这 些 语句 ， 如 if 语 句 和 switch 语 句 。 


-循环 (loop) 语句 ， 可 以 重复 执行 语句 ， 如 while 和 for 语 句 。 


:路 转 〈jump) 语句 ， 可 以 让 解释 右 跳 转 至 程序 的 其 他 部 分 继续 执 
行 ， 如 break、return 和 和 throw 语 句 。 


接 下 来 的 几 节 将 介绍 JavaScript 中 各 式 各 样 的 语句 及 其 语法 。 本 章 最 
后 的 表 5-1 对 这 些 语句 作 了 总 结 。 一 个 JavaScript 程 序 无非 是 一 个 以 分 号 
分 隅 的 语句 集合 ， 所 以 一 旦 掌握 了 JavaScript 语 句 ， 就 可 以 开始 编写 
JavaScript 程 序 了 。 


5.1 表达 式 语句 
具有 副作用 的 表达 式 是 JavaScript 中 最 简单 的 语句 (5.7.3 节 介绍 了 一 


种 重要 的 无 副作用 的 表达 式 语句 ) 。 这 类 语句 已 经 在 第 4 章 讲述 了 。 赋 
值 语 句 是 一 类 比较 重要 的 表达 式 语句 ， 例 如 : 























greeting="Hello"+name; 
递增 运算 符 〈++) 和 递减 运算 符 〈--) 和 赋值 语句 有 关 。 它 们 的 作 
用 是 改变 一 个 变量 的 值 ， 就 像 执 行 一 条 赋值 语句 一 样 : 


Counter++， 


delete 运 算 符 的 重要 作用 是 删除 一 个 对 象 的 属性 ， 所 以 ， 它 一 般 作 
为 语句 使 用 ， 而 不 是 作为 复 淋 表达 式 的 一 部 分 : 


delete o.x; 


函数 调用 是 表达 式 语 句 的 另 一 个 大 类 ， 例 如 : 


alert(greeting ) 
Window,cJlose() ; 


虽然 这 些 客户 端 函 数 调用 都 是 表达 式 ， 但 它们 都 对 Web 浏 览 器 造成 
了 一 些 影响 ， 所 以 我 们 认为 它们 也 是 语句 。 调 用 一 个 没有 任何 副作用 的 
函数 是 没有 意义 的 ， 除 非 它 是 复杂 表达 式 或 赋值 语句 的 一 部 分 ， 例 如 ， 
不 可 能 计算 了 一 个 余弦 值 随即 把 它 丢 弃 : 





Math.cos(x); 








相反 ， 得 出 了 余弦 值 束 得 把 它 赋值 给 一 个 变量 ， 以 便 将 来 才能 使 用 
这 个 值 : 





cx=Math.cos(x); 








再 次 提醒 读者 ， 这 些 示例 中 的 每 行 代码 都 是 以 分 号 结束 的 。 
5.2 ”复合 语句 和 空 语句 
可 以 用 逗号 运算 符 〈 见 4.13.5 节 ) 将 几 个 表达 式 连接 在 一 起 ， 形 成 


一 个 表达 式 ， 同 样 ，JavaScript 中 还 可 以 将 多 条 语句 联合 在 一 起 ， 形 成 一 
条 复合 语句 (compound statement) 。 只 须 用 花 括号 将 多 条 语句 括 起 来 
即 可 。 因 此 ， 下 面 几 行 代码 束 可 以 当成 一 条 单独 的 语句 ， 使 用 在 
JavaScript 中 任何 希望 使 用 一 条 语句 的 地 方 : 








{ 

x=Math .PI; 

cx=Math.cos(x); 
console.1og("cos(T)="+CX) ， 


} 














关于 语句 块 有 几 点 需要 注意 ， 第 一 ， 语 句 块 的 结尾 不 需要 分 写 。 块 
中 的 原始 语句 必须 以 分 号 结束 ， 但 语句 块 不 需要 。 第 二 ， 语 句 块 中 的 行 
都 有 缩 进 ， 这 不 是 必需 的 ， 但 整齐 的 缩 进 能 让 代码 可 读 性 更 强 ， 更 容易 
理解 。 最 后 ， 需 要 注意 ，JavaScript 中 没有 块 级 作用 域 ， 在 语句 块 中 声明 
的 变量 并 不 是 语句 块 私有 的 《参照 3.10.1 节 ) 。 


将 多 条 语句 合并 成 一 个 大 语句 块 的 做 法 在 JavaScript 编 程 中 非常 常 
见 。 类 似 表 达 式 通常 包含 子 表达 式 一 样 ， 很 多 JavaScript 语 句 包 含 其 他 子 
语句 。 从 形式 上 讲 ，JavaScript 语 法 通常 允许 一 个 语句 块 只 包含 一 条 子 语 
句 。 例 如 ，while 循 环 的 循环 体 就 可 以 只 包含 一 条 语句 。 使 用 语句 块 ， 
人 这 个 语句 块 可 以 作为 一 条 语句 使 

















在 JavaScript 中 ， 当 希望 多 条 语句 被 当做 一 条 语句 使 用 时 ， 使 用 复合 
语句 来 替代 。 空 语句 (empty statement) 则 恰好 相反 ， 它 允许 包含 0 条 语 
名 的 语句 。 衬 语句 如 下 所 示 : 

















JavaScript 解 释 嚣 执行 空 语句 时 它 显 然 不 会 执行 任何 动作 。 但 实践 证 
明 ， 当 创建 一 个 具有 空 循环 体 的 循环 时 ， 空 语句 有 时 是 很 有 用 的 。 例 如 
下 面 的 for 循 环 (for 循 环 详 见 5.5.3 节 》: 








// 初 始 化 一 个 数组 a 
for(i=0;i<~a.length;a[i++]=0); 





在 这 个 循环 中 ， 所 有 的 操作 都 在 表达 式 a[it++]=0 中 完成 ， 这 里 并 不 


需要 任何 循环 体 。 然 而 JavaScript 需 要 循环 体 中 至 少 包含 一 条 语句 ， 因 
此 ， 这 里 只 使 用 了 一 个 单独 的 分 号 来 表示 一 条 空 语句 。 


注意 ， 在 for 循 环 、while 循 环 或 if 语句 的 右 圆 括号 后 的 分 号 很 不 起 
眼 ， 这 很 可 能 造成 一 些 致命 bug， 而 这 些 bug 很 难 定位 到 。 例 如 ， 下 面 的 
代码 的 执行 结果 可 能 束 不 是 程序 作者 想 要 的 效果 : 























if((a==0) | |(b==9) ) ;// 糟 糕 ! 这 一 行 代 码 什么 都 没 做 .. ， 
0=null;// 这 一 行 代码 总 是 会 执行 











如 果 有 特殊 的 目的 需要 使 用 空 语 句 ， 最 好 在 代码 中 添加 注释 ， 这 样 
可 以 更 清楚 地 说 明 这 条 空 语句 是 有 用 的 ， 例 如 : 








for(i=0;i<a,.length;a[i++]=0)/*empty*/; 





5.3 ”声明 语句 


var 和 function 都 是 声明 语句 ， 它 们 声明 或 定义 变量 或 函数 。 这 些 语 
句 定 义 标 识 符 《变量 名 和 函数 名 ) 并 给 其 赋值 ， 这 些 标识 符 可 以 在 程序 
中 任意 地 方 使 用 。 声 明 语句 本 和 映 什么 也 不 做 ， 但 它 有 一 个 重要 的 意义 ， 
通过 创建 变量 和 函数 ， 可 以 更 好 地 组 织 代 码 的 语义 。 


接 下 来 的 几 节 将 会 讲述 var 语 句 和 functuion 语 句 ， 但 并 不 包含 变量 和 
函数 的 全 部 内 容 ， 更 多 关于 变量 的 内 容 请 参照 3.9 节 和 3.10 节 。 更 多 关于 
函数 的 内 容 请 参照 第 8 章 。 

5.3.1 var 


Var 语句 用 来 声明 一 个 或 者 多 个 变量 ， 它 的 语法 如 下 : 























var name_1[=value_1][,...,name_n[=value_n]] 








关键 字 var 之 后 跟随 的 是 要 声明 的 变量 列表 ， 列 表 中 的 每 一 个 变量 
都 可 以 带 有 初始 化 表达 式 ， 用 于 指定 它 的 初始 值 ， 例 如 : 





var i;// 一 个 简单 的 变量 











var j=0;// 一 个 带 有 初始 值 的 变量 
var p,q;// 两 个 变量 E 
var greeting="hello"+name;// 更 复杂 的 初始 化 表达 式 
var x=2.34, =Math.cos(0. 75), r,theta;// 很 多 变量 
var Xx=2, y=x*Xx;// 第 二 个 变量 使 J 了 第 个 变量 
var x=2, // 更 多 变量 
f= function(x){return x*X}, // 每 一 个 变量 都 独占 一 行 
y=f (x); 







































































如 果 var 语 句 出 现在 函数 体内 ， 那 么 它 定义 的 是 一 个 局 部 变量 ， 其 
作用 域 就 是 这 个 函数 。 如 果 在 顶层 代码 中 使 用 var 语 句 ， 它 声明 的 是 全 
局 变量 ， 在 整个 JavaScript 程 序 中 都 是 可 见 的 。 正 如 在 3.10.2 节 提 到 的 ， 
全 局 变量 是 全 局 对 象 的 属性 。 然而 和 其 他 全 局 对 象 属性 不 同 的 是 ，var 

声明 的 变量 是 无 法 通过 delete 删 除 的 。 


如 果 var 语 句 中 的 变量 没有 指定 初始 化 表达 式 ， 那 么 这 个 变量 的 值 
初始 为 undefined。3.10.1 节 已 经 提 到 ， 变 量 在 声明 它们 的 脚本 或 函数 中 
都 是 有 定义 的 ， 变 量 声明 语句 会 被 “提前 ”至 脚本 或 者 函数 的 顶部 。 但 是 
初始 化 的 操作 则 还 在 原来 var 语 句 的 位 置 执行 ， 在 声明 语句 之 前 变量 的 
值 是 undefined。 


需要 注意 的 是 ，var 语 句 同样 可 以 作为 for 循 环 或 者 for/in 循 环 的 组 成 


部 分 (和 在 循环 之 外 声明 的 变量 声明 一 样 ， 这 里 声明 的 变量 也 会 “所 
前 ”) 。 这 里 重复 一 下 3.9 节 的 例子 : 



































for(var i=0;i<10;i++)console.log(i); 
for(var i=0,j=10;i<10;i++,j--)console.1log(i*j); 
for(var i in o)console.1log(i); 





注意 ， 多 次 声明 同一 个 变量 是 无 所 谓 的 。 
5.3.2 _ function 
关键 字 function 用 来 定义 函数 。 在 4.3 节 中 我 们 已 经 见 过 函数 定义 表 


达 式 。 函 数 定义 也 可 以 写成 语句 的 形式 。 例 如 ， 下 面 示 例 代 码 中 的 两 种 
定义 写法 : 








var f=function(x){return x+1;}// 将 表达 式 赋值 给 一 个 变量 
function f(x){return x+1; }// 舍 有 变量 名 的 语 各 























函数 声明 语句 的 语法 如 下 : 





function funcname([argi[,arg2[...,argn]]])t 
statements 


funcname 是 要 声明 的 函数 的 名 称 的 标识 符 。 函 数 名 之 后 的 圆 括号 中 
征 参数 列表 ， 参 数 之 间 使 用 逗号 分 隔 。 当 调用 函数 时 ， 这 些 标识 符 则 指 
代 传 入 函数 的 实 参 。 


函数 体 是 由 JavaScript 语 句 组 成 的 ， 语 句 的 数量 不 限 ， 且 用 人 花 括 号 括 
起 来 。 在 定义 函数 时 ， 并 不 执行 函数 体内 的 语句 ， 它 和 调用 函数 时 竺 执 
行 的 新 函数 对 象 相 关联 。 注 意 ，function 语 句 里 的 花 括号 是 必需 的 ， 这 
和 while 循 环 和 其 他 一 些 语句 所 使 用 的 语句 块 是 不 同 的 ， 即 使 函数 体 只 
包含 一 条 语句 ， 仍 然 必 须 使 用 花 括号 将 其 括 起 来 。 


下 面 是 一 些 函 数 声明 的 例子 : 





function hypotenuse(x,y)t{ 
return Math.sqrt(x*x+ty*y);// 下 一 节 会 i 


到 return 

















} 

function factorial(n){// 一 个 递归 函数 
if(n==1)return 1; 

return n*factorial(n-1); 








函数 声明 语句 通常 出 现在 JavaScript 代 码 的 最 顶层 ， 也 可 以 租 套 在 其 
他 函数 体内 。 但 在 租 套 时 ， 了 水 数 声明 只 能 出 现在 所 艇 套 函 数 的 顶部 。 也 
就 是 说 ， 函 数 定义 不 能 出 现在 if 语 句 、while 循 环 或 其 他 任何 语句 中 ， 正 
是 由 于 函数 声明 位 置 的 这 种 限制 ，ECMAScript 标 准 规范 并 没有 将 函数 
声明 归 类 为 真正 的 语句 。 有 一 些 JavaScript 实 现 的 确 允 许 在 出 现 语句 的 地 
方 都 可 以 进行 函数 声明 ， 但 是 不 同 的 实现 在 细节 处 理 方式 上 有 很 大 差 
别 ， 因 此 将 函数 声明 放 在 其 他 的 语句 内 的 做 法 并 不 具备 可 移植 性 。 


尽管 函数 声明 语句 和 孙 数 定义 表达 式 包含 相同 的 函数 名 ， 但 二 者 仍 
然 不 同 。 两 种 方式 都 创建 了 新 的 函数 对 象 ， 但 函数 声明 语句 中 的 函数 名 
是 一 个 变量 名 ， 变 量 指向 函数 对 象 。 和 通过 var 声 明 变 量 一 样 ， 函 数 定 
义 语句 中 的 函数 被 显 式 地 “提前 ”到 了 脚本 或 函数 的 项 部 。 因 此 它们 在 整 
个 脚本 和 函数 内 都 是 可 见 的 。 使 用 var 的 话 ， 只 有 变量 声明 提前 了 一 一 











变量 的 初始 化 代码 仍然 在 原来 的 位 置 。 然 而 使 用 函数 声明 语句 的 话 ， 函 
数 名 称 和 函数 体 均 提 前 : 脚本 中 的 所 有 函数 和 函数 中 所 有 髓 套 的 函数 都 
会 在 当前 上 下 文中 其 他 代码 之 前 声明 。 也 就 是 说 ， 可 以 在 声明 一 个 
JavaScript 函 数 之 前 调用 它 。 


和 var 语 名 一样 ， 函 数 声明 语句 创建 的 变量 也 是 无 法 删除 的 。 但 是 
这 些 变量 不 是 只 读 的 ， 变 量 值 可 以 重 写 。 


5.4 条件 语 句 


条 件 语句 是 通过 判断 指定 表达 式 的 值 来 决定 执行 还 是 跳 过 茶 些 语 
句 。 这 些 语句 是 代码 的 “决策 点 ”>， 有 时 称 为 “分 文 ”。 如 果 说 JavaScript 解 
释 器 是 按照 代码 的 “路 径 ?” 执 行 的 ， 条 件 语 句 束 是 这 条 路 径 上 的 分 又 点 ， 
程序 执行 到 这 里 时 必须 选择 其 中 一 条 路 径 继 续 执 行 。 


下 面 几 节 将 会 讲述 JavaScript 中 基本 的 条 件 语句 ， 如 ifelse 语 句 和 
Switch 语句 ，switch 语 句 是 一 种 更 复杂 的 多 分 文 条 件 语 句 。 


4 二 过 
if 语句 是 一 种 基本 的 控制 语句 ， 它 让 JavaScript 程 序 可 以 选择 执行 路 


更 准确 地 说 ， 就 是 有 条 件 地 执行 语句 ， 这 种 语句 有 两 种 形式 ， 第 一 
种 是 : 





if(expression) 
statement 





在 这 种 形式 中 ， 需 要 计算 expression 的 值 ， 如 果 计 算 结果 是 真 值 ， 
那么 就 执行 statement。 如 果 expression 的 值 是 假 值 ， 那 么 就 不 执行 
statement。 例 如 : 








if(username==nul1)// 如 果 username 是 null 或 者 undefined 
username="John Doe";// 对 其 进行 定 》 


























同样 地 : 








// 如 果 username 是 nul1l1、undefined、false、0、"" 或 者 NaN， 那 么 给 它 赋 一 个 新 值 


if(!username)username="John Doe"; 





需要 注意 的 是 ，if 语 名 中 括 住 expression 的 圆 括号 在 语法 上 是 必需 
的 。 


JavaScript 语 法 规定 ， 计 关键 字 和 带 圆 括号 的 表达 式 之 后 必须 跟随 一 
条 语句 ， 但 可 以 使 用 语句 块 将 多 条 语句 合并 成 一 条 。 因 此 ， 计 语句 的 形 
式 如 下 所 示 : 











if(!address){ 
address=""， 
message="Please specify a mailing address.",， 





if 语 句 的 第 二 种 形式 引入 了 else 从 名， 当 expression 的 值 是 false 的 时 
候 执 行 else 中 的 逻辑 。 其 语法 如 下 : 





if(expression) 
statement1 
else 
statement2 





在 这 段 代 码 中 ， 当 expression 为 真 值 时 执行 statement1， 当 expression 
为 假 值 时 执行 statement2， 例 如 : 





if(n==1) 

console.log("You have 1 new message."); 
else 

console.log("You have"+n+"new messages."); 





当 在 ifyelse 语 句 中 蔡 套 使 用 诗 语句 时 ， 必 须 注意 确保 else 语 句 匹 配 正 
确 的 证 语句 。 考 虑 如 下 代码 : 





console.log("i equals k"); 
else 
console.log("i doesn't equal j");// 错 误 !! 





在 这 个 示例 中 ， 内 层 if 语 句 构 成 了 外 层 if 语 句 所 需要 的 子 句 。 但 
是 ， 让 和 else 的 匹配 关系 并 不 清晰 《只 有 缩 进 给 出 了 一 些 暗示 ) ， 而 且 在 
这 个 例子 中 ， 缩 进 给 出 的 暗示 是 错误 的 ， 因 为 JavaScript 解 释 器 将 上 述 代 
码 实 际 解释 为 : 





if(i==j)t{ 

if(j==k) 

console.log("i equals k"); 

else 

console.log("i doesn't equal j");// 错 误 ! 
} 





和 大 多 数 编程 语言 一 样 ，JavaScript 中 的 证 、else 匹 配 规则 是 ，else 总 
是 和 就 近 的 主语 名 匹配。 为 了 让 这 个 例子 可 读 性 更 强 、 更 易 理 解 、 更 方 
便 维 护 和 调试 ， 应 当 适 当地 使 用 花 括号 : 





if(i==j){ 
if(j==k){ 
console.log("i equals k"); 


} 


} 
else{// 花 括号 让 代码 结构 更 加 清晰 
console.log("i doesn't equal j"); 


} 











虽然 这 并 不 是 本 书 中 所 使 用 的 编码 风格 ， 但 许多 程序 员 都 有 将 迁 和 
else 语 句 主 体 用 人 花 括号 括 起 来 的 习惯 束 像 在 类 似 while 循 环 这 样 的 复合 
语句 中 一 样 ) ， 即 便 每 条 分 文 只 有 一 条 语句 ， 但 坚持 这 样 做 可 以 避免 刚 
才 这 种 程序 歧义 的 问题 。 


5.4.2 else if 


if/else 语 句 通 过 判断 一 个 表达 式 的 计算 结果 来 选择 执行 两 条 分 文中 
的 一 条 。 但 当代 码 中 有 多 条 分 支 的 时 候 该 怎么 办 呢 ? 一 种 解决 办 法 是 使 
用 else f 语 句 。else if 语 句 并 不 是 真正 的 JavaScript 语 句 ， 它 只 不 过 是 多 条 
if/else 语 句 连 在 一 起 时 的 一 种 惯用 写法 。 














if(n==1){// 执 行 代码 块 1 


else if(n==2){// 执 行 代码 块 2 





else if(n==3){// 执 行 代码 块 3 
} 




















else{// 之 前 的 条 件 都 为 false， 则 执行 这 里 的 代码 块 4 
} 





这 种 代码 并 没有 什么 特别 之 处 ， 它 由 多 条 让 语 名 组成， 每 条 让 语句 
的 else 从 句 又 包含 另外 一 条 i f 语 句 。 可 以 用 i f 语 句 的 散 套 形式 来 完成 在 
语法 上 等 价 的 代码 ， 但 与 之 相 比 ， 显 然 使 用 else  f 写 法 更 清晰 也 更 可 
取 : 





if(n==1){f// 执 行 代码 块 1 
} 

elsef{ 
if(n==2){// 执 行 代 码 块 2 
} 


elsef{ 

if(n==3){// 执 行 代码 块 3 
else{// 如 果 所 有 的 判断 都 是 false， 执 行 代码 块 4 
} 


} 
} 











5.4.3 switch 


计 语 句 在 程序 执行 过 程 中 创建 一 条 分 文 ， 并 且 可 以 使 用 else if 来 处 理 
多 条 分 支 。 然 而 ， 当 所 有 的 分 支 都 依赖 于 同一 个 表达 式 的 值 时 ，else if 
并 不 是 最 佳 解决 方案 。 在 这 种 情况 下 ， 重 复 计算 多 条 if 语 句 中 的 条 件 表 
达 式 是 非常 浪费 的 做 法 。 


switch 语 句 正 适合 处 理 这 种 情况 。 关 键 字 switch 之 后 紧 跟 着 圆 括号 
括 起 来 的 一 个 表达 式 ， 随 后 是 一 对 人 花 括 号 括 起 来 的 代码 块 : 





Switch(expression){ 
statements 





然而 ，switch 语 句 的 完整 语法 要 比 这 复杂 一 些 。 代 码 块 中 可 以 使 用 
多 个 由 case 关 键 字 标识 的 代码 片段 ，case 之 后 是 一 个 表达 式 和 一 个 冒 
写 ，case 和 标记 语句 很 类 似 ， 只 是 这 个 标记 语句 并 没有 名 字 ， 它 只 和 它 
后 面 的 表达 式 关 联 在 一 起 。 当 执行 这 条 switch 语 句 的 时 候 ， 它 首先 计算 
expression 的 值 ， 然 后 查找 case 子 句 中 的 表达 式 是 否 和 expression 的 值 相 











case， 那 么 将 会 执行 这 个 case 对 应 的 代码 块 。 如 果 找 不 到 匹配 的 case， 那 
么 将 会 执行 "default:" 标 签 中 的 代码 块 。 如 果 没 有 "default:" 标 签 ，switch 
语句 将 跳 过 它 的 所 有 代码 块 。 


switch 语 句 是 非常 容易 引起 混淆 的 。 用 例子 来 解释 会 比较 清晰 一 
些 ， 下 面 的 switch 语 句 和 方才 展示 的 if/else 语 句 是 等 价 的 : 








switch(n){ 
case 1:// 如 果 n===1， 从 这 里 开始 执行 
// 执 行 代码 块 1 
break;// 停 止 执行 switch 语句 
case 2:// 如 果 n===2， 从 这 里 执行 
// 执 行 代码 块 2 
break;// 在 这 里 停止 执行 switch 语句 
case 3:;// 如 果 n===3， 从 这 里 执行 















































break;// 在 这 里 停止 执行 sSwitch 语 句 
:// 如 果 所 有 的 条 件 都 不 匹配 


break;// 在 这 里 停止 执行 switch 语句 
} 



























































需要 注意 的 是 ， 在 上 面 的 代码 中 ， 在 每 一 个 case 语 句 块 的 结尾 处 都 
使 用 了 关键 字 break。 我 们 将 在 后 面 介绍 break 语 句 ，break 语 句 可 以 使 解 
释 器 跳出 switch 语 句 或 循环 语句 。 在 switch 语 句 中 ，case 只 是 指明 了 要 执 
行 的 代码 起 点 ， 但 并 没有 指明 终点 。 如 果 没 有 break 语 句 ， 那 么 switch 语 
名 就 会 从 与 expression 的 值 相 匹配 的 case 标 签 处 的 代码 块 开始 执行 ， 依 次 
执行 后 续 的 语句 ， 一 直到 整个 switch 代 码 块 的 结尾 。 这 种 由 一 个 case 标 
签 执行 到 下 一 个 case 标 签 的 代码 逻辑 是 很 少 使 用 的 ， 在 大 多 数 情况 下 ， 
应 该 使 用 break 语 句 来 终止 每 个 case 语 句 块 。 当 然 ， 如 果 在 函数 中 使 用 
switch 语 句 ， 可 以 使 用 return 来 代替 break，return 和 break 都 用 于 终止 
Switch 语句 ， 也 会 防止 一 个 case 语 句 块 执行 完 后 继续 执行 下 一 个 case 语 名 
块 。 








下 面 的 switch 语 句 的 例子 更 加 贴近 实战 ， 它 根据 值 的 类 型 将 该 值 转 
换 为 字符 串 : 





function convert(x){ 
switch(typeof x){ 

case'number' :// 将 数字 转换 为 十 六 进 制 数 
return x.toString(16); 
case'string':// 返 回 两 端 带 双 引 号 的 字符 串 
return'"'+X+ 
default:// 使 用 普通 的 方法 转换 其 他 类 型 
return String(x); 



























































} 
} 


注意 ， 在 上 面 两 个 例子 中 ，case 关 键 字 后 跟随 的 是 数字 和 字符 串 直 
接 量 ， 在 实际 中 这 是 switch 语 句 最 常见 的 用 法 ， 但 是 ECMAScript 标 准 允 
许 每 个 case 关 键 字 跟随 任意 的 表达 式 。 


switch 语 句 首 先 计算 switch 关 键 字 后 的 表达 式 ， 然 后 按照 从 上 到 下 
的 顺序 计算 每 个 case 后 的 表达 式 ， 直 到 执行 到 case 的 表达 式 的 值 与 switch 
的 表达 式 的 值 相 等 时 为 止 一 。 由 于 对 每 个 case 的 匹配 操作 实际 上 


和 case 的 匹配 并 不 会 做 任何 类 型 转换 。 


由 于 每 次 执行 switch 语 句 的 时 候 ， 并 不 是 所 有 的 case 表 达 式 都 能 执 
行 到 ， 因 此 ， 应 当 避 免 使 用 带 有 副作用 的 case 表 达 式 ， 比 如 函数 调用 表 
达 式 和 赋值 表达 式 。 最 安全 的 做 法 就 是 在 case 表 达 式 中 使 用 常量 表达 


式 。 








前 面 提 到 过 ， 如 果 switch 表 达 式 与 所 有 case 表 达 式 都 不 匹配 ， 则 的 
行 标记 为 "default:" 的 语句 块 ; 如 果 没 有 "default:" 标 签 ， 则 switch 的 整个 
语句 块 都 将 跳 过 。 我 们 注意 到 ， 在 之 前 的 例子 中 ，"default:" 标 签 都 出 现 


在 switch 的 末尾 ， 位 于 所 有 case 标 签 之 后 。 当 然 这 是 最 合理 也 是 最 和 用 
的 写法 ， 实 际 上 ，"default:" 标 签 可 以 放置 在 switch 语 句 内 的 任何 地 方 。 
5.5 循环 


为 了 理解 条 件 语 句 ， 可 以 将 在 JavaScript 中 的 代码 想象 成 一 条 条 的 分 
支 路 径 。 循 环 语 句 〈looping statement) 就 是 程序 路 径 的 一 个 回路 ， 可 以 
让 一 部 分 代码 重复 执行 。JavaScript 中 有 4 种 循环 语句 : while、 
do/while、for 和 fovin。 下 面 几 节 将 会 依次 讲解 它们 。 其 中 最 常用 的 循环 
就 是 对 数组 元 素 的 裔 历 ，7.6 闻 详细 讨论 这 种 循环 和 使 用 数组 类 定义 的 
特殊 循环 方法 。 


5.5.1 while 


这 语句 是 一 种 基本 的 控制 语句 ， 用 来 选择 执行 程序 的 分 文 语句 。 和 
if 一 样 ，while 语 句 也 是 一 个 基本 循环 语句 ， 它 的 语法 如 下 : 








while(expression) 
statement 


在 执行 while 语 句 之 前 ，JavaScript 解 释 器 首先 计算 expression 的 值 ， 
如 果 它 的 值 是 假 值 ， 那 么 程序 将 跳 过 循环 体 中 的 逻辑 statement 转 而 执行 
程序 中 的 下 一 条 语句 。 反 之 ， 如 有 果 表 达 式 expression 是 真 值 ，JavaScript 
解释 器 将 执行 循环 体内 的 逻辑 ， 然 后 再 次 计算 表达 式 expression 的 值 ， 
这 种 循环 会 一 直 继 续 下 去 ， 直 到 expression 的 值 为 假 值 为 止 。 换 一 种 说 
法 惑 是 当 表 达 式 expression 是 真 值 时 则 循环 执行 statement， 注 意 ， 使 用 
while(true) 则 会 创建 一 个 死 循环 。 


通常 来 说 ， 我 们 并 不 想 让 JavaScript 反 复 执 行 同 一 操作 。 在 几乎 每 一 
次 循环 中 ， 都 会 有 一 个 或 多 个 变量 随 着 循环 的 迭代 而 改变 。 正 是 由 于 改 
变 了 这 些 变 量 ， 因 此 每 次 循环 执行 的 statement 的 操作 也 不 尽 相 同 。 而 
且 ， 如 果 改 变 的 变量 在 expression 中 用 到 ， 那 么 每 次 循环 表达 式 的 值 也 
不 同 。 这 一 点 非常 重要 ， 人 否则 一 个 初始 值 为 真 值 的 表达 式 的 值 永 远 都 是 
ee 循环 也 不 会 结束 ， 下 面 这 个 示例 所 示 的 while 循 环 输出 0 一 9 之 间 

















Var count=0 
while(count 雪 10){ 
console,.1og(count ) ; 
Count++; 


} 


可 以 发 现 ， 在 这 个 例子 中 ， 变 量 count 的 初始 值 是 0， 在 循环 执行 过 
程 中 ， 它 的 值 每 次 都 递增 1。 当 循环 执行 了 10 次 ， 表 达 式 的 值 就 变 成 了 
false( 即 ， 变 量 count 的 值 不 再 小 于 10)〉 ， 这 时 while 就 会 结束 ， 
JavaScript 解 释 占 将 执行 程序 中 的 下 一 条 语句 。 大 多 数 循 环 都 会 有 一 个 像 
count 这 样 的 计数 右 变 量 。 尺 管 循环 计数 右 常 用 、j、k 这 样 的 变量 名 ， 
但 如 果 想 要 让 代码 可 读 性 更 强 ， 束 应 当 使 用 更 具 语 义 的 变量 名 。 


5.5.2 do/while 
do/while 循 环 和 while 循 环 非常 相似 ， 只 不 过 它 是 在 循环 的 尾部 而 不 


古 顶 部 检测 循环 表达 式 ， 这 束 意 味 着 循环 体 至 少 会 执行 一 次 。do/while 
循环 的 语法 如 下 : 











do 


Statement 
while(expression); 





do/while 循 环 并 不 像 while 循 环 那么 常用 。 这 是 因为 在 实践 中 那 种 想 
要 循环 至 少 一 次 的 情况 并 不 和 常见， 下 面 是 一 个 do/while 循 环 的 例子 : 











function printArray(a){ 
var len=a.length, i=0; 
if(len==0) 
console.log("Empty Array"); 
elsef{ 

dof 

console.1log(a[i]); 
}while(++i<~1len); 

} 

} 





在 do/while 循 环 和 普通 的 while 循 环 之 间 有 两 点 语法 方面 的 不 同 之 
处 。 首 先 ，do 循 环 要 求 必 须 使 用 关键 字 do 来 标识 循环 的 开始 ， 用 while 
来 标识 循环 的 结尾 并 进入 循环 条 件 判断 ， 其 次 ， 和 while 循 环 不 同 ，do 
循环 是 用 分 号 结尾 的 。 如 果 while 的 循环 体 使 用 花 括号 括 起 来 的 话 ， 则 
while 循 环 也 不 用 使 用 分 号 做 结尾 。 


5.5.3 for 


for 语 句 提 供 了 一 种 比 while 语 句 更 加 方便 的 循环 控制 结构 。for 语 句 
对 第 用 的 循环 模式 做 了 一 些 简 化 。 大 部 分 的 循环 部 具有 特定 的 计数 占 变 
量 。 在 循环 开始 之 前 要 初始 化 这 个 变量 ， 然 后 在 每 次 循环 执行 之 前 都 检 
汕 一 下 它 的 值 。 最 后， 计数 器 变量 做 目 增 操作 ， 人 否则 就 在 循环 结束 后 、 
下 一 次 判断 循环 条 件 前 做 修改 。 在 这 一 类 循环 中 ， 计 数 器 的 三 个 关键 操 
作 是 初始 化 、 检 测 和 更 新 。for 语 句 就 将 这 三 步 操 作 明 确 声明 为 循环 语法 
的 一 部 分 ， 各 目 使 用 一 个 表达 式 来 表示 。for 语 句 的 语法 如 下 : 








for(initialize;test;increment) 
statement 





initialize、test 和 increment 三 个 表达 式 之 间 用 分 号 分 隔 ， 它 们 分 别 负 
责 初 始 化 操作 、 循 环 条 件 判 断 和 计数 器 变量 的 更 新 。 将 它们 放 在 循环 的 
第 一 行 会 更 容易 理解 for 循 环 正在 做 什么 ， 而 且 也 可 以 防止 还 记 初始 化 或 
者 递增 计数 器 变量 。 


要 解释 for 循 环 是 如 何 工 作 的 ， 最 简单 的 方法 莫 过 于 列 出 一 个 与 之 等 
价 的 while 循 环 乌 。 





initialize; 
while(test){ 
statement 
Increment ， 


} 





换 句 话说 ，initialize 表 达 式 只 在 循环 开始 之 前 执行 一 次 。 初 始 化 表 
达 式 应 当 有 具有 副作用 (通常 是 一 条 赋值 语句 ) 。JavaScript 同 样 人 允许 初始 
化 表达 式 中 和 带 有 var 变 量 声明 语句 ， 这 样 的 话 束 可 以 同时 声明 并 初始 化 
一 个 计数 变量 。 每 次 循环 执行 之 前 会 执行 test 表 达 式 ， 并 判断 表达 式 的 
结果 来 决定 是 否 执行 循环 体 ， 如 果 test 计 算 结 果 为 真 值 ， 则 执行 循环 体 
中 的 statement。 最 后 ， 执 行 increment 表 达 式 。 同 样 ， 为 了 有 用 起 见 ， 这 
里 的 increment 表 达 式 也 必须 具有 副作用 。 通 常 来 讲 ， 它 不 是 一 个 赋值 表 
达 式 就 是 一 个 由 “++” 或 “--” 运 算 符 构成 的 表达 式 。 


在 上 文中 的 while 循 环 的 例子 可 以 使 用 for 循 环 来 重 写 ， 这 个 循环 同 
样 输出 数字 0 一 9: 








for(var count=0;count<=10;count++) 
console,.1og(count ) ; 


当然 ， 有 些 循环 会 比 这 些 例子 更 加 复杂 ， 而 且 循 环 中 的 一 次 迭代 会 
改变 多 个 变量 。 在 JavaScript 中 ， 这 种 情况 则 必须 用 到 逗号 运算 人 符 ， 它 将 
初始 化 表达 式 和 目 增 表达 式 合并 入 一 个 表达 式 中 以 用 于 for 循 环 : 








var i,j; 
for(i=0,]j=10;i<10;i++,j--) 
sum+=1i*]j; 











到 目前 为 止 ， 在 示例 代码 中 的 循环 变量 都 是 数字 。 当 然 数字 是 最 党 
用 的 ， 但 不 是 必需 的 。 下 面 这 段 代 码 就 使 用 for 循 环 来 过 历 链 表 数 据 结 
并 返回 链表 中 的 最 后 一 个 对 象 〈 也 就 是 第 一 个 不 包含 next 属 性 的 对 

) : 





function tail(o){// 返 回 链表 的 最 后 一 个 节点 对 象 


for(;0o.next;o=0.next)/*empty*/;// 根 据 判 断 o.next 是 不 是 真 值 来 执行 遍历 
return o; 


} 





需要 注意 的 是 ， 这 段 代 码 不 包含 initialize 表 达 式 ，for 循 环 中 那 三 个 
表达 式 中 的 任何 一 个 都 可 以 忽略 ， 但 是 两 个 分 号 必 不 可 少 。 如 果 省 略 
test 表 达 式 ， 那 么 这 将 是 一 个 死 循环 ， 同 样 ， 和 while(true) 类 似 ， 死 循环 
的 另外 一 种 写法 是 for(;)。 


5.5.4 for/in 


for/in 语 句 也 使 用 for 关 键 字 ， 但 它 是 和 常规 的 for 循 环 完全 不 同 的 一 
类 循环 。for/in 循 环 语句 的 语法 如 下 : 





for(variable in object) 
statement 





variable 通 向 是 一 个 变量 名 ， 也 可 以 是 一 个 可 以 产生 左 值 的 表达 式 
或 者 一 个 通过 var 语 句 声 明 的 变量 ， 总 之 必须 是 一 个 适用 于 赋值 表达 式 
左 侧 的 值 。object 是 一 个 表达 式 ， 这 个 表达 式 的 计算 结果 是 一 个 对 象 。 
同样 ，statement 是 一 个 语句 或 语句 块 ， 它 构成 了 循环 的 主体 。 


使 用 for 循 环 来 遍历 数组 元 素 是 非常 简单 的 : 














for(var i=0;i<a.length;i++)//i 代 表 了 数组 元 素 的 索引 
console.1log(a[i]);// 输 出 数组 中 的 每 个 元 素 











而 fovin 循 环 则 古 用 来 更 方便 地 过 有 历 对 象 属性 成 员 : 








for(var p in o)// 将 属性 名 字 赋 值 给 变量 pp 
console.1log(o[p]);// 输 出 每 一 个 属性 的 值 























在 执行 for/in 语 句 的 过 程 中 ，JavaScript 解 释 器 首先 计算 object 表 达 
式 。 如 果 表 达 式 为 null 或 者 undefined，JavaScirpt 解 释 器 将 会 跳 过 循环 并 
执行 后 续 的 代码 岂 。 如 果 表 达 式 等 于 一 个 原始 值 ， 这 个 原始 值 将 会 转换 
为 与 之 对 应 的 包装 对 象 《wrapper object) ( 见 3.6 节 )。 和 否则 ，expression 本 
壬 已 经 是 对 象 了 。JavaScript 会 依次 枚 举 对 象 的 属性 来 执行 循环 。 然 而 在 





每 次 循环 之 前 ，JavaScript 都 会 先 计 算 variable 表 达 式 的 值 ， 并 将 属性 名 
(一 个 字符 串 〉 赋 值 给 它 。 


需要 注意 的 是 ， 只 要 forvin 循 环 中 variable 的 值 可 以 当做 赋值 表达 式 
的 左 值 ， 它 可 以 是 任意 表达 式 。 每 次 循环 都 会 计算 这 个 表达 式 ， 也 就 是 
说 每 次 循环 它 计算 的 值 有 可 能 不 同 。 例 如 ， 可 以 使 用 下 面 这 段 代 码 将 所 
有 对 象 属性 复制 至 一 个 数组 中 : 





Var o={Xx:1,y:2,2:3}; 
var a=[],i=0; 
for(a[i++]in o0)/*empty*/; 


JavaScript 数 组 不 过 是 一 种 特殊 的 对 象 ， 因 此 ，for/in 循 环 可 以 像 枚 
举 对 象 属性 一 样 枚 举 数组 索引 。 例 如 ， 在 上 面 的 代码 之 后 加 上 这 上 段 代 码 
就 可 以 枚 举 数 组 的 索引 0、1、2: 





for(i in a)console.1o0g(i); 





其 实 ，for/i n 循 环 并 不 会 遇 历 对 象 的 所 有 属性 ， 只 有 “可 极 
举 ”(enumerable〉 的 属性 才 会 遍历 到 (参照 6.7 市 ) 。 由 JavaScript 语 言 
核心 所 定义 的 内 置 方法 就 不 是 “可 枚 举 的 "。 比 如 ， 所 有 的 对 象 都 有 方法 
toString()， 但 for/in 循 环 并 不 枚 举 toString 这 个 属性 。 除 了 内 置 方 法 之 
外 ， 还 有 很 多 内 置 对 象 的 属性 也 是 “不 可 枚 举 的 ”(nonenumerable〉。 而 
代码 中 定义 的 所 有 属性 和 方法 都 是 可 枚 举 的 《6.7 节 会 讲 到 ， 但 在 
ECMAScript 5 中 可 以 通过 特殊 手段 让 可 枚 举 属性 变 为 不 可 枚 举 ) 。 对 象 
可 以 继承 其 他 对 象 的 属性 ， 那 些 继承 的 自 定 义 属 性 《参照 6.2.2 节 ) 也 可 
以 使 用 fowin 枚 举 出 来 。 


如 采 forin 的 循环 体 删 除了 还 未 枚 举 的 属性 ， 那 么 这 个 属性 将 不 会 
再 枚 举 到 。 如 果 循 环 体 定义 了 对 象 的 新 属性 ， 这 些 属 性 通常 也 不 会 枚 举 
JavaScript 的 有 些 实现 是 可 以 枚 举 那 些 在 循环 体 中 增加 的 继承 
属性 的 ) 。 


属性 枚 举 的 顺序 


ECMAScript 规 范 并 没有 指定 fovin 循 环 按照 何 种 顺序 来 枚 举 对 象 属 
性 。 但 实际 上 ， 主 流 浏览 器 三 商 的 JavaScript 实 现 是 按照 属性 定义 的 先后 











顺序 来 枚 举 简单 对 象 的 属性 ， 先 定义 的 属性 先 枚 举 。 如 果 使 用 对 象 下 接 
量 的 形式 创建 对 象 ， 则 将 按照 直接 量 中 属性 的 出 现 顺序 枚 举 。 有 一 些 网 
站 和 JavaScript 库 是 依赖 于 这 种 枚 举 顺 序 的 ， 浏 览 器 厂商 不 大 可 能 会 修改 
这 个 顺序 。 


上 一 段 讨论 了 JavaScript 解 释 器 枚 举 “ 简 单 ” 对 象 一 种 交互 的 属性 枚 举 
2 在 下 列 情 况 下 ， 枚 举 的 顺序 取决 于 具体 的 实现 (并 且 是 非 交 互 
J 


.对象 继承 了 可 枚 举 属性 ; 
对象 具 有 整数 数组 索引 的 属性 ; 
使 用 delete 删 除了 对 象 已 有 的 属性 ; 


.使 用 Object.definePropertyO0 〈 见 6.7 节 ) 或 者 类 似 的 方法 改变 了 对 象 
的 属性 。 


除了 所 有 非 继 承 的 “ 自 有 ”属性 以 外 的 继承 属性 (参照 6.2.2 节 ) 都 往 
往 ( 但 并 不 是 所 有 的 JavaScript 实 现 都 是 如 此 〉 都 是 可 榴 举 的 ， 而 且 可 以 
按照 它们 定义 的 顺序 进行 枚 举 。 如 果 对 象 属性 继承 自 多 个 “ 原 
型 ”(prototype) 〈 人 参照 6.1.3 节 ) ， 也 就 是 说 它 的 原型 链 上 有 多 个 对 
象 ， 那 么 链 上 面 的 每 一 个 原型 对 象 的 属性 的 过 历 也 是 依照 特定 顺序 执行 
的 。JavaScript 的 一 些 〈 但 不 是 全 部 ) 实现 依照 数字 顺序 来 枚 举 数组 属 
性 ， 而 不 是 某 种 特定 的 顺序 。 但 当 数 组 元 素 的 索引 是 非 数 字 或 数组 是 稀 
朴 数 组 〈 数 组 索引 是 不 连续 的 ) 时 它们 则 按照 特定 顺序 枚 举 。 


5.6 跳 转 


JavaScript 中 男 一 类 语句 是 跳 转 语句 (jump ”statement) 。 从 名 称 就 
可 以 看 出 ， 它 使 得 JavaScript 的 执行 可 以 从 一 个 位 置 跳 转 到 男 一 个 位 置 。 
break 语 句 是 跳 转 到 循环 或 者 其 他 语句 的 结束 。continue 语 句 是 终止 本 次 
循环 的 执行 并 开始 下 一 次 循环 的 执行 。JavaScript 中 的 语句 可 以 命名 或 总 
有 标签 ，break 和 continue 可 以 标识 目标 循环 或 者 其 他 语句 标签 。 


retum 语 句 让 解释 器 跳出 函数 体 的 执行 ， 并 提供 本 次 调用 的 返回 
值 。throw 语 句 触 发 或 者 “ 抛 出 ”一 个 异 营 ， 它 是 与 try/catchy/finally 语 句 一 
同 使 用 的 ， 这 些 语句 指定 了 处 理 异常 的 代码 逻辑 。 这 是 一 种 复杂 的 跳 转 





























语句 ， 当 抛 出 一 个 异常 的 时 候 ， 程 序 将 跳 转 至 最 近 的 闭合 异常 处 理 程 
Se 











接 下 来 会 详细 讲述 每 一 种 跳 转 语句 。 
5.6.1 标签 语句 


语句 是 可 以 添加 标签 的 ， 标 签 是 由 语句 前 的 标识 符 和 冒号 组 成 : 





identifer:statement 





通过 给 语句 定义 标签 ， 就 可 以 在 程序 的 任何 地 方 通 过 标签 名 引用 这 
条 语句 。 也 可 以 对 多 条 语句 定义 标签 ， 尽 管 只 有 在 给 语句 块 定义 标签 时 
它 才 更 有 用 ， 比 如 循环 和 条 件 判 断 语句 。 通 过 给 循环 定义 一 个 标签 名 ， 
可 以 在 循环 体内 部 使 用 break 和 continue 来 退出 循环 或 者 直接 跳 转 到 下 一 
个 循环 的 开始 。break 和 continue 是 JavaScript 中 唯一 可 以 使 用 语句 标签 的 
语句 。 本 章 接 下 来 会 有 讲述 。 这 里 有 一 个 例子 ， 其 中 while 循 环 定 义 了 
一 个 标签 ，continue 语 句 使 用 了 这 个 标签 : 

















mainloop:while(token!=null){// 忽 略 这 里 的 代码 ... 
continue mainloop;// 跳 转 到 下 一 次 循环 

// 忽 略 这 里 的 代码 ,, . 

} 
































这 里 用 做 标签 的 identifier 必 须 是 一 个 合法 的 JavaScript 标 识 符 ， 而 不 
能 是 一 个 保留 字 。 标 签 的 命名 空间 和 变量 或 函数 的 命名 空间 是 不 同 的 ， 
因此 可 以 使 用 同一 个 标识 符 作 为 语句 标签 和 作为 变量 名 或 函数 名 。 语 名 
标签 只 有 在 它 所 起 作用 的 语句 (当然 也 可 以 在 它 的 子 句 中 ) 内 是 有 定义 
的 。 一 个 语句 标签 不 能 和 它 内 部 的 语句 标签 重 名 ， 但 在 两 个 代码 段 不 相 
互 葡 套 的 情况 下 是 可 以 出 现 同名 的 语句 标签 的 。 带 有 标签 的 语句 还 可 以 
带 有 标签 ， 也 就 是 说 ， 任 何 语句 可 以 有 很 多 个 标签 。 


5.6.2 break 语句 


单独 使 用 break 语 句 的 作用 是 立即 退出 最 内 层 的 循环 或 switch 语 句 。 
它 的 语法 如 下 : 





























break 


由 于 它 能 够 使 循环 和 switch 语 句 退 出 ， 因 此 这 种 形式 的 break 只 有 出 
现在 这 类 语句 中 才 是 合法 的 。 


我 们 在 switch 语 句 的 例子 中 已 经 见 到 过 break 语 句 。 在 循环 中 ， 不 论 
出 于 什么 原因 ， 只 要 不 想 继续 执行 整个 循环 ， 就 可 以 用 break 来 提前 退 
出 。 当 循环 终止 条 件 非 常 复杂 时 ， 在 函数 体内 使 用 break 语 句 实 现 这 些 
条 件 判断 的 做 法 要 比 直 接 在 循环 表达 式 中 写 出 这 个 复杂 终止 条 件 的 做 法 
简单 很 多 。 下 面 的 例子 中 的 循环 遍历 整个 数组 元 素来 查找 某 个 特定 的 
值 ， 当 整个 数组 遍历 完成 后 会 正常 退出 循环 ， 如 果 找 到 了 需要 查找 的 数 
组 元 素 ， 则 使 用 break 语 句 退 出 循环 : 








for(var i=0;i<a.length;i++){ 
if(a[i]==target)break; 
} 





JavaScript 中 同样 允许 break 关 键 字 后 面 跟随 一 个 语句 标签 (只 有 标 


识 待 ， 没 有 冒号 ) : 





break labelname; 





当 break 和 标签 一 块 使 用 时 ， 程 友 将 跳 转 到 这 个 标签 所 标识 的 语句 
块 的 结束 ， 或 者 直接 终止 这 个 闭合 语句 块 的 执行 。 当 没有 任何 闭合 语句 
块 指定 了 break 所 用 的 标签 ， 这 时 会 产生 一 个 语法 错误 。 当 使 用 这 种 形 
式 的 break 语 句 时 ， 带 标签 的 语句 不 应 该 是 循环 或 者 switch 语 句 ， 因 为 
break 可 以 “跳出 ”任何 闭合 的 语句 块 。 这 里 的 语句 可 以 是 由 花 括 号 括 起 来 
的 一 组 语句 ， 使 用 同一 个 标签 来 标识 这 一 组 语句 。 


在 break 关 键 字 和 labelname 之 间 不 能 换行 。 因 为 JavaScript 可 以 给 语 
句 上 自动 补 全 省 略 挥 的 分 写 ， 如 果 break 关 键 字 和 标签 之 间 有 换行 ， 
JavaScript 解 释 器 会 认为 你 在 使 用 break 不 带 标 签 的 最 简 形 式 ， 因 此 会 在 
break 后 补充 分 号 〈 人 参照 2.5 节 ) 。 


当 你 希望 通过 break 来 跳出 非 就 近 的 循环 体 或 者 switch 语 句 时 ， 就 会 
用 到 这 标签 的 break 语 句 。 下 面 是 示例 代码 : 








var matrix=getData( );// 从 某 处 得 到 一 个 二 维 数组 
// 将 矩阵 中 所 有 元 素 进行 求 和 
var sum=0, success=false;// 从 标签 名 开始 ， 以 便 在 报错 时 退出 程序 
compute_sum:if(matrix)f{ 

for(var x=0;x<=matrix.length;x++){ 

var row=matrix[x]; 

if(!row)break compute_sum; 

for(var y=0;y=row.length;y++){ 

var cell=row[y]; 

if(isNaN(cell))break compute_sum; 

sum+=cell; 

} 

} 


success=true; 



































} 

//break 语 句 跳 转 至 此 

// 如 果 在 success==false 的 条 件 下 到 达 这 里 ， 说 明 我 们 给 出 的 矩阵 中 有 错误 
// 和 否则 将 矩阵 中 所 有 的 元 素 进行 求 和 










































































最 后 ， 需 要 注意 的 是 ， 不 管 break 语 句 带 不 带 标签 ， 它 的 控制 权 都 
无 法 越过 函数 的 边界 。 比 如 ， 对 于 一 条 带 标签 的 函数 定义 语句 来 说 ， 不 
能 从 函数 内 部 通过 这 个 标签 来 跳 转 到 函数 外 部 。 


5.6.3 ”continue 语 句 


continue 语 句 和 break 语 句 非 常 类 似 ， 但 它 不 是 退出 循环 ， 而 是 转 而 
执行 下 一 次 循环 。continue 语 句 的 语法 和 break 语 句 语 法 一 样 简 单 ; 





continue; 





continue 语 句 同 样 可 以 带 有 标签 : 





continue labelname; 





不 管 continue 语 句 珊 不 带 标签 ， 它 只 能 在 循环 体内 使 用 。 在 其 他 地 
方 使 用 将 会 报 语法 错误 。 


当 执 行 到 continue 语 句 的 时 候 ， 妆 前 的 循环 逻辑 束 终 止 了 ， 随 即 执 
行 下 一 次 人 循环， 在 不 同类 型 的 循环 中 ，continue 的 行为 也 有 所 区 别 : 


.在 while 循 环 中 ， 在 循环 开始 处 指定 的 expression 会 重复 检测 ， 如 果 
检测 结果 为 tue， 循 环 体会 从 头 开 始 执行 。 


在 do/while 循 环 中 ， 程 序 的 执行 直接 跳 到 循环 结尾 处 ， 这 时 会 重新 
判断 循环 条 件 ， 之 后 才 会 继续 下 一 次 循环 。 


:在 for 循 环 中 ， 首 先 计 算 自 增 表达 式 ， 然 后 再 次 检测 test 表 达 式 ， 用 
以 判断 是 否 执 行人 循环 体 。 


在 fovin 循 环 中 ， 循 环 开始 遇 历 下 一 个 属性 名 ， 这 个 属性 名 赋 给 了 
指定 的 变量 。 


需要 注意 continue 语 名 在 while 和 for 循 环 中 的 区 别 ，while 循 环 直接 进 
入 下 一 轮 的 循环 条 件 判 新， 但 for 循 环 首先 计算 其 increment 表 达 式 ， 然 后 
判断 循环 条 件 。 之 前 的 章节 讨论 了 和 while 循 环 “ 等 价 ” 的 for 循 环 的 行 
为 。 但 由 于 continue 在 这 两 种 循环 中 的 行为 表现 不 同 ， 因 此 使 用 while 循 
环 不 可 能 完美 地 模拟 等 价 的 for 循 环 。 


下 面 这 段 代 码 展 示 了 不 带 标 签 的 continue 语 句 ， 当 产生 一 个 错误 的 
时 候 跳 过 当前 循环 的 后 续 尿 辑 : 








for(i=0;i<data.length;i++){ 
if(!data[i])continue;// 不 能 处 理 undefined 数 据 
total+=data[i]; 




















和 break 语 名 类似 ， 带 标签 的 continue 语 名 可 以 用 在 藤 套 的 循环 中 ， 
用 以 跳出 多 层次 航 套 的 循环 体 逻 辑 。 同 样 和 break 语 句 类 似 ， 在 continue 
语句 和 labelname 之 则 不 能 有 换行 。 


5.6.4 ” ”return 语句 


回想 一 下 ， 函 数 调 用 是 一 种 表达 式 ， 而 所 有 表达 式 都 有 值 。 函 数 中 
的 return 语 句 既 是 指定 函数 调用 后 的 返回 值 。 这 里 是 return 语 句 的 语法 : 


return expression,; 


retum 语 句 只 能 在 水 数 体内 出 现 ， 如 果 不 是 的 话 会 报 语法 错误 。 当 
J 的 时 候 ， 函 数 终止 执行 ， 并 返回 expression 的 值 给 调用 
程序 。 例 如 : 





function square(x){return x*x;}// 一 个 包含 return 语 句 的 函数 
square(2)// 调 用 结果 为 4 














如 果 没 有 returmn 语 句 ， 则 函数 调用 仪 依 次 执行 函数 体内 的 每 一 条 语 
句 直 到 函数 结束 ， 最 后 返回 调用 程序 。 这 种 情况 下， 调用 表达 式 的 吉 果 
是 undefined。return 语 句 经 党 作为 函数 内 的 最 后 一 条 语句 出 现 ， 但 并 不 
是 说 要 一 定 放 在 函数 最 后 ， 即 使 在 执行 return 语 句 的 时 候 还 有 很 多 后 续 
代码 没有 执行 到 ， 这 时 函数 也 还 会 返回 调用 程序 。 


return 语 句 可 以 单独 使 用 而 不 必 带 有 expression， 这 样 的 话 函 数 也 会 
向 调用 程序 返回 undefined。 例 如 : 








function display_object(0o){// 如 果 参 数 是 null 或 者 undefined 则 立即 返 民 
if(10)return;// 其 他 的 逻辑 
} 























由 于 JavaScript 可 以 自动 插入 分 号 〈 见 2.5 节 ) ， 因 此 在 return 关 键 字 
和 它 后 面 的 表达 式 之 间 不 能 有 换行 。 


5.6.5 throw 语句 


所 谓 异 常 (exception〉 是 当 发 生 了 某 种 异常 情况 或 错误 时 产生 的 一 
个 信号 。 抛 出 异常 ， 就 是 用 信号 通知 发 生 了 错误 或 异常 状况 。 捕获 异常 
是 指 处 理 这 个 信号 ， 即 采取 必要 的 手段 从 异常 中 恢复 。 在 JavaScript 中 ， 
当 产 生 运行 时 错误 或 者 程序 使 用 throw 语 下 名 时 融会 显 式 地 抛 出 异常 。 使 
用 try/catch/finally 语 句 可 以 捕获 异常 ， 下 一 节 会 对 它 作 详细 介绍 


throw 语 句 的 语法 如 下 : 














throw expression,; 





expression 的 值 可 以 是 任意 类 型 的 。 可 以 抛 出 一 个 代表 错误 码 的 数 
字 ， 或 者 包含 可 读 的 错误 消息 的 字符 串 。 当 JavaScript 解 释 器 抛 出 异 季 的 
时 候 通常 采用 Error 类 型 和 其 子 类 型 ， 当 然 也 可 以 使 用 它们 。 一 个 Error 
对 象 有 一 个 name 属 性 表示 错误 类 型 ， 0 性 用 来 存放 传递 给 
构造 函数 的 字符 串 〈 参 照 第 三 部 分 的 Error 类 ) ， 在 下 面 的 例子 中 ， 当 使 
用 非法 参数 调用 函数 时 就 抛 出 一 0 














function factorial(x){// 如 果 输 入 参数 是 非法 的 ， 则 抛 出 一 个 异常 
if(x<0)throw new Error("x 不 能 是 负数 " );// 否 则 ， 计 算出 一 个 值 ， 并 正常 地 返回 它 
for(var f=1;x~>1;f*=x,x--)/*empty*/; 

return f; 

















当 抛 出 异常 时 ，JavaScript 解 释 嚣 会 立即 停止 当前 正在 执行 的 逻辑 ， 
并 跳 转 至 就 近 的 异常 处 理 程序 。 异 常 处 理 程序 是 用 try/catch/finally 语 句 
的 catch 从 人 句 编写 的 ， 下 一 节 会 介绍 它 。 如 果 抛 出 异常 的 代码 块 没有 一 条 
相关 联 的 catch 从 句 ， 解 释 器 会 检查 更 高 层 的 闭合 代码 块 ， 看 它 是 否 有 相 
关联 的 异常 处 理 程序 。 以 此 类 推 ， 直 到 找到 一 个 异常 处 理 程 序 为 止 。 如 
果 抛 出 异常 的 函数 没有 处 理 它 的 try/catch/finally 语 句 ， 异 常 将 向 上 传播 
到 调用 该 函数 的 代码 。 这 样 的 话 ， 异 和 常 束 会 沿 着 JavaScript 方 法 的 词法 结 
构 和 调用 栈 向 上 传播 。 如 果 没 有 找到 任何 异常 处 理 程序 ，JavaScript 将 把 
异常 当成 程序 错误 来 处 理 ， 并 报告 给 用 户 。 


5.6.6 try/catchy/finally 语 名 








try/catchy/finally 语 句 是 JavaScript 的 异常 处 理 机 制 。 其 中 try 从 名 定义 
了 需要 处 理 的 异常 所 在 的 代码 块 。catch 从 名 跟随 在 try 从 名 之 后 ， 当 try 
块 内 某 处 发 生 了 异常 时 ， 调 用 catch 内 的 代码 逻辑 。catch 从 句 后 跟随 
finally 块 ， 后 者 中 放置 清理 代码 ， 不 管 try 块 中 是 否 产 生 异 常 ，finally 块 
内 的 逻辑 总 是 会 执行 。 尽 管 catch 和 finally 都 是 可 选 的， 但 try 从 句 需要 至 
少 二 者 之 一 与 之 组 成 完整 的 语句 。try、catch 和 finally 语 句 块 都 需要 使 用 
花 括 号 括 起 来 ， 这 里 的 花 括 号 是 必需 的 ， 即 使 从 句 中 只 有 一 条 语句 也 不 
能 省 略 花 括号 。 


下 面 的 代码 说 明了 try/catch/finally 的 语法 和 使 用 目的 : 
































try{// 通 常 来 讲 ， 这 里 的 代码 会 从 头 执行 到 尾 而 不 会 产生 任何 问题 ， 
// 但 有 时 会 抛 出 一 个 异常 ， 要 么 是 由 throw 语 名 直接 抛 出 异常 ， 
// 要 么 是 通过 调用 一 个 方法 间接 抛 出 异常 



















































































} 

catch(e){// 当 且 仅 当 try 语 句 块 抛 出 了 异常 ， 才 会 执行 这 里 的 代码 
// 这 里 可 以 通过 局 部 变量 e 来 获得 对 Error 对 象 或 者 抛 出 的 其 他 值 的 引用 
// 这 里 的 代码 块 可 以 基于 某 种 原因 处 理 这 个 异常 ， 也 可 以 忽略 这 个 异常 ， 
// 还 可 以 通过 throw 语 句 重新 抛 出 异常 














































































































} 

finally{// 不 管 try 语 句 块 是 否 抛 出 了 异常 ， 这 里 的 逻辑 总 是 会 执行 ， 终 止 try 语 句 块 的 方式 有 : 
//1) 正常 终止 ， 执行 完 语 句 块 的 最 后 一 条 语句 

//2) 通过 break、continue 或 return 语 句 终止 

//3) 抛 出 一 个 异常 ， 异 常 被 catch 从 句 捕 获 

//4) 抛 出 一 个 异常 ， 异 常 未 被 捕获 ， 继 续 向 上 传播 

} 


一 | 





















































我 们 注意 到 ， 关 键 字 catch 后 跟随 了 一 对 圆 括号 ， 圆 括号 内 是 一 个 标 
识 符 。 这 个 标识 符 和 函数 参数 很 像 。 当 捕获 一 个 异常 时 ， 把 和 这 个 异常 
相关 的 值 《 比 如 Error 对 象 ) 赋值 给 这 个 参数 。 和 普通 的 变量 不 同 ， 这 条 
catch 子 句 中 的 标识 符 具 有 块 级 作用 域 ， 它 只 在 catch 语 句 块 内 有 定义 。 


这 里 有 一 个 关于 try/catch 语 句 更 实际 的 例子 ， 这 里 使 用 了 前 面 章节 
中 提 到 的 factorial0 方 法 ， 并 使 用 客户 端 JavaScript 方 法 prompt() 和 alert() 来 
输入 和 输出 : 

















try{// 要 求 用 户 输入 一 个 数字 

var n=Number (prompt(" 请 输入 一 个 正 整 数 ","" ) ) ;// 假 设 输入 是 合法 的 ， 计 算 这 个 数 的 阶乘 
var f=factorial(n);// 显 示 结 果 
alert(n+"!="+f); 




















} 

catch(ex){// 如 果 输 入 不 合法 ， 将 执行 这 里 的 逻辑 
alert(ex);// 告 诉 用 户 产 生 了 什么 错误 

} 





























这 里 的 try/catch 语 句 并 不 包含 finally 从 句 。 尺 管 finally 不 像 catch 那 样 
经 党 使 用 ， 但 有 时 候 它 还 是 非常 有 用 。 然 而 ， 我 们 需要 更 详尽 地 解释 它 
的 行为 。 不 管 try 语 句 块 中 的 代码 执行 完成 了 多 少 ， 只 要 try 语 句 中 有 一 
0 了 ，finally 从 人 句 就 会 执行 。 它 通常 在 try 从 句 的 代码 后 用 于 
清理 工作 。 


通常 状况 下 ， 解 释 器 执行 到 try 块 的 尾部 ， 然 后 开始 执行 finally 中 的 
逻辑 ， 以 便 进 行 必要 的 清理 工作 。 当 由 于 return、continue 或 break 语 句 使 
得 解释 器 跳出 try 语 句 块 时 ， 解 释 右 在 执行 新 的 目标 代码 之 前 先 执行 
finally 块 中 的 逻辑 。 


如 果 在 try 中 产生 了 异常 ， 而 且 存 在 一 条 与 之 相关 的 catch 从 句 来 处 
理 这 个 异常 ， 解 释 器 会 首先 执行 catch 中 的 逻辑 ， 然 后 执行 finally 中 的 逻 
辑 。 如 果 不 存 在 处 理 异常 的 局 部 catch 从 句 ， 解 释 嚣 会 首先 执行 finally 中 
2 然后 向 上 传播 这 个 异常 ， 直 到 找到 能 处 理 这 个 异常 的 catch 从 


如 果 finally 块 使 用 了 return、continue、break 或 者 throw 语 句 使 程序 发 
生 跳 转 ， 或 者 通过 调用 了 抛 出 异常 的 方法 改变 了 程序 执行 流程 ， 不 管 这 
个 跳 转 使 程序 挂 起 还 是 继续 执行 ， 解 释 占 都 会 将 其 忽略 。 例 如 ， 如 果 
finally 从 人 句 抛 出 一 个 异常 ， 这 个 异常 将 蔡 代 正在 抛 出 的 异常 。 如 果 
finally 从 人 句 运 行 到 了 returmn 语 句 ， 尽 管 已 经 抛 出 了 异常 且 这 个 抛 出 的 异常 











还 没有 处 理 ， 这 个 方法 依然 会 正常 返回 负 。 


在 没有 catch 从 句 的 情况 下 try 从 人 句 可 以 和 finally 从 句 一 起 使 用 。 在 这 
种 情况 下 ，finally 块 只 包含 清理 代码 ， 不 管 try 块 中 是 否 有 break、 
continue 或 return 语 句 ， 这 里 的 代码 一 定 会 执行 ， 回 想 一 下 ， 我 们 无 法 完 
全 精确 地 使 用 while 循 环 来 模拟 for 循 环 ， 因 为 continue 语 句 在 两 个 循环 中 
的 行为 表现 不 一 致 。 如 果 使 用 tryfinally 语 句 ， 就 能 使 用 while 循 环 来 正 
确 模拟 包含 continue 的 for 循 环 : 








// 模 拟 for (initialize;test;increment)body; 
initialize; 

while(test)t{ 

try{body;} 

finally{increment,;} 


} 





然而 需要 注意 的 是 ， 当 body 包 含 break 语 句 时 ，while 循 环 和 for 循 环 
便 有 了 更 微妙 的 区 别 ( 造 成 了 一 次 额外 的 自 增 运算 ) ， 因 此 即便 使 用 了 
finally 从 人 句 ， 使 用 while 来 完全 模拟 for 循 环 依然 是 不 可 能 的 。 


5.7 ”其 他 语句 类 型 
本 节 讨 论 剩 余 的 三 种 JavaScripti 浊 句 


Strict。 





width、debugger 和 use 


5.7.1 ” ”with 语句 


3.10.3” 节 讨论 了 作用 域 链 (scope chain) ， 一 个 可 以 按 序 检索 的 对 
象 列 表 ， 通 过 它 可 以 进行 变量 名 解析 。with 语 句 用 于 临时 扩展 作用 域 
链 ， 它 具有 如 下 的 语法 : 





with(object) 
statement 





这 条 语句 将 object 添 加 到 作用 域 链 的 涉 部 ， 然 后 执行 statement， 最 
后 把 作用 域 链 恢复 到 原始 状态 。 


在 严格 模式 中 《参照 5.7.3 节 ) 是 禁止 使 用 with 语 句 的 ， 并 且 在 非 严 


格 模式 里 也 是 不 推荐 使 用 with 语句 的 ， 尽 可 能 避免 使 用 with 语句 。 那 些 
使 用 with 语句 的 JavaScript 代 码 非常 难于 优化 ， 并 且 同 没有 使 用 with 语句 
的 代码 相 比 ， 它 运行 得 更 慢 。 


在 对 象 嵌 套 层 次 很 深 的 时 候 通 常会 使 用 with 语句 来 简化 代码 编写 。 





例如 ， 在 客户 端 JavaScript 中 ， 可 能 会 使 用 类 似 下 面 这 种 表达 式 来 访问 一 
个 HTML 表单 中 的 元 素 : 


document ,forms[0],address,value 


如 末 这 种 表达 式 在 代码 中 多 次 出 现 ， 则 可 以 使 用 with 语句 将 form 对 
象 添 加 全 作用 域 链 的 顶层 : 








with(document .forms[0] ){// 直 接 访 问 表 单元 素 ， 例 如 : 
name .value=""， 

address.value=""，; 

email.value=""; 


} 





这 种 方法 减少 了 大 量 的 输入 ， 不 用 再 为 每 个 属性 名 添加 
document.forms[0] 前 级 。 这 个 对 象 临 时 挂 载 在 作用 域 链 上 ， 当 JavaScript 
需要 解析 诸如 address 的 标识 符 时 ， 就 会 自动 在 这 个 对 象 中 查找 。 当 然 ， 
不 使 用 with 语句 的 等 价 代码 可 以 写成 这 样 : 





var f=document.forms[0]; 
f.name.value=""， 
f.address.value="",，; 
f.email.value=""，; 








不 要 忘记 ， 只 有 在 查找 标识 符 的 时 候 才 会 用 到 作用 域 链 ， 创 建新 的 
变量 的 时 候 不 使 用 它 ， 看 一 下 下 面 这 行 代码 : 





with(o)x=1; 


如 果 对 象 oO 有 一 个 属性 x， 那 么 这 行 代码 给 这 个 属性 赋值 为 |。 但 如 
果 o 中 没有 定义 属性 x， 这 段 代 码 和 不 使 用 with 语句 的 代码 x=1 是 一 模 一 
样 的 。 它 给 一 个 局 部 变量 或 者 全 局 变量 x 赋值 ， 或 者 创建 全 局 对 象 的 一 
个 新 属性 。with 语 句 提供 了 一 种 读 取 o 的 属性 的 快捷 方式 ， 但 它 并 不 能 


创建 o 的 属性 。 
5.7.2 debugger 语 名 


debugger 语 句 通 稼 什么 也 不 做 。 然 而 ， 当 调试 程序 可 用 并 运行 的 时 
候 ，JavaScript 解 释 器 将 会 〈 非 必需 ) 以 调式 模式 运行 。 实 际 上 ， 这 条 语 
名 用 来 产生 一 个 断 点 〈breakpoint) ，JavaScript 代 码 的 执行 会 停止 在 断 
点 的 位 置 ， 这 时 可 以 使 用 调试 占 输 出 变量 的 值 、 检 查 调用 栈 等 。 例 如， 
假设 由 于 调用 函数 fO0 的 时 候 使 用 了 未 定义 的 参数 ， 因 此 fO 抛 出 一 个 异 
常 ， 但 无 法 定位 到 底 是 哪里 抛 出 了 异常 。 为 了 有 助 于 调试 这 个 问题 ， 需 
要 修改 函数 f0: 











function f(o){ 

if(o===undefined)debugger;// 这 一 行 代码 只 是 用 于 临时 调试 
,,.// 函 数 的 其 他 部 分 

} 






































这 时 ， 当 调用 fO 的 时 候 没 有 传 入 参数 ， 程 序 将 停止 执行 ， 这 时 可 以 
通过 调试 器 检测 调用 栈 并 找 出 错误 产生 的 原因 。 


在 ECMAScript 5 中 ，debugger 语 句 正 式 加 入 到 这 门 语言 里 。 但 在 相 
当 长 的 一 段 时 间 里 ， 主 流 浏览 器 厂商 已 经 将 其 实现 了 。 注 意 ， 可 用 的 调 
试 器 是 远 远 不 够 的 ，debugger 语 句 不 会 启动 调试 器 。 但 如 果 调 试 器 已 经 
在 运行 中 ， 这 条 语句 才 会 真正 产生 一 个 断 点 。 例 如 ， 如 果 使 用 Firefox 的 
调试 扩展 插件 Firebug， 则 必须 首先 为 待 调试 的 网 页 启用 Friebug， 这 样 
debugger 语 名 才能 正常 工作 。 





5.7.3 "use strict" 





"use strict" 是 ECMAScript 5 引入 的 一 条 指令 。 指 令 不 是 语句 (但 非 
常 接 近 于 语句 ) 。"use strict" 指 令 和 普通 的 语句 之 间 有 两 个 重要 的 区 
别 : 


它 不 包含 任何 语言 的 关键 字 ， 指 令 仅仅 是 一 个 包含 一 个 特殊 字符 
串 直 接 量 的 表达 式 〈 可 以 是 使 用 单 引 号 也 可 以 使 用 双 引 号 ) ， 对 于 那些 
没有 实现 ECMAScript 5 的 JavaScript 解 释 器 来 说 ， 它 只 是 一 条 没有 副作用 
的 表达 式 语句 ， 它 什么 也 没 做 。 将 来 的 ECMAScript 标 准 希 望 将 use 用 做 
关键 字 ， 这 样 就 可 以 省 略 引 号 了 。 








它 只 能 出 现在 脚本 代码 的 开始 或 者 函数 体 的 开始 、 任 何 实体 语句 
之 前 。 但 它 不 必 一 定 出 现在 脚本 的 首 行 或 函数 体内 的 首 行 ， 因 为 "use 
strict" 指 令 之 后 或 之 前 都 可 能 有 其 他 字符 串 直 接 量 表达 陈 语句 ， 并 且 
JavaScript 的 具体 实现 可 能 将 它们 解析 为 解释 器 目 有 的 指令 。 在 脚本 或 者 
函数 体内 第 一 条 和 单 规 语句 之 后 字符 串 直 接 量 表达 式 语 句 只 当做 普通 的 表 
达 式 语句 对 待 ， 它 们 不 会 当做 指令 解析 ， 它 们 也 没有 任何 副作用 。 


使 用 "use strict" 指 令 的 目的 是 说 明 ( 脚 本 或 函数 中 ) 后 续 的 代码 将 
会 解析 为 严格 代码 (strict code) 。 如 果 顶 层 〈 不 在 任何 图 数 内 的 ) 代码 
使 用 了 "use strict" 指 令 ， 那 么 它们 束 是 严格 代码 。 如 果 函 数 体 定义 所 处 
的 代码 是 严格 代码 或 者 函数 体 使 用 了 "use strict" 指 令 ， 那 么 函数 体 的 代 
码 也 是 严格 代码 。 如 果 eval0 调 用 时 所 处 的 代码 是 严格 代码 或 者 evalO 要 
的 code" 指 令 ， 则 evalO 内 的 代码 是 严格 代 


严格 代码 以 严格 模式 执行 。ECMAScript 5 中 的 严格 模式 是 该 语言 的 
一 个 受 限 制 的 子 集 ， 它 修正 了 语言 的 重要 缺 隐 ， 并 提供 健壮 的 碍 错 功能 
站 
入 要 ) : 


-在 严格 模式 中 禁止 使 用 with 语 句 。 


-在 严格 模式 中 ， 所 有 的 变量 都 要 先 声 明 ， 如 果 给 一 个 未 声明 的 变 
量 、 函 数 、 函 数 参 数 、catch 从 句 参 数 或 全 局 对 象 的 属性 赋值 ， 将 会 抛 出 
一 个 引用 错误 异 第 (在 非 严 格 模式 中 ， 这 种 隐 式 声明 的 全 局 变量 的 方法 
古 给 全 局 对 象 新 添加 一 个 新 属性 〉。 


:在 严格 模式 中 ， 调 用 的 函数 (不 是 方法 ) 中 的 一 个 this 值 是 
undefined。 〈 在 非 严 格 模式 中 ， 调 用 的 函数 中 的 this 值 总 是 全 局 对 
象 ) 。 可 以 利用 这 种 特性 来 判断 JavaScript 实 现 是 否 文 持 严格 模式 : 


同样， 在 严格 模式 中 ， 当 通过 call0 或 apply0 来 调用 函数 时 ， 其 中 
的 this 值 就 是 通过 call() 或 apply0 传 入 的 第 一 个 参数 (在 非 严 格 模 式 中 ， 
nul 和 undefined 值 被 全 局 对 象 和 转换 为 对 象 的 非 对 象 值 所 代替 ) 。 


-在 严格 模式 中 ， 给 只 读 属性 赋值 和 给 不 可 扩展 的 对 象 创建 新 成 员 
都 将 抛 出 一 个 类 型 错误 异 负 《在 非 严 格 模式 中 ， 这 些 操作 只 是 简单 地 操 
作 失 败 ， 不 会 报错 ) 。 























.在 严格 模式 中 ， 传 入 eval0 的 代码 不 能 在 调用 程序 所 在 的 上 下 文中 
声明 变量 或 定义 函数 ， 而 在 非 严 格 模式 中 是 可 以 这 样 做 的 。 相 反 ， 变 量 
i 0 这 个 作用 域 在 eval0 返 回 时 
束 寞 。 





var hasStrictMode=(function(){ 人 "use strict" ;return this===undefined}()); 


.在 严格 模式 中 ， 函 数 里 的 arguments 对 象 〈 见 8.3.2 节 ) 拥有 传 入 函 
数值 的 静态 副本 。 在 非 严 格 模式 中 ，arguments 对 象 具 有 “魔术 般 ” 的 行 
为 ，arguments 里 的 数组 元 素 和 函数 参数 都 是 指 回 同一 个 值 的 引用 。 


.在 严格 模式 中 ， 当 delete 运 算 符 后 跟随 非法 的 标识 符 〈 比 如 变量 、 
函数 、 函 数 参数 ) 时 ， 将 会 抛 出 一 个 语法 错误 异常 (在 非 严 格 模 式 中 ， 
这 种 delete 表 达 式 什么 也 没 做 ， 并 返回 false) 。 


:在 严格 模式 中 ， 试 图 删除 一 个 不 可 配置 的 属性 将 抛 出 一 个 类 型 错 
误 异 常 〈 在 非 严 格 模式 中 ，delete 表 达 式 操作 失败 ， 并 返回 false) 。 


-在 严格 模式 中 ， 在 一 个 对 象 直接 量 中 定义 两 个 或 多 个 同名 属性 将 
产生 一 个 语法 错误 《在 非 严格 模式 中 不 会 报错 ) 。 


-在 严格 模式 中 ， 函 数 声明 中 存在 两 个 或 多 个 同名 的 参数 将 产生 一 
个 语法 错误 在 非 严格 模式 中 不 会 报错 )。 


-在 严格 模式 中 是 不 允许 使 用 八进制 整数 直接 量 〈 以 0 为 前 级 ， 而 不 
0 的 《在 非 严 格 模式 中 某 些 实现 是 允许 八进制 整数 直接 量 
cs 


.在 严格 模式 中 ， 标 识 符 eval 和 arguments 当 做 关键 字 ， 它 们 的 值 是 不 
能 更 改 的 。 不 能 给 这 些 标识 符 赋 值 ， 也 不 能 把 它们 声明 为 变量 、 用 做 函 
数 名 、 用 做 函数 参数 或 用 做 catch 块 的 标识 符 。 


-在 严格 模式 中 限制 了 对 调用 栈 的 检测 能 力 ， 在 严格 模式 的 函数 
中 ，arguments.caller 和 arguments.callee 都 会 抛 出 一 个 类 型 错误 异常 。 严 
格 模式 的 函数 同样 具有 caller 和 arguments 属 性 ， 当 访问 这 两 个 属性 时 将 
抛 出 类 型 错误 异常 《有 一 些 JavaScript 的 实现 在 非 严格 模式 里 定义 了 这 些 
非 标准 的 属性 ) 。 























5.8 JavaScript 语 句 小 结 








本 章 介 绍 了 JavaScript 语 言 中 的 每 种 语句 。 表 5-1 是 本 章 的 总 结 ， 


出 了 每 种 语句 的 语法 和 用 途 : 


表 5-1，JavaScript 语 句 语法 
语句 语法 


break break [label]; 


Case Case expression: 


continue continue [label]; 


用 途 

退出 最 内 层 循环 或 者 退出 Switch 语 
句 ， 又 或 者 退出 1abe] 指 定 的 语 名 
在 Switch 语句 中 标记 一 条 语句 
重新 开始 最 内 层 的 循环 或 重新 开始 
1abel 指 定 的 循环 


列 


表 5.1， JavaScript 语 句 语法 ( 续 ) 


语句 
debugger 
default 
do/while 
empty 
for 
for/in 
function 
if/else 
label 
return 


switch 


throw 


try 


use strict 
Var 
while 


with 


语法 
debugger; 
default; 


用 途 
断 点 器 调试 
在 switch 中 标记 默认 的 语句 


do statement while(expression); while 循 环 的 一 种 替代 形式 


) 
for(init; test;incr)statement 


for(var in object)statement 


什么 都 不 做 
一 种 简写 的 循环 
电 历 一 个 对 象 的 属性 


function name([param[],,,,]){body} 声明 一 个 函数 
if(expr)statement1 [else statement2] 执行 Statement1 或 者 statement2 


label:statement 
return [expression]; 


switch(expression){statements} 


throw expression; 

try {statements} 

[catch {handler statements}] 
[finally {cleanup statements}] 
"use strict" 

Var name=[=expr][,...]; 
while(expression) statement 


with(object) statement 


给 statement 指 定 一 个 名 字 : label 
从 函数 返回 一 个 值 

用 case 或 者 “default:” 语 句 标记 的 
多 分 支 语 名 

抛 出 异常 

捕获 异常 


对 脚本 和 函数 应 用 严格 模式 
声明 并 初始 化 一 个 或 多 个 变量 
基本 的 循环 结构 

扩展 作用 域 链 (不 赞成 使 用 ) 


[| 由 于 JavaScript 中 的 case 表 达 式 的 值 是 在 运行 时 (run-time)〉 计算 的 ， 
这 一 点 使 得 JavaScript 的 switch 语 句 和 C、C++ 和 Java 中 的 switch 语 句 有 很 
大 区 别 ( 并 且 效 率 也 很 低 ) 。 在 C、C++ 和 Java 中 ，case 表 达 式 必须 为 同 
类 型 的 编译 时 〈compile-time) 和 常量， 而 且 switch 语 句 通 常会 编译 成 一 个 
跳 转 表 (jump table) ， 这 让 switch 语 句 的 执行 非常 高 效 。 
[15.6.3 节 会 讲 到 ， 在 使 用 continue 语 句 时 ，while 循 环 和 for 循 环 并 不 等 
ys 

[3] 在 这 种 情况 下 ，ECMAScript 3 的 实现 可 能 会 抛 出 一 个 类 型 错误 异常 。 
[4 按照 原文 的 描述 ， 这 段 代码 将 正常 执行 ， 并 foo() 函 数 会 有 正常 的 返回 
值 ， 参 照 这 段 代码 : 

var foo=function(){ 

try{ 

// 抛 出 一 个 异常 

} 

finally{ 

return 1;// 未 处理 异常 直接 返回 ， 这 里 将 正常 返回 

} 

le 

foo(); 





第 6 章 ”对 象 


对 象 是 JavaScript 的 基本 数据 类 型 。 对 象 是 一 种 复合 值 : 它 将 很 多 值 
(原始 值 或 者 其 他 对 象 ) 聚合 在 一 起 ， 可 通过 名 字 访 问 这 些 值 。 对 象 也 
可 看 做 是 属性 的 无 序 集合 ， 每 个 属性 都 是 一 个 名 / 值 对 。 属 性 名 是 字符 
串 ， 因 此 我 们 可 以 把 对 象 看 成 是 从 字符 串 到 值 的 映射 。 这 种 基本 数据 结 
构 还 有 很 多 种 叫 法 ， 有 些 我 们 已 然 非 常熟 悉 ， 比 如 “ 散 列 ”(hash) 、“ 散 
列表 ”(hashtable) 、“ 字 典 ”(dictionary) 、“ 关 联 数组 ”(associative 
array) 。 然 而 对 象 不 仅仅 是 字符 串 到 值 的 映射 ， 除 了 可 以 保持 自 有 的 属 
性 ，JavaScript 对 象 还 可 以 从 一 个 称 为 原型 的 对 象 继承 属性 。 对 象 的 方法 
通常 是 继承 的 属性 。 这 种 “原型 式 继 承 ”(prototypal inheritance ) 是 
JavaScript 的 核心 特征 。 

















JavaScript 对 象 是 动态 的 可 以 新 增 属 性 也 可 以 删除 属性 一 一 但 它 
们 常用 来 模拟 静态 对 象 以 及 静态 类 型 语言 中 的 “结构 体 ”(struct) 。 有 时 
它们 也 用 做 字符 串 的 集合 (忽略 名 / 值 对 中 的 值 〉。 


除了 字符 串 、 数 字 、true、false、null 和 undefined 之 外 ，JavaScript 中 
的 值 都 是 对 象 。 尽 管 字 符 串 、 数 字 和 布尔 值 不 是 对 象 ， 但 它们 的 行为 和 
不 可 变 对 象 〈 参 照 3.6 节 ) 非常 类 似 。 


3.7 市 已 经 讲 到 ， 对 象 是 可 变 的 ， 我 们 通过 引用 而 非 值 来 操作 对 
象 。 如 末 变 量 x 是 指向 一 个 对 象 的 引用 ， 那 么 执行 代码 var y=x; 变 量 y 也 
古 指 问 同 一 个 对 象 的 引用 ， 而 非 这 个 对 象 的 副本 。 通 过 变量 y 修 改 这 个 
对 象 亦 会 对 变量 x 造成 影响 。 


对 象 最 常见 的 用 法 是 创建 (create) 、 设 置 (set) 、 碍 找 
(guery) 、 删 除 〈delete) 、 检 测 〈test) 和 枚 举 (enumerate〉 它 的 属 
性 。 我 们 会 在 开始 的 几 贡 讲述 这 些 基 础 操作 。 后 续 的 几 节 讲述 高 级 主 
题 ， 其 中 相当 一 部 分 内 容 来 自 于 ECMAScript 5。 


属性 包括 名 字 和 值 。 属 性 名 可 以 是 包含 空 字 符 串 在 内 的 任意 字符 
串 ， 但 对 象 中 不 能 存在 两 个 同名 的 属性 。 值 可 以 是 任意 JavaScript 值 ， 或 
者 (在 ECMAScript 5 中 ) 可 以 是 一 个 getter 或 setter 疯 数 〈( 或 两 者 都 
有 ) 。6.6 节 会 有 关于 getter 和 setter 函 数 的 讲解 。 除 了 和 名字 和 值 之 外 ， 
个 属性 还 有 一 些 与 之 相关 的 值 ， 称 为 “属性 特性 ”(property 

















attribute ) 员 : 
:可 写 (writable attribute) ， 表 明 是 否 可 以 设置 该 属性 的 值 。 
.可 枚 举 (enumerable _ attribute ) ， 表 明 是 否 可 以 通过 fovin 循 环 返 
该 属性 。 


:可 配置 (configurable attribute) ， 表 明 是 否 可 以 删除 或 修改 该 属 
性 。 


在 ECMAScript ”5 之 前 ， 通 过 代码 给 对 象 创建 的 所 有 属性 都 是 可 写 
的 、 可 枚 举 的 和 可 配置 的 。 在 ECMAScript 5 中 则 可 以 对 这 些 特性 加 以 配 
置 。6.7 节 讲述 如 何 操 作 。 


除了 包含 属性 之 外 ， 每 个 对 象 还 拥有 三 个 相关 的 对 象 特性 (object 


attribute ) : 


对象 的 原型 (prototype) 指 同 另外 一 个 对 象 ， 本 对 象 的 属性 继承 目 
它 的 原型 对 象 。 
:对 象 的 类 〈class) 是 一 个 标识 对 象 类 型 的 字符 串 。 


:对 象 的 扩展 标记 (extensible flag) 指明 了 【在 ECMAScript 5 中 ) 
侍 可 以 回访 对 象 添加 新 属性 。 


6.1.3 节 和 6.2.2 节 会 有 关于 原型 和 属性 继承 的 讲述 ，6.8 节 会 进一步 
详细 讲述 这 三 个 特性 。 


最 后 ， 我 们 用 下 面 这 些 术 语 来 对 三 类 JavaScript 对 象 和 两 类 属性 作 区 


:内 置 对 象 (native object) 是 由 ECMAScript 规 范 定义 的 对 象 或 类 。 
例如 ， 数 组 、 函 数 、 日 期 和 正则 表达 式 都 是 内 置 对 象 。 


- 答 主 对 象 (host ”object) 是 由 JavaScript 解 释 器 所 藤 入 的 宿主 环境 
(比如 Web 浏 览 器 〉 定 义 的 。 客 户 端 JavaScript 中 表示 网 页 结构 的 
HTMLElement 对 象 均 是 宿主 对 象 。 既 然 答 主 环境 定义 的 方法 可 以 当成 普 
通 的 JavaScript 函 数 对 象 ， 那 么 宿主 对 象 也 可 以 当成 内 置 对 象 。 





` 自 定义 对 象 (user-defined object) 是 由 运行 中 的 JavaScript 代 码 创 建 
的 对 象 。 


: 自 有 属性 (own property) 是 直接 在 对 象 中 定义 的 属性 。 
.继承 属性 (inherited 。” property) 是 在 对 象 的 原型 对 象 中 定义 的 属 





6.1 创建 对 象 


可 以 通过 对 象 直接 量 、 关 键 字 new 和 (ECMAScript 5 中 的 ) 
Object.create0) 函 数 来 创建 对 象 。 接 下 来 几 节 将 对 这 些 技术 一 一 讲述 


6.1.1 对 象 直接 量 


创建 对 象 最 简单 的 方式 就 是 在 JavaScript 代 码 中 使 用 对 象 直接 量 。 对 
象 直接 量 丰 由 邦人 下 名 / 值 对 组 成 的 映 别 表 ， 名 / 值 对 中 间 用 冒号 分 隔 ， 名 / 
值 对 之 间 用 有 喜 号 分 隔 ， 整 个 映射 表 用 人 花 括 号 括 起 来 。 属 性 名 可 以 是 
Javascript 标 识 符 也 可 以 是 字符 串 直 接 量 〈 包 括 空 字符 串 〉。 属 性 的 值 可 
以 是 任意 类 型 的 JavaScript 表 达 式 ， 表 达 式 的 值 (可 以 是 原始 值 也 可 以 是 
对 象 值 ) 就 是 这 个 属性 的 值 。 下 面 有 一 些 例子 : 





























var empty={};// 没 有 任何 属性 的 对 象 
var point={x:0,y:0};// 两 个 属性 
var point2={x:point.x,y:point.y+1};// 更 复杂 的 值 
var book={ 
"main title" "JavaScript",// 属 性 名 字 里 有 空格 ,必须 用 字符 串 

'sub- title' "The Definitive Guide" 1// 属 性 名 字 里 有 连 字符 ， 1 须 用 字符 串 表 示 
"for":"all audiences" 1 AA/"for" 是 保留 字 ， 因 此 必须 用 引号 

author: {// 这 个 属性 的 值 是 一 个 对 象 
firstname:"David",// 注 意 ， 这 里 的 属性 名 都 没有 引号 
surname: "Flanagan" 


}; 





















































































































































在 ECMAScript 5〈 以 及 ECMAScript 3 的 一 些 实现 ) 中 ， 保 留 字 可 以 
用 做 不 带 引 号 的 属性 名 。 然 而 对 于 ECMAScript 3 来 说 ， 使 用 保留 字 作 为 
属性 名 必须 使 用 引号 引起 来 。 在 ECMAScript 5 中 ， 对 象 直接 量 中 的 最 后 
一 个 属性 后 的 逗号 将 忽略 ， 且 在 ECMAScript 3 的 大 部 分 实现 中 也 可 以 忽 
略 这 个 逗号 ， 但 在 正中 则 报错 。 











对 象 直接 量 是 一 个 表达 式 ， 这 个 表达 式 的 每 次 运算 都 创建 并 初始 化 
一 个 新 的 对 象 。 每 次 计算 对 象 直 接 量 的 时 候 ， 也 都 会 计算 它 的 每 个 属性 
的 值 。 也 就 是 说 ， 如 果 在 一 个 重复 调用 的 函数 中 的 循环 体内 使 用 了 对 象 
它 将 创建 很 多 新 对 象 ， 并 且 每 次 创建 的 对 象 的 属性 值 也 有 可 能 


6.1.2 ”通过 new 创 建 对 象 


new 运 算 符 创建 并 初始 化 一 个 新 对 象 。 关 键 字 new 后 跟随 一 个 函数 
调用 。 这 里 的 函数 称 做 构造 函数 (constructor) ， 构 造 函 数 用 以 初始 化 
8 JavaScript 语 言 核 心中 的 原始 类 型 都 包含 内 置 构造 函 
。 例 如 





var o=new 0bject();// 创 建 一 0 和 人 一 样 
var a=new Array();// 创 建 一 个 空 数组 ， 和 [] 一 样 
var d=new Date(); /和 十 一个 下 当前 时 间 二 Datex 对 象 

var r=new RegExp("js");// 创 建 一 个 可 以 进行 模式 匹配 的 EegExp 对 象 


























除了 这 些 内 置 构造 函数 ， 用 自 定 义 构造 函数 来 初始 化 新 对 象 也 是 非 
常常 见 的。 第 9 章 将 详细 讲述 其 中 的 细节 。 


6.1.3 ”原型 


在 讲述 第 三 种 对 象 创 建 技术 之 前 ， 我 们 应 当 首 先 解释 一 下 原型 。 
一 个 JavaScript 对 象 Cnul 除 外 ) 都 和 男 一 个 对 象 相关 联 。“ 男 一 个 ”对 象 
就 是 我 们 熟知 的 原型 ， 每 一 个 对 象 都 从 原型 继承 属性 。 


所 有 通过 对 象 直 接 量 创建 的 对 象 都 具有 同一 个 原型 对 象 ， 并 可 以 通 
过 JavaScript 代 人 码 Object.prototype 获 得 对 原型 对 象 的 引用 。 通 过 关键 字 
new 和 构造 函数 调用 创建 的 对 象 的 原型 就 是 构造 函数 的 prototype 属 性 的 
值 。 因 此 ， 同 使 用 人 创建 对 象 一 样 ， 通 过 new Object0 创 建 的 对 象 也 继 
承 自 Object.prototype。 同 样 ， 通 过 new ”Array(0) 创 建 的 对 象 的 原型 就 是 
Array.prototype， 通 过 new DateO 创 建 的 对 象 的 原型 就 是 Date.prototype。 


没有 原型 的 对 象 为 数 不 多 ，Object.prototype 就 是 其 中 之 一 。 它 不 继 
承 任 何 属性 。 其 他 原型 对 象 都 是 普通 对 象 ， 普 通 对 象 都 具有 原型 。 所 有 
的 内 置 构造 函数 (以 及 大 部 分 自 定义 的 构造 函数 ) 都 共有 一 个 继承 自 
Object.prototype 的 原型 。 例 如 ，Date.prototype 的 属性 继承 自 


Object.prototype， 因 此 由 new Date0 创 建 的 Date 对 象 的 属性 同时 继承 自 
Date.prototype 和 Object.prototype。 这 一 系列 链接 的 原型 对 象 就 是 所 谓 
的 “原型 链 ”(prototype chain) 。 


6.2.2 节 讲述 属性 继承 的 工作 机 制 。6.8.1 节 将 会 讲 到 如 何 获取 对 象 的 
原型 。 第 9 章 将 会 更 详细 地 讨论 原型 和 构造 函数 ， 包 括 如 何 通过 编写 构 
造 函 数 定义 对 象 的 “类 ”， 以 及 给 构造 函数 的 prototype 属 性 赋值 可 以 让 
其 “实例 ”直接 使 用 这 个 原型 上 的 属性 和 方法 。 


6.1.4 Object.createl() 


ECMAScript 5 定义 了 一 个 名 为 Object.create() 的 方法 ， 它 创建 一 个 新 
对 象 ， 其 中 第 一 个 参数 是 这 个 对 象 的 原型 。Object.create() 提 供 第 二 个 可 
选 参数 ， 用 以 对 对 象 的 属性 进行 进一步 描述 。6.7 节 会 详细 讲述 第 二 个 


少 


Object.create(0) 是 一 个 静态 函数 ， 而 不 是 提供 给 某 个 对 象 调 用 的 方 
法 。 使 用 它 的 方法 很 简单 ， 只 须 传 入 所 需 的 原型 对 象 即 可 : 
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var o1=0bject.create({fx:1,y:2}+);//o1 继 承 了 属 





生 xX 和 y 





可 以 通过 传 入 参数 null 来 创建 一 个 没有 原型 的 新 对 象 ， 但 通过 这 种 
方式 创建 的 对 象 不 会 继承 任何 东西 ， 甚 至 不 包括 基础 方法 ， 比 如 
toString()， 也 就 是 说 ， 它 将 不 能 和 “+” 运 算 符 一 起 正常 工作 : 











var 02=0bject.create(null);//02 不 继承 任何 属性 和 方法 








如 果 想 创建 一 个 普通 的 空 对 象 〈( 比 如 通过 {或 ew ”Object0 创 建 的 
对 象 ) ， 需 要 传 入 Object.prototype: 





var 03=0bject.create(Object.prototype);//03 和 {} 和 new 0bject() 一 样 








可 以 通过 任意 原型 创建 新 对 象 ( 换 句 话说 ， 可 以 使 任意 对 象 可 继 
承 ) ， 这 是 一 个 强大 的 特性 。 在 ECMAScript 3 中 可 以 用 类 似 例 6-1 中 的 
代码 来 模拟 原型 继承 局 : 


例 6-1: 通过 原型 继承 创建 一 个 新 对 象 








//inherit() 返 回 了 一 个 继承 自 原型 对 象 p 的 属性 的 新 对 象 

// 这 里 使 用 ECMAScript 5 中 的 0bject,create() 函 数 (如 果 存 在 的 话 ) 
// 如 果 不 存在 Object .create()， 则 退化 使 用 其 他 方法 
function inherit(p)t{ 

if(p==null)throw TypeError();//p 是 一 个 对 象 ， 但 不 能 是 null 
if(0bject.create)// 如 果 0bject. 0 
return 0bject.create(p);// 直 接 使 用 
var t=typeof p;// 和 否则 进行 进一步 检测 
If(t!=="object"&&tI=="function" )throw TypeError(); 
function f(){};// 定 义 一 1 
f.prototype=p;// 将 其 原型 为 p 
return new f();// 使 用 f ) 的 级 永 对 象 
} 
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在 看 完 第 9 章 关 于 构造 函数 的 内 容 后 ， 例 6-1 中 的 inheritO 函 数 会 更 容 
易 理 解 。 现 在 只 要 知道 它 返回 的 新 对 象 继 承 了 参数 对 象 的 属性 就 可 以 
了 。 注 意 ，inheritO 并 不 能 完全 代替 Object.create0)， 它 不 能 通过 传 入 null 
原型 来 创建 对 象 ， 而 且 不 能 接收 可 选 的 第 二 个 参数 。 不 过 我 们 仍 会 在 本 
草 和 第 9 章 的 示例 代码 中 多 次 用 到 inherit()。 


inheritO 函 数 的 其 中 一 个 用 途 就 是 防止 库 函 数 无 意 间 《〈 非 恶意 地 ) 
修改 那些 不 受 你 控制 的 对 象 。 不 是 将 对 象 直 接 作为 参数 传 入 函数 ， 而 是 
将 它 的 继承 对 象 传 入 函数 。 当 函数 读 取 继承 对 象 的 属性 时 ， 实 际 上 读 取 
的 是 继承 来 的 值 。 如 末 给 继承 对 象 的 属性 赋值 ， 则 这 些 属性 只 会 影响 这 
个 继承 对 象 目 身 ， 而 不 是 原始 对 象 : 











var o={x:"don't change this value"}; 
library_function(inherit(0));// 防 止 对 0 的 意外 修改 





了 解 其 工作 原理 ， 需 要 首先 了 解 JavaScript 中 属性 的 查询 和 设置 机 
制 。 接 下 来 会 讲 到 。 


6.2 ”属性 的 查询 和 设置 


4.4 贡 已 经 提 到 ， 可 以 通过 点 (.) 或 方 括号 (D) 运 算 符 来 获取 属性 的 
值 。 运 算 符 左 侧 应 当 是 一 个 表达 式 ， 它 返回 一 个 对 象 。 对 于 反 (.) 来 说 ， 
右 侧 必须 是 一 个 以 属性 名 称 命名 的 简单 标识 符 。 对 于 方 括号 来 说 ([])， 
ee 古 一 个 计算 结果 为 字符 串 的 表达 式 ， 这 个 字符 串 就 是 属性 








var author=book.author;// 得 到 book 的 "author" 属 性 
var name=author .surname// 得 到 获得 author 的 "surname" 属 性 
var title=book["main title"]// 得 到 book 的 "main title" 属 性 














和 查询 属性 值 的 写法 一 样 ， 通 过 点 和 方 括 号 也 可 以 创建 属性 或 给 属 
性 赋值 ， 但 需要 将 它们 放 在 赋值 表达 式 的 左 侧 : 





book,edition=6;// 给 book 创 建 一 个 名 为 "edition" 的 属性 
book["main title"]="ECMAScript";// 给 "main title" 属 性 赋值 














在 ECMAScript ”3 中 ， 点 运算 符 后 的 标识 符 不 能 是 保留 字 ， 比 如 ， 
o.for 或 o.class 是 非法 的 ， 因 为 for 是 JavaScript 的 关键 字 ，class 是 保留 字 。 
如 果 一 个 对 象 的 属性 名 是 保留 字 ， 则 必须 使 用 方 括号 的 形式 访问 它们 ， 
比如 o["for"] 和 o["class"]。ECMAScript 5 对 此 放宽 了 限制 (包括 
ECMAScript 3 的 某 些 实现 ) ， 可 以 在 点 运算 符 后 直接 使 用 保留 字 。 


当 使 用 方 括号 时 ， 我 们 说 方 括号 内 的 表达 式 必 须 返 回 字 符 串 。 其 实 
更 严格 地 讲 ， 表 达 式 必须 返回 字符 串 或 返回 一 个 可 以 转换 为 字符 串 的 
0 这 情况 象 是 非常 
和 常见 的 。 


6.2.1 ”作为 关联 数组 的 对 和 象 
上 文 提 到 ， 下 面 两 个 JavaScript 表 达 式 的 值 相 同 : 








object .property 
object["property"] 





第 一 种 语法 使 用 点 运算 符 和 一 个 标识 符 ， 这 和 C 和 Java 中 访问 一 个 
结构 体 或 对 象 的 静态 字段 非常 类 似 。 第 三 种 语法 使 用 方 括 号 和 一 个 字符 
捉 ， 看 起 来 更 像 数 组 ， 只 是 这 个 数组 元 素 是 通过 字符 串 索引 而 不 是 数字 
索引 。 这 种 数组 就 是 我 们 所 说 的 关联 数组 (associative array) ， 也 称 做 
散 列 、 映 射 或 字典 〈dictionary) 。JavaScript 对 象 都 是 关联 数组 ， 本 节 
将 讨论 它 的 重要 性 。 


在 C、C++ 和 Java 和 一 些 强 类 型 (strong typed) 司 语言 中 ， 对 象 只 能 拥 
有 固定 数目 的 属性 ， 并 且 这 些 属 性 名 称 必 须 提前 定义 好 。 由 于 JavaScript 











是 弱 类 型 语言 ， 因 此 不 必 遵 循 这 条 规定 ， 在 任何 对 象 中 程序 都 可 以 创建 
任意 数量 的 属性 外 。 但 当 通 过 点 运算 符 (.) 访 问 对 象 的 属性 时 ， 属 性 名 用 
一 个 标识 符 来 表示 。 标 识 符 必须 直接 出 现在 JavaScript 程 序 中 ， 它 们 不 是 
数据 类 型 ， 因 此 程序 无 法 修改 它们 名。 


反 过 来 讲 ， 当 通过 [] 来 访问 对 象 的 属性 时 ， 属 性 名 通过 字符 串 来 表 
示 。 字 符 串 是 JavaScript 的 数据 类 型 ， 在 程序 运行 时 可 以 修改 和 创建 它 
们 。 因 此 ， 可 以 在 JavaScript 中 使 用 下 面 这 种 代码 : 














var addr="””; 
for(i=0;i<4;i++){ 
addr+=customer["address"+i]+'\n';} 





这 有 段 代码 读 取 customer 对 象 的 address0、address1、address2 和 和 
address3 属 性 ， 并 将 它们 连接 起 来 。 


这 个 例子 主要 说 明了 使 用 数组 写法 和 用 字符 串 表 达 式 来 访问 对 象 属 
性 的 灵活 性 。 这 段 代 码 也 可 以 通过 点 运算 符 来 重 写 ， 但 是 很 多 场景 只 能 
使 用 数组 写法 来 完成 。 假 设 你 正在 写 一 个 程序 ， 这 个 程序 利用 网 络 资 源 
计算 当前 用 户 股 票 市 场 投资 的 金额 。 程 序 允 许 用 户 输入 每 只 股票 的 名 称 
和 购 股 份额 。 该 程序 使 用 名 为 portfolio 的 对 象 来 存储 这 些 信息 。 每 只 上 股 
票 在 这 个 对 象 中 都 有 对 应 的 属性 ， 属 性 名 称 就 是 股票 名 称 ， 属 性 值 就 是 
例如 ， 如 果 用 户 持 有 IBM 的 50 股 ， 那 么 portfolio.ibm 属 性 的 值 
就 为 50。 


下 面 是 程序 的 部 分 代码 ， 这 个 函数 用 来 给 portifolio 添 加 新 的 股票: 


























function addstock(portfolio,stockname, shares ){ 
portfolio[stockname]=shares,; 


} 








由 于 用 户 是 在 程序 运行 时 输入 股票 名 称 ， 因 此 在 之 前 无 法 得 知 这 些 
股票 的 名 称 是 什么 。 而 由 于 在 写 程 序 的 时 候 不 知道 属性 名 称 ， 因 此 无 法 
通过 点 运算 符 (.) 来 访问 对 象 portfolio 的 属性 。 但 可 以 使 用 [运算 符 ， 因 为 
它 使 用 字符 串 值 〈 字 符 串 值 是 动态 的 ， 可 以 在 运行 时 更 改 ) 而 不 是 标识 
符 〈 标 识 符 是 静态 的 ， 必 须 写 死 在 程序 中 ) 作为 案 引 对 属性 进行 访问 。 


第 5 章 介 绍 了 for/i n 循 环 〈6.5 节 还 会 进一步 介绍 ) 。 当 使 用 fowvi n 循 








环 遇 历 关 联 数组 时 ， 束 可 以 清晰 地 体会 到 forvin 的 强大 之 处 。 下 面 的 例 
子 束 是 利用 for/in 计 算 portfolio 的 总 计 值 : 





function getvalue(portfolio)f{ 

Var total=0.0; 

for(stock in portfolio){// 遍 历 portfolio 中 的 每 只 股票 
var shares=portfolio[stock];// 得 到 每 只 股票 的 份额 
var price=getquote(stock);// 查 找 股 票 价 格 
total+=shares*price;// 将 结果 累加 至 total 中 











} 
return total;// 返 回 total 的 值 





6.2.2 ”继承 


JavaScript 对 象 具 有 “ 自 有 属性 ”(own property) ， 也 有 一 些 属 性 是 
从 原型 对 象 继承 而 来 的 。 为 了 更 好 地 理解 这 种 继承 ， 必 须 更 深入 地 了 解 
属性 访问 的 细节 。 本 节 中 的 许多 示例 代码 借用 了 例 6-1 中 的 记 heritO 函 
数 ， 通 过 给 它 传 入 指定 原型 对 象 来 创建 实例 。 


假设 要 查询 对 象 o 的 属性 x， 如 果 o 中 不 存在 x， 那 么 将 会 继续 在 o 的 
原型 对 象 中 查询 属性 x。 如 果 原 型 对 象 中 也 没有 xX， 但 这 个 原型 对 象 也 有 
原型 ， 那 么 继续 在 这 个 原型 对 象 的 原型 上 执行 查询 ， 直 到 找到 x 或 者 查 
找到 一 个 原型 是 null 的 对 象 为 止 。 可 以 看 到 ， 对 象 的 原型 属性 构成 了 一 
个 “ 链 ”， 通 过 这 个 “ 链 ” 可 以 实现 属性 的 继承 。 

















var o={f}//o 从 object.prototype 继 承 对 象 的 方法 
0.X=1;// 给 o 定 义 一 个 属性 x 
var p= =inherit(o); //Pp 继 承 oO 和 0bject ,prototype 
p.y=2;// 给 p 定 义 一 个 属性 y 
var q=inherit(p); rd 0 和 Object .prototype 
q.Z=3;// 给 q 定 义 一 个 属性 z 
var s=q.toString();//toString 继 承 自 0bject.prototype 
q.Xx+dq,.y/V/=>3:X 和 y 分 别 继承 自 o 和 pp 















































现在 假设 给 对 象 o 的 属性 x 赋 值 ， 如 果 o 中 已 经 有 属性 x〈 这 个 属性 不 
是 继承 来 的 ) ， 那 么 这 个 赋值 操作 只 改变 这 个 已 有 属性 x 的 值 。 如 果 o 中 
不 存在 属性 xz， 那么 赋值 操作 给 o 添 加 一 个 新 属性 xz。 如 果 之 前 o 继 承 目 属 
性 zx， 那么 这 个 继承 的 属性 就 被 新 创建 的 同名 属性 禾 闸 了 。 


属性 赋值 操作 首先 检查 原型 链 ， 以 此 判定 是 否 允 许 赋值 操作 。 例 
如 ， 如 果 o 继 承 自 一 个 只 读 属性 x， 那 么 赋值 操作 古 不 允许 的 (6.2.3 市 将 











对 此 进行 详细 讨论 ) 。 如 果 人 允许 属性 赋值 操作 ， 它 也 总 是 在 原始 对 象 上 
创建 属性 或 对 已 有 的 属性 赋值 ， 而 不 会 去 修改 原型 链 。 在 JavaScript 中 ， 
只 有 在 查询 属性 时 才 会 体会 到 继承 的 存在 ， 而 设置 属性 则 和 继承 无 关 ， 
这 是 JavaScript 的 一 个 重要 特性 ， 该 特性 让 程序 员 可 以 有 选择 地 和 窗 详 
(override) 继承 的 属性 。 








var unitcircle={r:1};// 一 个 用 来 继承 的 对 象 
var c=inherit(unitcircle);//c 继 承 属性 r 
c.x=1;c.y=1;//c 定 义 两 个 属性 

c.r=2; //c 履 盖 继 承 来 的 属 属性 

unitcircle. r;//=>1, 原型 对 象 没有 修改 









































属性 赋值 要 么 失败 ， 要 么 创建 一 个 属性 ， 要 么 在 原始 对 象 中 设置 属 
性 ， 但 有 一 个 例外 ， 如 果 o 继 承 自 属 性 x， 而 这 个 属性 是 一 个 具有 setter 方 
法 的 accessor 属 性 〈 人 参照 6.6 节 ) ， 那 么 这 时 将 调用 setter 方 法 而 不 是 给 o 
创建 一 个 属性 x。 需 要 注意 的 是 ，setter 方 法 是 由 对 象 o 调 用 的 ， 而 不 是 定 
义 这 个 属性 的 原型 对 象 调 用 的 。 因 此 如 果 setter 方 法 定义 任意 属性 ， 这 个 
操作 只 是 针对 o 本 有 身 ， 并 不 会 修改 原型 链 。 


6.2.3 ”属性 访问 错误 


属性 访问 并 不 总 是 返回 或 设置 一 个 值 。 本 节 讲 述 碍 询 或 设置 属性 时 
的 一 些 出 错 情况 。 


查询 一 个 不 存在 的 属性 并 不 会 报错 ， 如 果 在 对 象 o 自 号 的 属性 或 继 
承 的 属性 中 均 未 找到 属性 x， 属 性 访问 表达 式 o.x 返 回 undefined。 回 想 一 
下 我 们 的 book 对 象 有 属性 "sub-title"， 而 没有 属性 "subtitle": 














book,subtitle;//=>undefined :属性 不 存在 








但 是 ， 如 果 对 象 不 存在 ， 那么 试图 得 询 这 个 不 存在 的 对 象 的 属性 束 
人 性 ， 因 此 查询 这 些 值 的 属性 会 报 
错 ， 接 上 例 











// 抛 出 一 个 类 型 错误 异常 ，undefined 没 有 length 属 性 
var len=book.subtitle.length; 











除非 确定 book 和 book.subtitle 都 是 (或 在 行为 上 )〉 对 象 ， 否 则 不 能 这 


样 写 表达 式 book.subtitle.length， 因 为 这 样 会 报错 ， 下 面 提 供 了 两 种 避免 
出 错 的 方法 : 








// 一 种 元 余 但 很 易 懂 的 方法 
var Jen=undefined ; 
if(book){ 
if(book.subtitle)len=book.subtitle.1length,; 



































} 
// 一 种 更 简练 的 常用 方法 ， 获 取 subtitle 的 length 属 性 或 undefined 
var len=book&&book.subtitle&&book.subtitle.length,; 








为 了 理解 为 什么 这 里 的 第 二 种 方法 可 以 避免 类 型 错误 异常 ， 可 以 参 
照 4.10.1 节 中 关于 及 及 运算 符 的 短路 行为 。 


当然 ， 给 null 和 undefined 设 置 属性 也 会 报 类 型 错误 。 给 其 他 值 设 置 
属性 也 不 总 是 成 功 ， 有 一 些 属性 是 只 读 的 ， 不 能 重新 赋值 ， 有 一 些 对 象 
不 多 许 新 增 属性 但 让 人 占 感 意外 的 是 ， 这 些 设 置 属性 的 失败 操作 不 会 
民 铬 : 























// 内 置 构造 函数 的 原型 是 只 读 的 
Object .prototype=0; /7 赋值 失败 ， 但 没 报错 ，0bject .prototype 没 有 修改 











这 是 一 个 历史 遗留 问题 ， 这 个 bug 在 ECMAScript 5 的 严格 模式 中 已 
经 修复 。 在 严格 模式 中 ， 任 何 失败 的 属性 设置 操作 都 会 抛 出 一 个 类 型 错 


误 异 常 。 


尽管 属性 赋值 成 功 或 失败 的 规律 看 起 来 很 简单 ， 但 要 描述 清楚 并 不 
容易 。 在 这 些 场 景 下 给 对 象 o 设 置 属性 p 会 失败 : 


:0 中 的 属性 p 是 只 读 的 : 不 能 给 只 读 属 性 重新 赋值 〈defineProperty0) 
方法 中 有 一 个 例外 ， 可 以 对 可 配置 的 只 读 属 性 重新 赋值 ) 。 


:0o 中 的 属性 p 是 继承 属性 ， 且 它 是 只 读 的 : 不 能 通过 同名 自 有 属性 
履 盖 只 读 的 继承 属性 。 


.0 中 不 存在 自 有 属性 p: o 没 有 使 用 setter 方 法 继承 属性 p， 并 且 o 的 可 
扩展 性 (extensible ”attribute〉 是 false (参照 6.8.3 节 ) 。 如 果 o 中 不 存在 
p， 而 且 没 有 setter 方 法 可 供 调 用 ， 则 p 一 定 会 添加 至 o 中 。 但 如 果 o 不 是 可 
扩展 的 ， 那 么 在 o 中 不 能 定义 新 属性 。 








6.3 删除 属性 


delete 运 算 符 ( 见 4.13.3 市 ) 可 以 删除 对 象 的 属性 。 它 的 操作 数 应 当 
征 一 个 属性 访问 表达 式 。 让 人 感到 意外 的 是 ，delete 只 是 断 开 属性 和 箱 
主 对 象 的 联系 ， 而 不 会 去 操作 属性 中 的 属性 名 ; 











delete book.author;//book 不 再 有 属性 author 
delete book["main title" ] ;A//book 也 不 再 有 属性 "main title" 



































delete 运 算 符 只 能 删除 自 有 属性 ， 不 能 删除 继承 属性 (要 删除 继承 
属性 必须 从 定义 这 个 属性 的 原型 对 象 上 删除 它 ， 而 且 这 会 影响 到 所 有 继 
承 目 这 个 原型 的 对 象 〉。 


当 delete 表 达 式 删除 成 功 或 没有 任何 副作用 (比如 删除 个 存在 的 属 
性 ) 时 ， 它 返回 true。 如 果 delete 后 不 是 一 个 属性 访问 表达 式 ，delete 同 
样 返回 true: 

















o={x:1};//o 有 一 个 属性 x， 并 继承 属性 toString 
delete 0o.Xx;// 删 除 x， 返 回 true 
delete 0,.Xx;V// 什 么 都 没 做 〈X 已 经 不 存在 了 ) ， 返 回 true 
delete o.toString;// 什 么 也 没 做 CtoStrinig 是 继承 来 的 》 ， 返 回 true 
delete 1;// 无 意义 ， 返 回 true 






























































delete 不 能 删除 那些 可 配置 性 为 false 的 属性 〈 尽 管 可 以 删除 不 可 扩 
展 对 象 的 可 配置 属性 ) 。 某 些 内 置 对 象 的 属性 是 不 可 配置 的 ， 比 如 通过 
变量 声明 和 函数 声明 创建 的 全 局 对 象 的 属性 。 在 严格 模式 中 ， 删 除 一 个 
不 可 配置 属性 会 报 一 个 类 型 错误 。 在 非 严 格 模式 中 (以 及 ECMAScript 3 
中 ) ， 在 这 些 情况 下 的 delete 操 作 会 返回 false: 


























delete 0bject.prototype;// 不 能 删除 ， 属 性 是 不 可 配置 的 
var Xx=1;// 声 明 一 个 全 局 变量 

delete this. x;// 不 能 删除 这 个 属性 
function f( ){}// 声 明 一 个 全 局 函数 
delete this.f;// 也 不 能 删除 全 局 函数 









































当 在 非 严 格 模式 中 删除 全 局 对 象 的 可 配 值 属 性 时 ， 可 以 省 略 对 全 局 
对 象 的 引用 ， 和 直接 在 delete 操 作 符 后 跟随 要 删除 的 属性 名 即 可 : 

















this .x=1;// 创 建 一 个 可 配置 的 全 局 属性 (没有 用 var) 























delete x;// 将 它 删除 





然而 在 严格 模式 中 ，delete 后 跟随 一 个 非法 的 操作 数 〈 比 如 x) ， 则 
会 报 一 个 语法 错误 ， 因 此 必须 显 式 指定 对 象 及 其 属性 : 











delete x;// 在 严格 模式 下 报 语法 错误 
delete this. x;// 正 常 工作 


6.4 检测 属性 


JavaScript 对 象 可 以 看 做 属性 的 集合 ， 我 们 经 常会 检测 集合 中 成 员 的 
所 属 关 系 一 一 判断 某 个 属性 是 否 存在 于 某 个 对 象 中 。 可 以 通过 in 运 算 
符 、hasOwnPreperty() 和 propertyIsEnumerable() 方 法 来 完成 这 个 工作 ， 其 
至 仅 通 过 属性 查询 也 可 以 做 到 这 一 点 。 


in 运 算 符 的 左 侧 是 属性 名 (字符 串 〉， 右 侧 是 对 象 。 如 果 对 象 的 自 
有 属性 或 继承 属性 中 包含 这 个 属性 则 返回 true: 





























Var o={x:1} 

"x"in 0;//true: "x" 是 0 的 属性 
"y"in 0;//false:"y" 不 是 0 的 属性 
"toString"in 0;//true: 0 继承 toString 属 性 





斌 














对 象 的 hasOwnProperty0) 方 法 用 来 检测 给 定 的 名 字 是 否 是 对 象 的 自 
有 属性 。 对 于 继承 属性 它 将 返回 false: 





Var o={x:1} 

0.hasOownProperty("x");//true: 0 有 一 个 自 有 属性 x 
o.hasownProperty("y");//false: o 中 不 存在 属性 y 
o.hasownProperty("toString");//false: toString 是 继承 属性 






























































propertyIsEnumerable() 是 hasOwnProperty() 的 增强 版 ， 只 有 检测 到 是 
自 有 属性 且 这 个 属性 的 可 枚 举 性 (enumerable _ attribute ) 为 true 时 它 才 返 
回 true。 某 些 内 置 属性 是 不 可 枚 举 的 。 通 稼 由 JavaScript 代 码 创 建 的 属性 
都 是 可 枚 举 的 ， 除 非 在 ECMAScript 5 中 使 用 一 个 特殊 的 方法 来 改变 属性 
的 可 枚 举 性 ， 随 后 会 提 到 : 











var o=inherit({y:2}); 


0.X=1; 

0.propertyIsEnumerable("x");//true:0o 有 一 个 可 枚 举 的 自 有 属性 x 
0.propertyIsEnumerable("y");//false:y 是 继承 来 的 
Object.prototype.propertyIsEnumerable("toString");//false: 不 可 枚 举 

















除了 使 用 n 运 算 符 之 外 ， 另 一 种 更 简便 的 方法 是 使 用 4==” 判 断 一 
个 属性 是 否 是 undefined: 





Var o={x:1} 
0.Xx!==undefined;//true:o 中 有 属性 x 
0.y!==undefined;//false:0o 中 没有 属性 y 
0o.toSstring!==undefined;//true: 0 tring 内 





























然而 有 一 种 场景 只 能 使 用 in 运 算 符 而 不 能 使 用 上 述 属 性 访问 的 方 
和 in 可 以 区 分 不 存在 的 属性 和 存在 但 值 为 undefined 的 属性 。 例 如 下 面 
代码 : 





var 0={Xx:undefined}// 属 性 被 显 式 赋值 为 undefined 
0.XxX!==undefined//false: 属性 存在 ， 但 值 为 undefined 
o.y!==undefined//false: 属性 不 存在 

"x"in 0//true: 属性 存在 
"y"in 0//false: 属性 不 存在 
delete 0o.x;// 删 除了 属性 x 
"x"in 0//false: 属性 不 再 存在 

































































注意 ， 上 述 代码 中 使 用 的 是 “!==” 运 算 符 ， 而 不 是 “!=”。“!==” 可 以 
区 分 undefined 和 null。 有 时 则 不 必 作 这 种 区 分 : 








// 如 果 o 中 含有 属性 x， 且 x 的 值 不 是 nu11 或 undefined，o.x 乘 以 2 . 
if(o.Xx!=nul1)o.x*=2;// 如 果 o 中 含有 属性 Xx， 且 x 的 值 不 能 转换 为 false，0 .X 乘 以 2 , 
// 如 果 x 是 undefined、 null、 false, ""、 0 或 NaN， 则 它 保持 不 变 
If(o,X)0.X*=2) 


6.5” 枚 举 属性 


除了 检测 对 象 的 属性 是 否 存在 ， 我 们 还 会 经 党 壳 历 对 象 的 属性 。 通 
常 使 用 fovin 循 环 遍历 ，ECMAScript 5 提供 了 两 个 更 好 用 的 替代 方案 。 


5.5.4” 节 讨论 过 for/i n 循 坏 ，for/i n 循 环 可 以 在 循环 体 中 遍历 对 象 中 
所 有 可 枚 举 的 属性 〈 包 括 自 有 属性 和 继承 的 属性 ) ， 把 属性 名 称 赋值 给 
循环 变量 。 对 象 继承 的 内 置 方 法 不 可 枚 举 的 ， 但 在 代码 中 给 对 象 添加 的 



































属性 都 是 可 枚 举 的 《除非 用 下 文中 提 到 的 一 个 方法 将 它们 转换 为 不 可 枚 
举 的 ) 。 例 如 : 














var 0={X:1,y:2,z:3};// 三 个 可 枚 举 的 自 有 属性 
o.propertyIsEnumerable("toString")V/=>false， 不 可 枚 举 
for(p in o)// 遍 历 属 性 
console.1og(p);// 输 出 x、y 和 Zz， 不 会 输出 toString 














有 许多 实用 工具 库 给 Object. ose 了 新 的 方法 或 属性 ， 这 些 
方法 和 属 性 可 以 被 所 有 对 象 继承 并 使 用 。 然 而 在 ECMAScript 5 标准 之 
前 ， 这 些 新 添加 的 方法 是 不 和 有 定义 为 不 可 枚 举 的 ， 因此 它们 都 可 以 在 
forvin 循 环 中 枚 举 出 来 。 为 了 避免 这 种 情况 ， 需 要 过 滤 forin 循 环 返 回 的 
属性 ， 下 面 两 种 方式 是 最 常见 的 : 








for(p in o){ 
if(!0.hasownProperty(p))continue;// 跳 过 继承 的 属性 





到 





} 

for(p in o){ 

if(typeof of[p]==="function")continue;// 跳 过 方法 
} 





例 6-2 定 义 了 一 些 有 用 的 工具 函数 来 操控 对 象 的 属性 ， 这 些 函 数 用 
到 了 fovin 循 环 。 实 际 上 extend0 函 数 经 名 出 现在 JavaScript 实 用 工具 库 中 
加 。 





例 6-2: 用 来 枚 举 属性 的 对 象 工具 函数 





了 和 
* 把 p 中 的 可 枚 举 属 性 复制 到 o 中 ， 并 返回 o 
* 如 果 o 和 p 中 含有 同名 属性 ， 则 履 盖 o 中 的 属性 

* 这 个 函数 并 不 处 理 getter 和 setter 以 及 复制 属性 
WA 

function extend(o,p){ 
for(prop in p){// 遍 历 p 中 的 所 有 属性 
o[prop]=p[prop];// 将 属性 添加 至 o 中 
} 





































































































return o; 

}/™ 

* 将 p 中 的 可 枚 举 属 性 复制 至 o 中 ， 并 返回 0 
* 如 果 o 和 p 中 有 同名 的 属性 ，o 中 的 属性 将 不 受 影 响 
* 这 个 函数 并 不 处 理 getter 和 setter 以 及 复制 属性 
wh 













































































function merge(o,p)t{ 
for(prop in p){// 遍 历 p 中 的 所 有 属性 
if(o.hasownProperty[prop])continue;// 过 滤 掉 已 经 在 o 中 存在 的 属性 
o[prop]=p[prop];// 将 属性 添加 至 o 中 























TT 




















} 












































return o; 

}/™ 

* 如 果 o 中 的 属性 在 p 中 没有 同名 属性 ， 则 从 o 中 删除 这 个 属性 
* 返 回 0 

*/ 


function restrict(o,p){ 
for(prop in 0){// 遍 历 o 中 的 所 有 属性 

if(!(prop in p))delete o[prop];// 如 果 在 p 中 不 存在 ， 则 删除 之 
} 





























return o; 

}/™ 

* 如 果 o 中 的 属性 在 p 中 存在 同名 属性 ， 则 从 o 中 删除 这 个 属性 
x 返 回 0 
*/ 
function subtract(o,p)t{ 
for(prop in p){// 遍 历 p 中 的 所 有 属性 
delete o[prop];// 从 o 中 删除 〈 删 除 一 个 不 存在 的 属性 不 会 报错 ) 
} 
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return o; 

}/™ 

* 返 回 一 个 新 对 象 ， 这 个 对 象 同时 0 的 属性 和 p 的 属性 
* 如 果 o 和 p 中 有 重 名 属性 ， 使 用 p 中 的 属性 值 

*/ 






















































































function union(o,p){return extend(extend({},0),p);}/* 
* 返 回 一 个 新 对 象 ， 这 个 对 象 拥有 同时 在 o 和 p 中 出 现 的 属性 
* 很 像 求 oO 和 p 的 交集 ， 但 p 中 属性 的 值 被 ; 各 略 - 

*/ 
function intersection(o,p)t{return restrict(extend({},0),p);}/* 
* 返 回 一 个 数组 ， 这 个 数组 包含 的 是 o 中 可 枚 举 的 自 有 属性 的 名 字 

*/ 

function keys(o){ 

if(typeof o0!=="object")throw TypeError();// 参 数 必须 是 对 象 

var result=[];// 将 要 返回 的 数组 

for(var prop in 0){// 遍 历 所 有 可 枚 举 的 属性 
if(o.hasownProperty(prop))// 判 断 是 否 是 自 有 属性 
result.push(prop);// 将 属性 名 添加 至 数组 中 
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} 
return result;// 返 回 这 个 数组 
} 














Co ECMAScript 5 定义 了 两 个 用 以 枚 举 属 性 名 称 
的 函数 。 第 一 个 是 Object.keys()， 它 返回 一 个 数组 ， 这 个 数组 由 对 象 中 
加 机 兴 的 自 有 属 人 的 称 组 成 ， 它 的 工作 原理 和 例 6-2 中 的 工具 函数 
keys0) 类 似 


ECMAScript 5 中 第 二 个 枚 举 属性 的 函数 是 
Object.getOwnPropertyNames()， 它 和 Ojbect.keys() 类 似 ， 只 是 它 返回 对 
象 的 所 有 自 有 属性 的 名 称 ， 而 不 仅仅 是 可 枚 举 的 属性 。 在 ECMAScript 3 
中 是 无 法 实现 的 类 似 的 函数 的 ， 因 为 ECMAScript 3 中 没有 提供 任何 方法 
来 获取 对 象 不 可 枚 举 的 属性 








6.6 ”属性 getter 和 setter 


我 们 知道 ， 对 象 属性 是 由 名 字 、 值 和 一 组 特性 (attribute〉 构 成 
的 。 在 ECMAScript 5 中 ， 属 性 值 可 以 用 一 个 或 两 个 方法 替代 ， 这 两 个 
方法 就 是 getter 和 setter。 由 getter 和 setter 定 义 的 属性 称 做 “ 存 取 器 属 
性 ”(accessor property) ， 它 不 同 于 “数据 属性 ”(data property) ， 数 据 
属性 只 有 一 个 简单 的 值 。 


当 程 序 查 询 存 取 器 属性 的 值 时 ，JavaScript 调 用 getter 方 法 (无 参 
数 ) 。 这 个 方法 的 返回 值 就 是 属性 存 取 表 达 式 的 值 。 当 程序 设置 一 个 存 
取 器 属性 的 值 时 ，JavaScript 调 用 setter 方 法 ， 将 赋值 表达 式 右 侧 的 值 当 
做 参数 传 入 setter。 从 某 种 意义 上 讲 ， 这 个 方法 负责 “设置 ”属性 值 。 可 以 
忽略 setter 方 法 的 返回 值 。 


和 数据 属性 不 同 ， 存 取 器 属性 不 具有 可 写 性 (writable attribute) 。 
El ey 那么 它 是 一 个 读 / 写 属性 。 如 果 它 
只 有 getter 方 法 ， 那 么 它 是 一 个 只 读 必 性。 如果 它 只 有 setter 方 法 ， 那 么 
它 是 一 个 内 写 属性 (数据 属性 中 有 些 例外 ) ， 读 取 只 写 属性 总 是 返回 


undefined。 


定义 存 取 器 属性 最 简单 的 方法 是 使 用 对 象 丰 接 量 语法 的 一 种 扩展 写 
法 : 


























var 0={// 普 通 的 数据 属性 
data_prop:value, // 存 取 器 属性 都 是 成 对 定义 的 函数 
get accessor prop( ){/* 这 里 是 函数 体 * 

set accessor_prop(value){/* 这 里 是 函数 体 * /} 
}; 



























































仔 取 器 属性 定义 为 一 个 或 两 个 和 属性 同名 的 函数 ， 这 个 函数 定义 没 
0 而 是 使 用 get 和 (或 ) set。 注 意 ， 这 里 没有 使 用 

号 将 属性 名 和 函数 体 分 隔 开 ， 但 在 函数 体 的 结束 和 下 一 个 方法 或 数据 
属性 之 间 有 逼 号 分 隔 。 例 如 ， 思 考 下 面 这 个 表示 2D 笛 卡尔 点 坐标 久 的 对 
象 。 它 有 两 个 普通 的 属性 zx 和 y 分 别 表示 对 应 点 的 X 坐 标 和 Y 坐 标 ， 它 还 
有 两 个 等 价 的 存 取 器 属性 用 来 表示 点 的 极 坐 标 : 
































va 
Xs 
y 





p={//x 和 y 是 普通 的 可 读 写 的 数据 属性 
.0 
0,/ 














了 
, /A/Tr 是 可 读 写 的 存 取 器 属性 ， 它 有 getter 和 setter. 











// 函 数 体 结束 后 不 要 忘记 带 上 逗号 

get r(){return Math.sqrt(this.x*this.x+this.y*this.y);}, 
set r(newvalue){ 

var oldvalue=Math,.sqrt(this.x*this.x+this,.y*this.y); 
var ratio=newvalue/oldvalue; 

this.x*=ratio,; 

this.y*=ratio,; 

},//theta 是 只 读 存 取 器 属性 ， 它 只 有 getter 方 法 

get theta(){return Math.atan2(this.y,this.x);} 

}; 
































注意 在 这 上 段 代 人 码 中 getter 和 setter 里 this 关 键 字 的 用 法 。JavaScript 把 这 
些 函 数 当 做 对 象 的 方法 来 调用 ， 也 就 是 说 ， 在 函数 体内 的 this 指 问 表 示 
这 个 点 的 对 象 ， 因 此 ，r 属 性 的 getter 方 法 可 以 通过 this.x 和 this.y 引 用 x 和 y 
属性 。8.2.2 节 会 对 方法 和 this 关 键 字 做 更 详尽 的 讲述 。 


和 数据 属性 一 样 ， 存 取 器 属性 是 可 以 继承 的 ， 因 此 可 以 将 上 述 代码 
中 的 对 象 p 当 做 另 一 个 “点 ”的 原型 。 可 以 给 新 对 象 定义 它 的 x 和 y 属 性 ， 
但 r 和 theta 属 性 是 继承 来 的 : 











var q=inherit(p);// 创 建 一 个 继承 getter 和 setter 的 新 对 象 
q .X=1,q.y=1;// 给 q 添 加 两 个 属性 
console. log(q. r );// 可 以 使 用 继承 的 存 取 器 属性 
console.1log(q.theta); 












































这 段 代码 使 用 存 取 器 属性 定义 API，API 提 供 了 表示 同一 组 数据 的 
两 种 方法 《第 卡尔 坐标 系 表示 法 和 极 坐标 系 表 示 法 ) 。 还 有 很 多 场景 可 
比如 智能 检测 属性 的 写 入 值 以 及 在 每 次 属性 读 取 时 

反问 不 同 值 : 




















// 这 个 对 象 产生 严格 自 增 的 序列 号 

var serialnum= {// 这 个 数据 属性 包含 下 一 个 序 允 
//$ 符 号 暗示 这 个 属性 是 一 个 私有 属性 
$n:0,// 返 回 当前 值 ， 然 后 自 增 

get next(){freturn this.$n++;}，V// 给 n 设 置 新 的 值 ， 但 只 有 当 它 比 当前 值 大 时 才 设 置 成 功 
Set next(n){ 

if(n>=this.$n)this.$n=n; 

else throw" 序 列 号 的 值 不 能 比 当 前 值 小 "， 

} 


}; 


di 


























































































































最 后 我 们 再 来 看 一 个 例子 ， 这 个 例子 使 用 getter 方 法 实现 一 种 “ 神 
奇 ”的 属性 : 








// 这 个 对 象 有 一 个 可 以 返回 随机 数 的 存 取 器 属性 

// 例 如 ， 表 达 式 "random.octet" 产 生 一 个 随机 数 

// 每 次 产生 的 随机 数 都 在 9 一 255 之 间 

var random={ 

get octet(){return Math.floor(Math.random( )*256);}, 

get uint16(){return Math.floor(Math.random( )*65536);}, 

get int1i6(){return Math.floor(Math.random( )*65536)-32768;} 
}; 
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本 节 介 绍 了 如 何 给 对 象 直接 量 定 义 存 取 需 属性 。 下 一 
给 一 个 已 经 存在 的 对 象 添加 一 个 存 取 器 属性 。 


6.7 属性 的 特性 


除了 包含 名 字 和 值 之 外 ， 属 性 还 包含 一 些 标识 它们 可 写 、 可 枚 举 和 
可 配置 的 特性 。 在 ECMAScript 3 中 无 法 设置 这 些 特性 ， 所 有 通过 
ECMAScript 3 的 程序 创建 的 属性 都 是 可 写 的 、 可 枚 举 的 和 可 配置 的 ， 且 
无 法 对 这 些 特 性 做 修改 。 本 节 将 讲述 ECMAScript 5 中 查询 和 设置 这 些 属 
性 特性 的 API。 这 些 API 对 于 库 的 开发 者 来 说 非常 重要 ， 因 为 : 


可 以 通过 这 些 API 给 原型 对 象 添加 方法 ， 并 将 它们 设置 成 不 可 枚 举 
的 ， 这 让 它们 看 起 来 更 像 内 置 方 法 。 


可 以 通过 这 些 API 给 对 象 定义 不 能 修改 或 删除 的 属性 ， 借 此 “ 锁 
定 * 这 个 对 象 。 


在 本 节 里 ， 我 们 将 存 取 器 属性 的 getter 和 setter 方 法 看 成 是 属性 的 特 
性 。 按 照 这 个 逻辑 ， 我 们 也 可 以 把 数据 属性 的 值 同样 看 做 属性 的 特性 。 
因此 ， 可 以 认为 一 个 属性 包含 一 个 名 字 和 4 个 特性 。 数 据 属性 的 4 个 特性 
分 别 是 它 的 值 (value) 、 可 写 性 〈writable) 、 可 枚 举 性 (enumerable) 
和 可 配置 性 (configurable〉。 存 取 器 属性 不 具有 值 (value〉 特 性 和 可 
写 性 ， 它 们 的 可 写 性 是 由 setter 方 法 存在 与 否决 定 的 。 因 此 存 取 右 属 性 的 
4 个 特性 是 读 取 (get) 、 写 入 (set) 、 可 枚 举 性 和 可 配置 性 。 


为 了 实现 属性 特性 的 查询 和 设置 操作 ，ECMAScript 5 中 定义 了 一 个 
名 为 “属性 描述 符 ”(property descriptor) 的 对 象 ， 这 个 对 象 代表 那 4 个 特 
性 。 摘 述 符 对 象 的 属性 和 它们 所 描述 的 属性 特性 是 同名 的 。 因 此 ， 数 据 
属性 的 描述 符 对 象 的 属性 有 value、writable、enumerable 和 configurable。 
存 取 器 属性 的 摘 述 符 对 象 则 用 get 属 性 和 set 属 性 代 蔡 value 和 writable。 其 
中 writable、enumerable 和 configurable 都 是 布尔 值 ， 当 然 ，get 属 性 和 set 








属性 是 函数 值 。 


通过 调用 J getOwnPropertyDescriptor() 可 以 获得 某 个 对 象 特 定 
属性 的 属性 描述 








// 返 回 {value:1,writable:true,enumerable:true,configurable:true} 

Object .getOwnPropertyDescriptor({x:1}, "x"); // 查 询 上 文中 定义 的 randam 对 象 的 octet 属性 

// 返 回 {get:/*func*/,set:undefined,enumerable:true,configurable:true} 

Object. getOwnpropertyDescriptor (random, "octet") ; // 对 于 继承 届 性 和 不 存在 的 属性 ， 返 区 
undefined 

0bject.getOwnPropertyDescriptor({}, "x");//undefined,， 没有 这 个 属性 

Object.getOwnPropertyDescriptor({},"toString");//undefined， 继 承 属性 
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从 函数 名 字 就 可 以 看 出 ，Object.getOwnPropertyDescriptorO 只 能 得 
到 自 有 属性 的 描述 符 。 要 想 获 得 继承 属性 的 特性 ， 需 要 明 历 原型 链 《〈 参 
照 6.8.1 节 的 Object.getPrototypeOfO ) 。 


要 想 设置 属性 的 特性 ， 或 者 想 让 新 建 属性 具有 某 种 特性 ， 则 需要 调 
用 Object， definePeoperty(), 传 入 要 修改 的 对 象 、 要 创建 或 修改 的 属性 的 
名 称 以 及 属性 摘 述 符 对 象 : 








var 0= 人 ;// 创 建 一 个 空 对 象 

// 添 加 一 个 不 可 枚 举 的 数据 属性 x， 并 赋值 为 1 
Object.defineProperty(o,"x", {value:1, 
writable:true, 

enumerable:false, 
configurable:true});// 属 性 是 存在 的 ， 但 不 可 枚 举 






























































0.X;//=>1 
0bject.keys(o)//=>[]// 现 在 对 属性 x 做 修改 ， 让 它 变 为 只 读 
object.defineProperty(o,"x'",{fwritable:false});// 试 图 更 改 这 个 属性 的 值 


























0.X=2;// 操 作 失 败 但 不 报错 ， 秆 在 坊 格 模式 中 独 遇 美 型 错误 皇 党 
0.X//=>1// 属 性 依然 是 可 配置 的 ， 因 此 可 以 通过 这 种 方式 对 它 进 行 修 改 : 
Object.defineProperty(o,"x", {value: 人 

0.Xx//=>2// 现 在 将 X 从 数据 属性 修改 为 存 取 器 属 | 
Object.defineProperty(o,"x", {get: a 0;}}); 
0.xX//=>0 
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传 入 Object.defineProperty0O 的 属性 描述 符 对 象 不 必 包 含 所 有 4 个 特 
性 。 对 于 新 创建 的 属性 来 说 ， 默 认 的 特性 值 是 false 或 undefined。 对 于 修 
改 的 已 有 属性 来 说 ， 默 认 的 特性 值 没有 做 任何 修改 。 注 意 ， 这 个 方法 要 
么 修改 已 有 属性 要 么 新 建 自 有 属性 ， 但 不 能 修改 继承 属性 


如 果 要 同时 修改 或 创建 多 个 属 性 ， 则 需要 使 用 
Object.defineProperties()。 第 一 个 参数 是 要 修改 的 对 象 ， 第 二 个 参数 是 一 








它 包 含 要 新 建 或 修改 的 属性 的 名 称 ， 以 及 它们 的 属性 描述 
符 ， 例 如 : 


Var p=0bject.defineProperties({},{ 
x:{value:1,writable:true,enumerable:true,configurable:true}, 
y:{value:1,writable:true,enumerable:true,configurable:true}, 
r:{ 

get:function(){return Math.sqrt(this.x*this.x+this.y*this.y)}, 
enumerable:true, 

configurable:true 


}); 


这 段 代 人 码 从 一 个 空 对 象 开始 ， 然 后 给 它 添加 两 个 数据 属性 和 一 个 只 
读 存 取 器 属性 。 最 终 Object.definePropertiesO 返 回 修改 后 的 对 象 〈 和 
Object.definePropertyO 一 样 ) 。 


对 于 那些 不 允许 创建 或 修改 的 属性 来 次 ， 如 果 用 
Object.defineProperty() 和 Object.defineProperties() 对 其 操作 (新 建 或 修 
改 ) 区 会 抛 出 类 型 错误 异常 ， 比 如 ， 给 一 个 不 可 扩展 的 对 象 〈 人 参照 6.8.3 
节 ) 新 增 属性 克 会 抛 出 类 型 错误 异常 。 造 成 这 些 方法 抛 出 类 型 错误 异 第 
的 其 他 原因 则 和 特性 本 喘 相 关 。 可 写 性 控制 着 对 值 特性 的 修改 。 可 配置 
性 控制 着 对 其 他 特性 (包括 属性 是 否 可 以 删除 〉 的 修改 。 然 而 规则 远 不 
止 这 么 简单 ， 例 如 ， 如 果 属 性 是 可 配置 的 话 ， 则 可 以 修改 不 可 写 属性 的 
值 。 同 样 ， 如 果 属 性 是 不 可 配置 的 ， 仍 然 可 以 将 可 写 属性 修改 为 不 可 写 
属性 。 下 面 是 完整 的 规则 ， 任 何 对 Object.defineProperty0) 或 
Object.defineProperties() 违 有 反 规则 的 使 用 都 会 抛 出 类 型 错误 异常 : 


如果 对 象 是 不 可 扩展 的 ， 则 可 以 编辑 已 有 的 目 有 属性 ， 但 不 能 给 
它 添加 新 属性 。 


如果 属 性 是 不 可 配置 的 ， 则 不 能 修改 它 的 可 配置 性 和 可 枚 举 性 。 


:如 果 存 取 器 属性 是 不 可 配置 的 ， 则 不 能 修改 其 getter 和 setter 方 法 ， 
也 不 能 将 它 转换 为 数据 属性 。 


如果 数据 属性 是 不 可 配置 的 ， 则 不 能 


.如 果 数 据 属性 是 不 可 配置 的 ， 则 不 能 
true， 但 可 以 从 true 修 改 为 false。 


























它 转 换 为 存 取 器 属性 。 


蕊 的 可 写 性 从 false 修 改 为 





千 
将 





如果 数据 属性 是 不 可 配置 且 不 可 写 的 ， 则 不 能 修改 它 的 值 。 然 而 
可 配置 但 不 可 写 属性 的 值 是 可 以 修改 的 (实际 上 是 先 将 它 标记 为 可 写 
的 ， 然 后 修改 它 的 值 ， 最 后 转换 为 不 可 写 的 ) 。 


例 6-2 中 实现 了 extend() 阔 数 ， 这 个 浮 数 把 一 个 对 象 的 属性 复制 到 田 
一 个 对 象 中 。 这 个 函数 只 是 简单 地 复制 属性 名 和 值 ， 没 有 复制 属性 的 特 
性 ， 而 且 也 没有 复制 存 取 器 属性 的 getter 和 setter 方 法 ， 只 是 将 它们 简单 
地 转换 为 静态 的 数据 属性 。 例 6-3 给 出 了 改进 的 extend0， 它 使 用 
Object.getOwnPropertyDescriptor0 和 Object.definePropertyO 对 属性 的 所 有 
特性 进行 复制 。 新 的 extend0 作 为 不 可 枚 举 属性 添加 到 Object.prototype 
中 ， 因 此 它 是 Object 上 定义 的 新 方法 ， 而 不 是 一 个 独立 的 函数 。 


例 6-3: 复制 属性 的 特性 











A/* 

* 给 0bject .prototype 添 加 一 个 不 可 枚 举 的 extend ( ) 方 法 
* 这 个 方法 继承 自 调用 它 的 对 象 ， 将 作为 参数 传 入 的 对 象 的 属性 一 一 复 秆 
* 除 了 值 之 外 ， 也 复制 属性 的 所 有 特性 ， 除 非 在 目标 对 象 中 存在 同名 的 属性 ， 
* 参 数 对 象 的 所 有 自 有 对 象 〈 包 括 不 可 枚 举 的 属性 ) 也 会 一 一 复制 。 
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*/ 
Object.defineProperty(Object.prototype, 
"extend", // 定 义 Object ,prototype.extend 

{ 


writable:true, 

enumerable:false, // 将 其 定义 为 不 可 枚 举 的 
configurable:true, 

value: function(0){// 值 就 是 这 个 函数 

// 得 到 所 有 的 自 有 属性 ， 包 括 不 可 枚 举 属性 

var names=0bject .getOwnPropertyNames(0);// 遍 历 它 们 
for(var i=0;i<names.length;i++){// 如 果 属 性 已 经 存在 ， 则 跳 过 
if(names[i]in this)continue;// 获 得 o 中 的 属性 的 描述 符 
var desc=0bject.getOwnPropertyDescriptor(o,names[i]);// 用 它 给 this 创 建 一 个 属性 
Object.defineProperty(this,names[i], desc); 

} 

} 

}); 


























































































































getter 和 setter 的 老式 API 


可 以 通过 6.6 节 描述 的 对 象 直 接 量 语法 给 新 对 象 定 义 存 取 占 属 性 ， 
但 不 能 查询 属性 的 getter 和 setter 方 法 或 给 已 有 的 对 象 添加 新 的 存 取 器 属 
性 。 在 ECMAScript 5 中 ， 可 以 通过 Object.getOwnPropertyDescriptor() 和 
Object.defineProperty() 来 完成 这 些 工作 。 








在 ECMAScript 5 标准 被 采纳 之 前 ， 大 多 数 JavaScript 的 实现 IE 浏览 
器 除外 ) 已 经 可 以 支持 对 象 直 接 量 语法 中 的 get 和 set 写 法 。 这 些 实现 提 
供 了 非 标 准 的 老式 API 用 来 查询 和 设置 getter 和 setter。 这 些 API 由 4 个 方法 
组 成 ， 所 We _ lookupGetter _0 和 

_ lookupSetter _0) 用 以 返回 一 了 个 命名 属性 的 getter 和 setter 方 法 。 

_ defineGetter (0 和 ee _ 0 用 以 定义 getter 和 setter， 这 两 个 函 
数 的 第 一 个 参数 是 属性 名 字 ， 第 二 个 参数 是 getter 和 setter 方 法 。 这 4 个 方 
法 都 是 以 两 条 下 划 线 作 前 级 ， 两 条 1 它们 是 非 标准 
的 方法 。 本 书 第 三 部 分 没有 对 非 标 准 的 方法 做 介 


6.8 ”对象 的 三 个 属性 


每 一 个 对 象 都 有 与 之 相关 的 原型 (prototype) 、 类 〈class) 和 可 扩 
展 性 (extensible _ attribute) 。 下 面 几 节 将 会 展开 讲述 :这 些 属 性 有 什么 作 
用 ， 以 及 如 何 查 询 和 设置 它们 。 


6.8.1 原型 属性 


对 象 的 原型 属性 是 用 来 继承 属性 的 (关于 原型 和 原型 继承 的 更 多 内 
容 请 参照 6.1.3 节 和 6.2.2 节 ) ， 这 个 属性 如 此 重要 ， 以 至 于 我 们 经 党 把 “o 
的 原型 属性 ”直接 叫做 ‘0 的 原型 ”。 


原型 属性 是 在 实例 对 象 创建 之 初 就 设置 好 的 ， 回 想 一 下 6.1.3 厄 提 到 
的 ， 通 过 对 象 直接 量 创建 的 对 象 使 用 Object. prototype 作 为 它们 的 原 
通过 new 创 建 的 对 象 使 用 构造 函数 的 prototype 属 性 作为 它们 的 原型 。 
.Create(O) 创 建 的 对 象 使 用 第 一 个 参数 〈 也 可 以 是 null) 作为 | 

J 原型 。 


在 ECMAScript 5 中 ， 将 对 象 作 为 参数 传 入 Object.getPrototypeOf() 可 
以 查询 它 的 原型 。 在 ECMAScript 3 中 ， 则 没有 与 之 等 价 的 函数 ， 但 经 常 
使 用 表达 式 o.constructor.prototype 来 检测 一 个 对 象 的 原型 。 通 过 new 表 达 
式 创建 的 对 象 ， 通 常 继承 一 个 constructor 属 性 ， 这 个 属性 指 代 创建 这 个 
对 象 的 构造 函数 。 更 多 细节 将 会 放 在 9.2 节 进一步 讨论 ，9.2 节 还 解释 了 
使 用 这 种 方法 来 检测 对 象 原型 的 方式 并 不 可 靠 的 原因 。 注 意 ， 通 过 对 象 
直接 量 或 Object.create() 创 建 的 对 象 包含 一 个 名 为 constructor 的 属性 ， 这 
个 属 a hs 因此 ，constructor.prototype 才 是 对 象 直接 
量 的 真正 的 原型 ， 但 对 于 通过 Object.createO 创 建 的 对 象 则 往往 不 是 这 




















样 。 


要 想 检 测 一 个 对 象 是 否 是 另 一 个 对 象 的 原型 〈 或 处 于 原型 链 中 ) ， 
请 使 用 isPrototypeOfO 方 法 。 例 如 ， 可 以 通过 p.isPrototypeOf(o) 来 检测 
是 否 是 o 的 原型 : 











var p={x:1};// 定 义 一 个 原型 对 象 

var 0=0bject.create(p);// 使 用 这 个 原型 创建 一 个 对 象 
p.isPrototypeof(o)//=>true:o 继 承 自 p 
Object.prototype.isPrototypeof(o)//=>true:p 继 承 自 Object.prototype 























需要 注意 的 是 ，isPrototypeOfO 函 数 实现 的 功能 和 instanceof 运 算 符 
非常 类 似 〈 人 参照 4.9.4 节 ) 。 


Mozilla 实 现 的 JavaScript 〈 包 括 早 些 年 的 Netscape) 对 外 又 露 了 一 个 
专门 命名 为 ”proto “的 属性 ， 用 以 直接 查询 /设置 对 象 的 原型 。 但 并 不 
推荐 使 用 _proto _， 因 为 尽管 Safari 和 Chrome 的 当前 版 本 都 支持 它 ， 但 
IE 和 Opera 还 未 实现 它 《〈 可 能 以 后 也 不 会 实现 ) 。 实 现 了 ECMAScript 5 
的 Firefox 版 本 依然 支持 proto、， 但 对 修改 不 可 扩展 对 象 的 原型 做 了 限 
| 。 


6.8.2 ”类 属性 


对 象 的 类 属性 (class attribute) 是 一 个 字符 串 ， 用 以 表示 对 象 的 类 
型 信息 。ECMAScript 3 和 ECMAScript 5 都 未 提供 设置 这 个 属性 的 方法 ， 
并 只 有 一 种 间接 的 方法 可 以 查询 它 。 默 认 的 toString0) 方 法 (继承 自 
Object.prototype) 返回 了 如 下 这 种 格式 的 字符 串 : 














[object class] 





因此 ， 要 想 获得 对 象 的 类 ， 可 以 调用 对 象 的 toString0) 方 法 ， 然 后 提 
取 已 返回 字符 串 的 第 8 个 到 倒数 第 二 个 位 置 之 间 的 字符 。 不 过 让 人 感觉 
划 手 的 是 ， 很 多 对 象 继承 的 toString(0) 方 法 重 写 了 ， 为 了 能 调用 正确 的 
toStringO 上 版本， 必须 间接 地 调用 Function.call0) 方 法 《参照 8.7.3 节 ) 。 例 
6-4 中 的 classofO 函 数 可 以 返回 传递 给 它 的 任意 对 象 的 类 : 


例 6-4: classofO 函 数 





function classof(o){ 

if(o0o===null)return"Null"; 
if(o===undefined)return"Undefined"; 

return Object.prototype.toString.call(o).slice(8, -1); 
} 





classof() 函 数 可 以 传 入 任何 类 型 的 参数 。 数 字 、 字 符 串 和 布尔 值 可 
以 直接 调用 toString() 方 法 ， 就 和 对 象 调 用 toString(0 方 法 一 样 Q04， 并 且 这 
个 函数 包含 了 对 nul 和 undefined 的 特殊 处 理 〈 在 ECMAScript 5 中 不 需要 
对 这 些 特殊 情况 做 处 理 ) 。 通 过 内 置 构造 函数 〈 比 如 Array 和 Date) 创 
建 的 对 象 包含 “类 属性 ”(class _ attribute) ， 它 与 构造 函数 名 称 相 匹配 。 
答 主 对 象 也 包含 有 意义 的 “类 属性 ”， 但 这 和 具体 的 JavaScript 实 现 有 关 。 
通过 对 象 直接 量 和 Object.create 创 建 的 对 象 的 类 属性 是 "Object"， 那 些 自 
定义 构造 函数 创建 的 对 象 也 是 一 样 ， 类 属性 也 是 "Object"， 因 此 对 于 自 
定义 的 类 来 说 ， 没 办 法 通过 类 属性 来 区 分 对 象 的 类 : 





classof (nyull)//=>"Null" 
classof(1)//=>"Number" 
classof("")//=>"String" 
classof(false)//=>"Boolean" 
classof({})//=>>"0Object" 
classof([])//=>>"Array" 
classof(/./)//=>>"Regexp" 
classof(new Date())//=>"Date" 
classof(window)//=>>"Window" (这 是 客户 端 宿主 对 象 ) 
function f(){};// 定 义 一 个 自 定义 构造 函数 
classof(new f());//=>"0bject" 








6.8.3 ”可 扩展 性 


对 象 的 可 扩展 性 用 以 表示 是 否 可 以 给 对 象 添 加 新 属性 。 所 有 内 置 对 
象 和 和 自 定 义 对 象 都 是 显 式 可 扩展 的 ， 笨 主 对 象 的 可 扩展 性 是 由 JavaScript 
引擎 定义 的 。 在 ECMAScript 5 中 ， 所 有 的 内 置 对 象 和 目 定 义 对 象 都 是 可 
扩展 的 ， 除 非 将 它们 转换 为 不 可 扩展 的 ， 同 样 ， 宿 主 对 象 的 可 扩展 性 也 
是 由 实现 ECMAScript 5 的 JavaScript 引 警 定 义 的 。 


ECMAScript 5 定义 了 用 来 查询 和 设置 对 象 可 扩展 性 的 函数 。 通 过 将 
对 象 传 入 Object.esE xtensible0， 来 判断 该 对 象 是 否 是 可 扩展 的 。 如 果 想 
将 对 象 转换 为 不 可 扩展 的 ， 需 要 调用 Object.preventExtensions()， 将 待 转 
换 的 对 象 作 为 参数 传 进去 。 注 意 ， 一 旦 将 对 象 转换 为 不 可 扩展 的 ， 就 无 
法 再 将 其 转换 回 可 扩展 的 了 。 同 样 需 要 注意 的 是 ，preventExtensions() 只 
影响 到 对 象 本 号 的 可 扩展 性 。 如 果 给 一 个 不 可 扩展 的 对 象 的 原型 添加 属 

















性 ， 这 个 不 可 扩展 的 对 象 同样 会 继承 这 些 新 属性 。 


可 扩展 属性 的 目的 是 将 对 象 “ 锁 定 ”"， 以 避免 外 界 的 干扰 。 对 象 的 可 
扩展 性 通常 和 属性 的 可 配 值 性 与 可 写 性 配合 使 用 ，ECMAScript 5 定义 的 
一 些 函 数 可 以 更 方便 地 设置 多 种 属性 。 


Object.seal0 和 Object.preventExtensions(0) 类 似 ， 除 了 能 够 将 对 象 设 置 
为 不 可 扩展 的 ， 还 可 以 将 对 象 的 所 有 目 有 属性 都 设置 为 不 可 配置 的 。 也 
就 是 说 ， 不 能 给 这 个 对 象 添加 新 属性 ， 而 且 它 已 有 的 属性 也 不 能 删除 或 
配置 ， 不 过 它 已 有 的 可 写 属 性 依然 可 以 设置 。 对 于 那些 已 经 封闭 
(sealed〉 起 来 的 对 象 是 不 能 解 封 的 。 可 以 使 用 Object.isSealed0 来 检测 
对 象 是 否 封闭 。 


Object.freeze() 将 更 严格 地 锁定 对 象 “ 江 结 ”(frozen) 。 除 了 将 
对 象 设置 为 不 可 扩展 的 和 将 其 属性 设置 为 不 可 配置 的 之 外 ， 还 可 以 将 它 
自 有 的 所 有 数据 属性 设置 为 只 读 〈 如 果 对 象 的 存 取 器 属性 具有 setter 方 
法 ， 存 取 器 属性 将 不 受 影响 ， 仍 可 以 通过 给 属性 赋值 调用 它们 )〉 。 使 用 
Object.isFrozen() 来 检测 对 象 是 否 冻 结 。 














Object.preventExtensions()、Object.seal() 和 Object.freeze() 都 返回 传 入 
的 对 象 ， 也 就 是 说 ， 可 以 通过 函数 舱 套 的 方式 调用 它们 : 








// 创 建 一 个 封闭 对 象 ， 包 括 一 个 冻结 的 原型 和 一 个 不 可 枚 举 的 属性 
Var o=0bject.seal(Object.create(Object.freeze({x:1}), 
{y:{value:2,writable:true}})); 


6.9 ”序列 化 对 象 


对 象 序 列 化 (serialization〉 是 指 将 对 象 的 状态 转换 为 字符 串 ， 也 可 
将 字符 串 还 原 为 对 象 。 ECMAScript 5 提供 了 内 置 函 数 JSON.stringify() 和 
JSON.parse0) 用 来 序列 化 和 还 原 JavaScript 对 象 。 这 些 方法 都 使 用 JSON 作 
为 数据 交换 格式 ，JSON 的 全 称 是 "JavaScript Object Notation" 
J 2 象 表 示 法 ， 它 的 语法 和 JavaScript 对 象 与 数组 直接 量 的 语法 
非常 相近 : 











0={x:1,y:{z:[false,null,""]}};// 定 义 一 个 测试 对 象 
s=JSON, stringify(0);//s 是 '{"x":1,"y":{"z":[false,null,""]}}' 
p=JSON .parse(s);//p 是 0 的 深 堵 贝 





ECMAScript 5 中 的 这 些 函 数 的 本 地 实现 和 http://json.org/json2.js 中 的 
公共 域 ECMAScript 3 版 本 的 实现 非常 类 似 ， 或 者 说 完全 一 样 ， 因 此 可 以 
通过 引入 json2.js 模 块 在 ECMAScript 3 的 环境 中 使 用 ECMAScript 5 中 的 这 
些 函 数 。 


JSON 的 语法 是 JavaScript 语 法 的 子 集 ， 它 并 不 能 表示 JavaScript 里 的 
所 有 值 。 文 持 对 象 、 数 组 、 字 符 串 、 无 穷 大 数字 、true、false 和 null， 并 
且 它 们 可 以 序列 化 和 还 原 。NaN、Infinity 和 -Infinity 序 列 化 的 结果 是 
null， 日 期 对 象 序列 化 的 结果 是 ISO 格 式 的 日 期 字符 串 (参照 
Date.toJSON() 函 数 ) ， 但 JSON.parse0O 依 然 保留 它们 的 字符 串 形态 ， 而 
不 会 将 它们 还 原 为 原始 日 期 对 象 。 函 数 、RegExp、Error 对 象 和 
undefined 值 不 能 序列 化 和 还 原 。JSON.stringifyO 只 能 序列 化 对 象 可 枚 举 
的 目 有 属性 。 对 于 一 个 不 能 序列 化 的 属性 来 说 ， 在 序列 化 后 的 输出 字符 
串 中 会 将 这 个 属性 省 略 掉 。JSON.stringify0 和 JSON.parseO 都 可 以 接收 第 
二 个 可 选 参数 ， 通 过 传 入 需要 序列 化 或 还 原 的 属性 列表 来 定制 自 定义 的 
序列 化 或 还 原 操 作 。 第 三 部 分 有 关于 这 些 函 数 的 详细 文档 。 


6.10 ”对 象 方法 


上 文 已 经 讨论 过 ， 所 有 的 JavaScript 对 象 都 从 Object.prototype 继 承 属 
性 《除了 那些 不 通过 原型 显 式 创建 的 对 象 ) 。 这 些 继承 属性 主要 是 方 
法 ， 因 为 JavaScript 程 序 员 普 遇 对 继承 方法 更 感 兴趣 。 我 们 已 经 讨论 过 
hasOwnProperty()、propertyIsEnumerable() 和 isPrototypeOf() 这 三 个 方 
法 ， 以 及 在 Object 构造 函数 里 定义 的 静态 函数 Object.create0 和 
Object.getPrototypeOfO 等 。 本 节 将 对 定义 在 Object.prototype 里 的 对 象 方 
法 展开 讲解 ， 这 些 方法 非常 好 用 而 且 使 用 广泛 ， 但 一 些 特定 的 类 会 重 写 
这 是 二 























6.10.1 toString0 方 法 


toString() 方 法 没有 参数 ， 它 将 返回 一 个 表示 调用 这 个 方法 的 对 象 值 
的 字符 串 。 在 需要 将 对 象 转换 为 字符 串 的 时 候 ，JavaScript 都 会 调用 这 个 
方法 。 比 如 ， 当 使 用 “+” 运 算 符 连 接 一 个 字符 串 和 一 个 对 象 时 或 者 在 希 
望 使 用 字符 串 的 方法 中 使 用 了 对 象 时 都 会 调用 toString()。 


默认 的 toString(0 方 法 的 返回 值 带 有 的 信息 量 很 少 《 尽 管 它 在 检测 对 
象 的 类 型 时 非常 有 用 ， 参 照 6.8.2 节 ) ， 人 例如， 下面 这 行 代码 的 计算 结果 




















为 字符 串 "[object Object]": 





Var s={x:1,y:1}.tostring(); 





由 于 默认 的 toString(0 方 法 并 不 会 输出 很 多 有 用 的 信息 ， 因 此 很 多 类 
都 带 有 上 自 定义 的 toString()。 例 如 ， 当 数组 转换 为 字符 串 的 时 候 ， 结 果 是 
一 个 数组 元 素 列 表 ， 只 是 每 个 元 素 都 转换 成 了 字符 串 ， 再 比如 ， 当 函数 
转换 为 字符 串 的 时 候 ， 得 到 函数 的 源 代码 。 第 三 部 分 有 关于 toString() 的 
详细 文档 说 明 ， 比 如 Array.toStringO0、Date.toStringO 以 及 


Function.toString()。 





9.6.3 节 介绍 如 何 给 上 自 定 义 类 重 写 toString() 方 法 。 
6.10.2 ”toLocaleString() 方 法 


除了 基本 的 toString0 方 法 之 外 ， 对 象 都 包含 toLocaleString() 方 法 ， 
这 个 方法 返回 一 个 表示 这 个 对 象 的 本 地 化 字符 串 。Object 中 默认 的 
toLocaleString(0) 方 法 并 不 做 任何 本 地 化 上 自身 的 操作 ， 它 仅 调用 toString0) 
方法 并 返回 对 应 值 。Date 和 Number 类 对 toLocaleString() 方 法 做 了 定制 ， 
可 以 用 它 对 数字 、 日 期 和 时 间 做 本 地 化 的 转换 。Array 类 的 
toLocaleString() 方 法 和 toString() 方 法 很 像 ， 唯 一 的 不 同 是 每 个 数组 元 素 
会 用 toLocaleString() 方 法 转换 为 字符 串 ， 而 不 是 调用 各 自 的 toString() 
Fa 


6.10.3”toJSON0O 方 法 





Object.prototype 实 际 上 没有 定义 toJSON0O 方 法 ， 但 对 于 需要 执行 序 
列 化 的 对 象 来 说 ，JSON .stringify() 方 法 会 调用 toJSON() 方 法 。 如 果 在 答 
序列 化 的 对 象 中 存在 这 个 方法 ， 则 调用 它 ， 返 回 值 即 是 序列 化 的 结果 ， 
而 不 是 原始 的 对 象 。 有 具体 示例 参见 Date.toJSON()。 


6.10.4 ”valueOf0 方 法 


valueOf(O 方 法 和 toString(0) 方 法 非常 类 似 ， 但 往往 当 JavaScript 需 要 将 
对 象 转换 为 某 种 原始 值 而 非 字 符 串 的 时 候 才 会 调用 它 ， 尤 其 是 转换 为 数 
字 的 时 候 。 如 果 在 需要 使 用 原始 值 的 上 下 文中 使 用 了 对 象 ，JavaScript 残 
会 自动 调用 这 个 方法 。 默 认 的 valueOfO 方 法 不 足 为 奇 ， 但 有 些 内 置 类 自 








定义 了 valueOfO 方 法 〈 比 如 Date.valueOfO ) ，9.6.3 节 讨论 如 何 给 自 定义 
对 象 类 型 定义 valueOf0 方 法 。 


[Lproperty 和 attribute 都 可 以 单独 理解 为 “属性 >， 在 这 里 property attribute 
是 一 个 词组 ， 意 思 是 “属性 的 特性 ”， 随 后 提 到 的 “可 写 ”“ 可 枚 举 ” 和 “可 
配置 ? 即 是 属性 的 三 种 特性 。 

D] 一 致 认为 Douglas Crockford 是 最 早 提出 用 这 种 方法 实现 对 象 继承 函数 
的 人 ， 参 照 : http://javascript.crockford.com/prototypal.html。 

[3] 强 类 型 ， 为 所 有 变量 指定 数据 类 型 称 为 * 强 类 型 ”。 强 / 弱 类 型 是 指 类 
型 检查 的 严格 程度 。 语 言 有 无 类 型 、 弱 类 型 和 强 类 型 三 种 。 无 类 型 的 不 
检查 ， 甚 至 不 区 分 指令 和 数据 。 弱 类 型 的 检查 很 弱 ， 仪 能 严格 地 区 分 指 
令 和 数据 。 强 类 型 的 则 严格 的 在 编译 期 间 进行 检查 。 

[4 这 里 的 意思 是 可 以 动态 地 给 对 象 添加 属性 。 严 格 讲 ，JavaScript 对 象 
的 属性 个 数 是 有 上 限 的 。 

[5]“ 程 序 不 能 修改 标识 符 ” 的 意思 是 说 ， 在 程序 运行 时 无 法 动态 指定 一 个 
标识 符 ， 当 然 eval 除 外 。 

[6]a={p:{x:1}}b=a.p;delete a.p; 执 行 这 段 代 人 码 之 后 b.x 的 值 依然 是 1。 由 于 
己 经 删除 的 属性 的 引用 依然 存在 ， 因 此 在 JavaScript 的 某 些 实现 中 ， 可 能 
因为 这 种 不 严谨 的 代码 而 造成 内 存 汇 漏 。 所 以 在 销毁 对 象 的 时 候 ， 要 通 
历 属 性 中 的 属性 ， 依 次 删除 。 

四 这 里 所 实现 的 extend0 逻 辑 虽然 正确 ， 但 并 不 能 弥补 正中 有 一 些 众 所 
周知 的 pug， 在 例 8-3 中 会 有 更 健壮 的 extend0 实 现 。 

[8] 包 括 除了 IE 之 外 的 最 新 主流 浏览 器 的 ECMAScript 3 的 实现 。 

[9] 篆 卡尔 坐标 系 就 是 直角 坐标 系 和 和 斜 角 坐标 系 的 统称 。 相 交 于 原点 的 两 
条 数 轴 ， 构 成 了 平面 放射 坐标 系 。 

[10] 实 际 上 是 这 些 类 型 的 变量 调用 toString(0) 方 法 ， 而 不 是 通过 它们 的 直 
接 量 调用 toString()， 比 如 1.toString0) 是 不 对 的 ， 而 是 要 先 声 明 变 量 var 
a=1; 然后 调用 a.toString()。 























第 7 半 ”数组 


数组 是 值 的 有 序 集合 。 每 个 值 叫 做 一 个 元 素 ， 而 每 个 元 素 在 数组 中 
有 一 个 位 置 ， 以 数字 表示 ， 称 为 索引 。JavaScript 数 组 是 无 类 型 的 : 数组 
元 素 可 以 是 任意 类 型 ， 并 且 同 一 个 数组 中 的 不 同 元 素 也 可 能 有 不 同 的 类 
型 。 数 组 的 元 素 甚至 也 可 能 是 对 象 或 其 他 数组 ， 这 人 允许 创建 复杂 的 数据 
结构 ， 如 对 象 的 数组 和 数组 的 数组 。JavaScript 数 组 的 索引 是 基于 零 的 32 
位 数值 : 第 一 个 元 素 的 索引 为 0， 最 大 可 能 的 索引 为 4 294 967 294 (232- 
2) ， 数 组 最 大 能 容纳 4 294 967 295 个 元 素 。JavaScript 数 组 是 动态 的 : 
根据 需要 它们 会 增长 或 缩减 ， 并 且 在 创建 数组 时 无 须 声明 一 个 固定 的 大 
小 或 者 在 数组 大 小 变化 时 无 须 重 新 分 配 空 间 。JavaScript 数 组 可 能 是 稀 玩 
的 : 数组 元 素 的 索引 不 一 定 要 连续 的 ， 它 们 之 间 可 以 有 空缺 。 每 个 
JavaScript 数 组 都 有 一 个 langth 属 性 。 针 对 非 稀疏 数组 ， 该 属性 就 是 数组 
元 素 的 个 数 。 针 对 稀疏 数组 ，length 比 所 有 元 素 的 索引 要 大 。 


JavaScript 数 组 是 JavaScript 对 象 的 特殊 形式 ， 数 组 索引 实际 上 和 大 
巧 是 整数 的 属性 名 差不多 。 我 们 将 在 本 章 的 其 他 地 方 更 多 地 讨论 特殊 化 
的 数组 。 通 常 ， 数 组 的 实现 是 经 过 优化 的 ， 用 数字 索引 来 访问 数组 元 素 
一 般 来 说 比 访问 常规 的 对 象 属性 要 快 很 多 。 


数组 继承 自 Array.prototype 中 的 属性 ， 它 定义 了 一 套 丰 富 的 数组 操 
作 方 法 ，7.8 节 和 7.9 节 涵盖 这 方面 内 容 。 大 多 数 这 些 方法 是 通用 的 ， 这 
意味 着 它们 不 仅 对 真正 的 数组 有 效 ， 而 且 对 “类 数组 对 象 ” 同 样 有 效 。 
7.11 节 讨论 类 数组 对 象 。 在 ECMAScript 5 中 ， 字 符 串 的 行为 与 字符 数组 
类 似 ， 我 们 将 在 7.12 节 讨论 。 


7.1 创建 数组 


使 用 数组 直接 量 是 创建 数组 最 简单 的 方法 ， 在 方 括 写 中 将 数组 元 系 
用 逗号 隔 开 即 可 。 例 如 : 



































var empty=[];// 没 有 元 素 的 数组 
var primes=[2,3,5,7,11];// 有 5 个 数值 的 数组 
var misc=[1.1,true, "a", ];//3 个 不 同类 型 的 元 素 和 结尾 共 
































pay 


逗号 














数组 直接 量 中 的 值 不 一 定 要 是 常量 ， 它 们 可 以 是 任意 的 表达 式 : 


Var base=1024 
var table=[base,base+1,base+2,base+3]; 








它 可 以 包含 对 象 直 接 量 或 其 他 数组 直接 量 : 





var b=[[1,{x:1,y:2}], [2, {x:3,y:4}]]; 








攻 如 果 省 略 数 组 直接 量 中 的 茶 个 值 ， 省 略 的 元 素 将 被 后 予 undefined 





var count=[1,，3];// 数 组 有 3 个 元 素 ， 中 间 的 那个 元 素 值 为 undefined 
var undefs=[,，,];// 数 组 有 2 个 元 素 ， 都 是 undefined 






































A 
一 广 。 


调用 构造 函数 Array0) 是 创建 数组 的 男 一 种 方法 。 可 以 用 三 种 方式 调 
用 构造 函数 。 


调用 时 没有 参数 : 





var a=new Array(); 





该 方法 创建 一 个 没有 任何 元 系 的 空 数 组 ， 等 同 于 数组 直接 量 []。 
调用 时 有 一 个 数值 参数 ， 它 指定 长 度 : 





var a=new Array(10); 





该 技术 创建 指定 长 度 的 数组 。 当 预先 知道 所 需 元 素 个 数 时 ， 这 种 形 
式 的 Array0 构 造 函 数 可 以 用 来 预 分 配 一 个 数组 空间 。 注 意 ， 数 组 中 没有 
存储 值 ， 甚 至 数组 的 索引 属性 “0”、“1” 等 还 未 定义 。 


` 显 式 指定 两 个 或 多 个 数组 元 素 或 者 数组 的 一 个 非 数 值 元 素 : 





var a=new Array(5,4,3,2,1,"testing,testing"); 


以 这 种 形式 ， 构 造 函 数 的 参数 将 会 成 为 新 数组 的 元 素 。 使 用 数组 字 
面 量 比 这 样 使 用 Array0 构 造 函 数 要 简单 多 了 。 


7.2 ”数组 元 系 的 读 和 写 


使 用 吕 操 作 符 来 访问 数组 中 的 一 个 元 素 。 数 组 的 引用 位 于 方 插 号 的 
左边 。 方 括号 中 是 一 个 返回 非 负 整数 值 的 任意 表达 式 。 使 用 该 语法 既 可 
以 读 又 可 以 写 数 组 的 一 个 元 素 。 因 此 ， 如 下 代码 都 是 合法 的 JavaScript 语 


句 : 


var a=["world"];// 从 一 个 元 素 的 数组 开始 

var value=a[0];// 读 第 0 个 元 素 
a[1]=3.14;// 写 第 1 个 元 素 

i=2，; 

a[i]=3;// 写 第 2 个 元 素 
a[i+1]="hello";// 写 第 3 个 元 素 
a[a[i]]=a[9];// 读 第 0 个 和 第 2 个 元 素 ， 写 第 3 个 元 素 














请 记 住 ， 数 组 是 对 象 的 特殊 形式 。 使 用 方 括号 访问 数组 元 素 就 像 用 
方 括号 访问 对 象 的 属性 一 样 。JavaScript 将 指定 的 数字 索引 值 转换 成 字符 
串 一 一 索引 值 1 变 成 41” 一 一 然后 将 其 作为 属性 名 来 使 用 。 关 于 索引 值 从 
数字 转换 为 字符 串 没 什么 特别 之 处 ， 对 第 规 对 象 也 可 以 这 么 做 : 





o= 倍 ;// 创 建 一 个 普通 的 对 象 
o[1]="one";// 用 一 个 整数 来 索引 它 





























数组 的 特别 之 处 在 于 ， 当 使 用 小 于 2 六 的 非 负 整数 作为 属性 名 时 数 
组 会 自动 维护 其 lengh 属 性 值 。 如 上 ， 创 建 仅 有 一 个 元 素 的 数组 。 然 后 
ee 


a.length//=>4 





清晰 地 区 分 数组 的 索引 和 对 象 的 属性 名 是 非 第 有 用 的 。 所 有 的 索引 
都 是 属性 名 ,但 只 有 在 0~~2*%-2 之 间 的 整数 属性 名 才 是 索引 。 所 有 的 数 
组 都 是 对 象 ， 可 以 为 其 创建 任意 名 字 的 属性 。 但 如 果 使 用 的 属性 是 数组 














的 索引 ， 数 组 的 特殊 行为 就 是 将 根据 需要 更 新 它们 的 length 属 性 值 。 


注意 ， 可 以 使 用 负数 或 非 整数 来 索引 数组 。 这 种 情况 下 ， 数 值 转换 
为 字符 捉 ， 字 符 串 作为 属性 名 来 用 。 既 然 名 字 不 是 非 负 整 数 ， 它 就 只 能 
当做 第 规 的 对 象 属性 ， 而 非 数组 的 索引 。 同 样 ， 如 果 凑 巧 使 用 了 是 非 负 
整数 的 字符 串 ， 它 就 当做 数组 索引 ， 而 非 对 象 属性 。 当 使 用 的 一 个 浮 扣 
数 和 一 个 整数 相等 时 情况 也 是 一 样 的 : 








a[-1.23]=true;// 这 将 创建 一 个 名 为 "-1.,23" 的 属性 
a["1000"]=0;// 这 是 数组 的 第 1001 个 元 素 
a[1.009]// 和 a[1] 相 等 




















事实 上 数组 索引 仪 仅 是 对 象 属性 名 的 一 种 特殊 类 型 ， 这 意味 着 
JavaScript 数 组 没有 “越界 ?错误 的 概念 。 当 试图 查询 任何 对 象 中 不 存在 的 
属性 时 ， 不 会 报错 ， 只 会 得 到 undefined 值 。 类 似 于 对 象 ， 对 于 对 象 同样 
存在 这 种 情况 。 


既然 数组 是 对 象 ， 那 么 它们 可 以 从 原型 中 继承 元 素 。 在 
ECMAScript 5 中 ， 数 组 可 以 定义 元 素 的 getter 和 setter 方 法 〈 见 6.6 节 ) 。 
如 果 一 个 数组 确实 继承 了 元 素 或 使 用 了 元 素 的 getter 和 setter 方 法 ， 你 应 
该 期 望 它 使 用 非 优化 的 代码 路 径 : 访问 这 种 数组 的 元 素 的 时 间 会 与 常规 
对 象 属性 的 查找 时 间 相 近 。 


7.3 ”稀疏 数组 


黎 琉 数组 就 是 包含 从 0 开始 的 不 连续 索引 的 数组 。 通 单 ， 数 组 的 
length 属 性 值 代表 数组 中 元 素 的 个 数 。 如 果 数 组 是 稀 琉 的 ，length 属 性 值 
大 于 元 又 的 个 数 。 可 以 用 Array0 构 造 函 数 或 简单 地 指定 数组 的 索引 值 大 
于 当前 的 数组 长 度 来 创建 稀 玖 数组 。 























a=new Array(5);// 数 组 没有 元 素 ， 但 是 a.1length 是 5 
a=[];// 创 建 一 个 空 数组 ，length=0 
a[1000]=9;// 赋 值 添加 一 个 元 素 ， 但 是 设置 1ength 为 1001 

















后 面 会 看 到 你 也 可 以 用 delete 操 作 符 来 生产 稀 玻 数组 。 


足够 稀 玻 的 数组 通 第 在 实现 上 比 稠密 的 数组 更 慢 、 内 存 利用 率 更 
高 ， 在 这 样 的 数组 中 碍 找 元 素 的 时 间 与 常规 对 象 属性 的 碍 找 时 间 一 样 





发， 


注意 ， 当 在 数组 直接 量 中 省 略 值 时 不 会 创建 稀 朴 数组 。 省 略 的 元 素 
在 数组 中 是 存在 的 ， 其 值 为 undefined。 这 和 数组 元 素 根本 不 存在 是 有 一 
些微 妙 的 区 别 的 。 可 以 用 in 操 作 符 检测 两 者 之 间 的 区 别 : 

















var al=[,,，,];// 数 组 是 [undefined,undefined,undefined] 
var a2=new Array(3);// 该 数组 根本 没有 元 素 

0 in al//=>true:al 在 索引 0 处 有 一 个 元 素 

0 in a2//=>false:a2 在 索引 9 处 没有 元 素 



































当 使 用 fovin 循 环 时 ，al1 和 a2 之 间 的 区 别 也 很 明显 〈 见 7.6 节 ) 。 


再 要 注意 的 是 ， 当 省 略 数 组 直接 量 中 的 值 时 《使 用 连续 的 运 号 ， 上 
如 [1,,3]〉， 这 时 所 得 到 的 数组 也 是 稀 琉 数组 ， 名 咯 坟 的 信息 不 在 在 的 

















var a1l=[, ];// 此 数组 没有 元 素 ， 长 度 是 1 

var a2=[undefined]; ee 
0 in al//=>false: al 在 索 弛 引 0 处 没 
0 in a2//=>true:a2 在 索引 9 处 个 们 为 undefined 的 元 家 












































在 一 些 旧 版 本 的 实现 中 (比如 Firefox 3) ， 在 存在 连续 逗号 的 情况 
下 ， 揪 入 undefined 值 的 操作 则 与 此 不 同 ， 在 这 些 实现 中 ， [1,,3] 和 和 
[1,undefined,3] 是 一 模 一 样 的 。 


了 解 稀 下 数 组 是 了 解 JavaScript 数 组 的 真实 本 质 的 一 部 分 。 尺 管 如 
此 ， 实 际 上 你 所 磁 到 的 绝 大 多 数 JavaScript 数 组 不 是 稀 朴 数组 。 并 且 ， 如 
朱 你 确实 三 到 了 稀 焉 数组 ， 你 的 代码 很 可 能 像 对 竺 非 稀 玻 数组 一 样 来 对 
竺 它们 ， 只 不 过 它们 包含 一 些 undefined 值 。 


7 了 数组 长 度 
每 个 数组 有 一 个 length 属 性 ， 就 是 这 个 属性 使 其 区 别 于 常规 的 


JavaScript 对 象 。 针 对 稠密 《也 就 是 非 稀疏 ) 数组 ，length 属 性 值 代表 数 
组 中 元 素 的 个 数 。 其 值 比 数组 中 最 大 的 索引 大 1: 











[] . CU >0: 数 组 没有 元 素 
['a'，'b'，'c'],length//=>3: 最 大 的 索引 为 2，length 为 3 

















当 数 组 是 黎 琉 的 时 ，lengtb 属 性 值 大 于 元 素 的 个 数 。 而 且 关 于 此 我 
们 可 以 说 的 一 切 也 就 是 数组 长 度 保证 大 于 它 每 个 元 系 的 索引 值 。 或 者 ， 
换 一 种 说 法 ， 在 数组 中 《无 论 稀 芷 与 否 ) 肯定 找 不 到 一 个 元 系 的 索引 值 
大 于 或 等 于 它 的 长 度 。 为 了 维持 此 规则 不 变化 ， 数 组 有 两 个 特殊 的 行 
为 。 第 一 个 如 同上 面 的 描述 : 如 果 为 一 个 数组 元 素 赋 值 ， 它 的 索引 i 大 
于 或 等 于 现 有 数组 的 长 度 时 ，length 属 性 的 值 将 设置 为 i+1。 


第 二 个 特殊 的 行为 就 是 设置 length 属 性 为 一 个 小 于 当前 长 度 的 非 负 
整数 n 时 ， 当 前 数组 中 那些 索引 值 大 于 或 等 于 n 的 元 素 将 从 中 删除 : 

















a=[1,2,3,4,5];// 从 5 个 元 素 的 数组 开 妇 
a.length=3;// 现 在 a 为 [1,2,3] 
a.length=0;// 删 除 所 有 的 元 素 。a 为 [] 
a.length=5;// 长 度 为 5， 但 是 没有 元 素 ， 就 像 new Array(5) 


Bain 















































还 可 以 将 数组 的 langth 属 性 值 设置 为 大 于 其 当前 的 长 度 。 实 际 上 这 
不 会 癌 数 组 中 添加 新 的 元 隶 ， 它 只 是 在 数组 尾部 创建 一 个 空 的 区 域 。 


在 ECMAScript 5 中 ， 可 以 用 Object.defineProperty() 让 数组 的 length 属 
性 变 成 只 读 的 〈 见 6.7 节 ) : 





a=[1, 2,3] ;// 从 3 个 元 素 的 数组 开始 
Object.defineProperty(a,"length", {writable:false});// 让 length 属 性 只 读 
a.length=0;//a 不 会 改变 














类 似 地 ， 如 果 让 一 个 数组 元 素 不 能 配置 ， 束 不 能 删除 它 。 如 果 不 能 
删除 它 ，lengb 属 性 不 能 设置 为 小 于 不 可 配置 元 素 的 索引 值 。〈 见 6.7 节 
和 6.8.3 节 的 Object.seal0 和 Object.freeze(0) 方 法 。) 


7.5 ”数组 元 素 的 添加 和 删除 
我 们 已 经 见 过 添加 数组 元 素 最 简单 的 方法 : 为 新 索引 赋值 











a=[]// 开 始 是 一 个 空 数 组 
a[90]="zero";// 然 后 向 其 中 添加 元 素 


a[1]="one"; 





也 可 以 使 用 push() 方 法 在 数组 末尾 增加 一 个 或 多 个 元 素 : 








a=[] ;// 开 始 是 一 个 空 数组 
a.push("zero")// 在 末尾 添加 一 个 元 素 。a=["zero"] 
a.push("one", "two")// 再 添加 两 个 元 素 。a=["zero", "one", "two"] 


























在 数组 尾部 压 入 一 个 元 素 与 给 数组 af[a.length] 赋 值 是 一 样 的 。 可 以 
使 用 unshift0 方 法 (在 7.8 节 有 描述 〉 在 数组 的 首部 插入 一 个 元 素 ， 并 且 
将 其 他 元 素 依 次 移 到 更 高 的 索引 处 。 


可 以 像 删 除 对 象 属 性 一 样 使 用 delete 运 算 符 来 删除 数组 元 系 : 








a=[1,2,3]; 
delete a[1];//a 在 索引 1 的 位 置 不 再 有 元 素 
1 in a//=>false: 数 组 索引 1 并 未 在 数组 












































数组 中 定义 
a.lIength//=>3:delete 操 作 并 不 影响 数组 长 度 




















删除 数组 元 素 与 为 其 赋 undefined 值 是 类 似 的 (但 有 一 些微 妙 的 区 
别 ) 。 注 意 ， 对 一 个 数组 元 素 使 用 delete 不 会 修改 数组 的 length 属 性 ， 也 
不 会 将 元 素 从 高 索引 处 移 下 来 填充 已 删除 属性 留 下 的 空白 。 如 宁 从 数组 
中 删除 一 个 元 系 ， 它 就 变 成 稀 玻 数组。 


上 面 我 们 看 到 ， 也 可 以 简单 地 设置 length 属 性 为 一 个 新 的 期 望 长 度 
来 删除 数组 尾部 的 元 系 。 数 组 有 pop(0 方 法 〈 它 和 push0 一 起 使 用 ) ， 后 
者 一 次 使 减少 长 度 1 并 返回 被 删除 元 素 的 值 。 还 有 一 个 shift(0 方 法 〈 它 和 
unshiftO 一 起 使 用 ) ， 从 数组 头 部 删除 一 个 元 素 。 和 delete 不 同 的 是 
shift() 方 法 将 所 有 元 素 下 移 到 比 当 前 索引 低 1 的 地 方 。7.8 节 和 第 三 部 分 涵 
盖 popO0 和 shiftO 的 内 容 。 


最 后 ，splice() 是 一 个 通用 的 方法 来 插入 、 删 除 或 蔡 换 数组 元 素 。 它 


会 根据 需要 修改 length 属 性 并 移动 元 素 到 更 高 或 较 低 的 索引 处 。 详 细 内 
容 见 7.8 节 。 


7.6 ”数组 过 历 
使 用 for 循 环 《〈 见 5.5.3 节 ) 是 授 历数 组 元 素 最 常见 的 方法 : 

















ls 


var keys=0bject.keys(0);// 获 得 oO 对象 属性 名 组 成 的 数组 
var values=[]// 在 数组 中 存储 匹配 属性 的 值 























for(var i=0;i<keys.length;i++){// 对 于 数组 中 每 个 索引 
var key=keys[i];// 获 得 索引 处 的 键 值 
values[i]=o[key];// 在 values 数 组 中 保存 属性 值 

















在 租 套 循环 或 其 他 性 能 非常 重要 的 上 下 文中 ， 可 以 看 到 这 种 基本 的 
数组 所 历 需 要 优化 ， 数 组 的 长 度 应 该 只 查询 一 次 而 非 每 次 循环 者 要 查 


询 : 





for(var i=0,len=keys.length;i<len;i++){// 循 环 体 仍然 不 变 
} 








这 些 例 子 假设 数组 是 稠密 的 ， 并 且 所 有 的 元 素 都 是 合法 数据 。 否 
则 ， 使 用 数组 元 素 之 前 应 该 先 检测 它们 。 如 果 想 要 排除 null、undefined 
和 不 存在 的 元 素 ， 代 码 如 下 : 





for(var i=0;i<~a.length;i++) 
if(1a[i])continue;// 跳 过 null1、undefined 和 不 存在 的 元 素 
// 循 环 体 

} 








如 果 只 想 跳 过 undefined 和 不 存 的 元 素 ， 代 码 如 下 : 





for(var i=0;i<a.length;i++){ 
if(a[i]===undefined)continue;// 跳 过 undefined+ 不 存在 的 元 素 
// 循 环 体 

} 











最 后 ， 如 果 只 想 跳 过 不 存在 的 元 素 而 仍然 要 处 理 存在 的 undefined 元 
素 ， 代 码 如 下 : 





for(var i=0;i<a.length;i++){ 

if(!(i in a))continue;// 跳 过 不 存在 的 元 素 
// 循 环 体 

} 








还 可 以 使 用 for/i mn 循 环 〈 见 5.5.4 节 ) 处 理 稀疏 数组 。 循 环 每 次 将 一 
外 
\ 会 ; 万 到 |: 





for(var index in sparseArray)t{ 
var value=sparseArray[index];// 此 处 可 以 使 用 索引 和 值 做 一 些 事 情 








} 





在 6.5 节 已 经 注意 到 for/in 循 环 能 够 枚 举 继承 的 属性 名 ， 如 添加 到 
Array.prototype 中 的 方法 。 由 于 这 个 原因 ， 在 数组 上 不 应 该 使 用 fovin 循 
环 ， 除 非 使 用 额外 的 检测 方法 来 过 滤 不 想 要 的 属性 。 如 下 检测 代码 取 其 
一 即 可 : 





for(var i in a 
if(!1a.hasOownProperty(i))continue;// 跳 过 继承 的 属性 
// 循 环 体 


下 
达 








} 

for(var i in a){// 跳 过 不 是 非 负 整数 的 i 
if(String(Math.floor(Math.abs(Number(i1i))))!==i)continue; 
} 








ECMAScript 规 范 允 许 for/in 循 环 以 不 同 的 顺序 过 历 对 象 的 属性 。 通 
常数 组 元 素 的 遍历 实现 是 升序 的 ， 但 不 能 保证 一 定 是 这 样 的 。 特 别 地 ， 
如 果 数 组 同时 拥有 对 象 属性 和 数组 元 素 ， 返 回 的 属性 名 很 可 能 是 按照 创 
建 的 顺序 而 非 数 值 的 大 小 顺序 。 如 何 处 理 这 个 问题 页 的 实现 各 不 相同 ， 如 
ee 裔 历 的 顺序 ， 那 么 最 好 不 要 使 用 for/in 而 用 常规 的 for 循 





ECMAScript 5 定义 了 一 些 裔 历数 组 元 素 的 新 方法 ， 按 照 索 引 的 顺序 
按 个 传递 给 定义 的 一 个 函数 。 这 些 方法 中 最 常用 的 束 是 forEach() 方 法 : 








var data=[1,2,3,4,5]; 0 
var SumofSquares=0; // 要 得 到 数据 的 平方 
data. forEach(funct ion(x)f7/ 把 得 个 元 素 传道 给 此 
sumofSdquares+=Xxx*X;V/ 平 方 相 加 











}); 
sumOofSquares//=>55:1+4+9+16+25 





forEachO 和 相关 的 过 历 方法 使 得 数组 拥有 简单 而 强大 的 函数 式 编 程 
风格 。 它 们 涵盖 在 7.9 节 中 ， 当 涉及 函数 式 编程 时 ， 还 将 在 8.8 贡 再 次 全 
到 它们 。 


7.7 多 维 数 组 


JavaScript 不 文 持 真正 的 多 维 数组 ， 但 可 以 用 数组 的 数组 来 近似 。 访 
问 数组 的 数组 中 的 元 素 ， 只 要 简单 地 使 用 两 次 [操作 符 即 可 。 例 如 ， 假 





设 变量 matrix 是 一 个 数组 的 数组 ， 它 的 基本 元 素 是 数值 ， 那 么 matrix[x] 
的 每 个 元 素 是 包含 一 个 数值 数组 ， 访 问 数组 中 特定 数值 的 代码 为 
0 这 里 有 一 个 具体 的 例子 ， 它 使 用 二 维 数组 作为 一 个 九 九 乘 
法 表 : 








// 创 建 一 个 多 维 数组 

var table=new Array(10) ;// 表 格 有 10 行 
for(var i=0;i<table.length;i++) 
table[i]=new Array(10);// 每 行 有 10 列 
// 初 始 化 数组 

for(var row=0;row<=table.length;row++){ 
for(col=0;col<table[row].length;col++)t{ 
table[row][col]=row*col; 









































} 
// 使 用 多 维 数组 来 计算 (查询 )5*7 
var product=table[5][7];//35 























7.8 数组 方法 


ECMAScript 3 在 Array.prototype 中 定义 了 一 些 很 有 用 的 操作 数组 的 
函数 ， 这 意味 着 这 些 函 数 作 为 任何 数组 的 方法 都 是 可 用 的 。 下 面 几 节 介 
绍 ECMAScript 3 中 的 这 些 方法 。 像 通常 一 样 ， 完 整 的 细节 参见 第 四 部 分 
关于 数组 的 内 容 。ECMAScript 5 中 新 增 了 一 些 新 的 数组 遍历 方法 ; 它们 
涵盖 在 7.9 节 中 。 


7.8.1 join 


Array.join() 方 法 将 数组 中 所 有 元 素 都 转化 为 字符 串 并 连接 在 一 起 ， 
返回 最 后 生成 的 字符 串 。 可 以 指定 一 个 可 选 的 字符 串 在 生成 的 字符 串 中 
0 如 果 不 指定 分 隔 符 ， 默 认 使 用 逗号 。 如 以 下 代 
与 所 示 : 





var a=[1,2,3];// 创 建 一 个 包含 三 个 元 素 的 数组 
a.join();//=>"1,2,3" 
a.join("™);//=>"1 2 3" 
a.join("™");//=>"123" 

var b=new Array(10);// 长 度 为 19 的 空 数 组 
b.join('-')//=>'--------- ' :9 个 连 字 号 组 成 的 字符 串 











Array.join() 方 法 是 String.split() 方 法 的 逆 同 操作 ， 后 者 是 将 字符 串 分 
割 成 知 干 块 来 创建 一 个 数组 。 





7.8.2 reversel() 


Array.reverse() 方 法 将 数组 中 的 元 素 题 倒 顺 序 ， 返 回 逆序 的 数组 。 它 
采取 了 替换 ;， 换 句 话说 ， 它 不 通过 重新 排列 的 元 素 创 建新 的 数组 ， 而 是 
在 原先 的 数组 中 重新 排列 它们 。 例 如 ， 下 面 的 代码 使 用 reverse() 和 join() 
方法 生成 字 梨 申 "8， 2， 2; 





var a=[1,2,3]; 
a.reverse(),.join()//=>"3,2,1" ,并 且 现 在 的 a 是 [3,2,1] 

















7.8.3 sort() 


Array.sort0) 方 法 将 数组 中 的 元 素 排 序 并 人 返回 排序 后 的 数组 。 当 不 市 
参数 调用 sort() 时 ， 数 组 元 系 以 字母 表 顺 序 排序 (如 有 必要 将 临时 转化 为 
字符 串 进 行 比较 ) : 





var a=new Array("banana" "cherry"，"apple")， 
a.sort(); 
var s=a.join(",");//s=="apple,banana,cherry" 





如 果 数 组 包含 undefined 元 素 ， 它 们 会 被 排 到 数组 的 尾部 。 


为 了 按照 其 他 方式 而 非 字 母 表 顺序 进行 数组 排序 ， 必 须 给 sort(0) 方 法 
传递 一 个 比较 函数 。 该 函数 决定 了 它 的 两 个 参数 在 排 好 厅 的 数组 中 的 先 
后 顺序 。 假 设 第 一 个 参数 应 该 在 前 ， 比 较 函 数 应 该 返回 一 个 小 于 0 的 数 
值 。 反 之 ,假设 第 一 个 参数 应 该 在 后 ， 函 数 应 该 返回 一 个 大 于 0 的 数 
值 。 并 且 ， 假 设 两 个 值 相 等 “也 就 是 说 ， 它 们 的 顺序 无 天 紧要 ) ， 函 数 
0 
人 码 如 下 : 











var a=[33,4,1111,222]; 
a.Sort();// 字 母 表 顺 序 :1111, 222, 33,4 
a.sort(function(a,b){// 数 值 顺序 :4,33,222,1111 
return a-b;// 根 据 顺 序 ， 返 回 负数 、9、 正 数 














}); 
a.sort(function(a,b){freturn b-a});// 数 值 大 小 相反 的 顺序 





注意 ， 这 里 使 用 匿名 函数 表达 式 非 常 方 便 。 既 然 比较 函数 只 使 用 一 
次 ， 就 没 必要 给 它们 命名 了 。 


另外 一 个 数组 元 素 排 序 的 例子 ， 也 许 需 要 对 一 个 字符 串 数 组 执行 不 
区 分 大 小 写 的 字母 表 排 序 ， 比 较 函 数 首先 将 参数 都 转化 为 小 写字 符 串 
(使 用 toLowerCase() 方 法 ) ， 再 开始 比较 : 








a=['ant', 'Bug', 'cat','Dog'] 
a.sort();// 区 分 大 小 写 的 排序 : ['Bug', 'Dog', 'ant',cat'] 
a.Ssort(function(s,t){VZ/ 不 区 分 大 小 写 的 排序 

Var a=s.toLowerCase(); 

Var b=t.toLowerCase(); 

If(a<b)return-1I， 

if(a>b)return 1; 

return 0; 

});//=>['ant','Bug', 'cat','Dog'] 














7.8.4 concat() 


Array.concat() 方 法 创建 并 返回 一 个 新 数组 ， 它 的 元 素 包 括 调用 
concat() 的 原始 数组 的 元 素 和 concat0 的 每 个 参数 。 如 果 这 些 参 数 中 的 任 
何 一 个 上 自身 是 数组 ， 则 连接 的 是 数组 的 元 素 ， 而 非 数 组 本 身 。 但 要 注 
意 ，concat0 不 会 递归 局 平 化 数组 的 数组 。concat0 也 不 会 修改 调用 的 数 





var a=[1,2,3]; 
a.concat(4,5)// 返 回 [1,2,3,4,5] 
a.concat([4,5]);// 返 回 [1,2,3,4,5] 
a.concat([4,5],[6,7])// 返 回 [1,2,3,4,5,6,7] 
a.concat(4,[5,[6,7]])// 返 回 [1,2,3,4,5,[6,7]] 



































7.8.5 slice() 


Array.slice() 方 法 返回 指定 数组 的 一 个 片段 或 子 数组 。 它 的 两 个 参数 
分 别 指定 了 片段 的 开始 和 结束 的 位 置 。 返 回 的 数组 包含 第 一 个 参数 指定 
的 位 置 和 所 有 到 但 不 含 第 二 个 参数 指定 的 位 置 之 间 的 所 有 数组 元 素 。 如 
果 只 指定 一 个 参数 ， 返 回 的 数组 将 包含 从 开始 位 置 到 数组 结尾 的 所 有 元 
素 。 如 参数 中 出 现 负 数 ， 它 表示 相对 于 数组 中 最 后 一 个 元 素 的 位 置 。 例 
如 ， 参 数 -1 指定 了 最 后 一 个 元 素 ， 而 -3 指定 了 倒数 第 三 个 元 素 。 注 意 ， 
slice() 不 会 修改 调用 的 数组 。 下 和 面 有 一 些 示例 : 

















var a=[1,2,3,4,5]; 

a.slice(0,3);// 返 回 [1,2,3] 
a.Sslice(3);// 返 回 [4,5] 
a.slice(1, -1);// 返 回 [2,3,4] 


ol 














a.Slice(-3,-2);// 返 回 [3] 


7.8.6 splice() 


Array.splice(0) 方 法 是 在 数组 中 插入 或 删除 元 素 的 通用 方法 。 不 同 于 
slice() 和 concat()，splice() 会 修改 调用 的 数组 。 注 意 ，splice() 和 slice() 拥 
有 非常 相似 的 名 字 ， 但 它们 的 功能 却 有 本 质 的 区 别 。 


spliceO) 能 够 从 数组 中 删除 元 和 水、 插入 元 素 到 数组 中 或 者 同时 完成 这 
两 种 操作 。 在 插入 或 删除 点 之 后 的 数组 元 素 会 根据 需要 增加 或 减 小 它们 
的 索引 值 ， 因 此 数组 的 其 他 部 分 仍然 保持 连续 的 。spliceO) 的 第 一 个 参数 
指定 了 插入 和 《或 ) 删除 的 起 始 位 置 。 第 二 个 参数 指定 了 应 该 从 数组 中 
删除 的 元 素 的 个 数 。 如 果 省 略 第 二 个 参数 ， 从 起 始点 开始 到 数组 结尾 的 
所 有 元 素 都 将 被 删除 。splice0 返 回 一 个 由 删除 元 素 组 成 的 数组 ， 或 者 如 
果 没 有 删除 元 素 就 返回 一 个 空 数 组 。 例 如 : 











var a=[1,2,3,4,5,6,7,8]; 
a.splice(4);// 返 回 [5,6,7,8];a 是 [1,2,3,4] 
a.Ssplice(1,2);// 返 回 [2,3];a 是 [1,4] 
a.splice(1,1);// 返 回 [4] ;a 是 [1] 





























splice() 的 前 两 个 参数 指定 了 需要 删除 的 数组 元 素 。 紧 随 其 后 的 任意 
个 数 的 参数 指定 了 需要 插入 到 数组 中 的 元 隶 ， 从 第 一 个 参数 指定 的 位 置 
开始 插入 。 例 如 : 

var a=[1,2,3,4,5]; 


a.splice(2,0,'a', 'b');// 返 回 [];a 是 [1,2,'a','b',3,4,5] 
a.splice(2,2,[1,2],3);// 返 回 ['a', 'b'];a 是 [1,2, [1,2],3,3,4,5] 




















注意 ， 区 别 于 concat()，spliceO 会 插入 数组 本 身 而 非 数 组 的 元 素 。 
7.8.7 push(O) 和 pop0 


push() 和 pop0O 方 法 允许 将 数组 当做 栈 来 使 用 。push0 方 法 在 数组 的 
尾部 添加 一 个 或 多 个 元 素 ， 并 返回 数组 新 的 长 上 度 。pop0 方 法 则 相反 : 它 
删除 数组 的 最 后 一 个 元 素 ， 减 小 数组 长 度 并 返回 它 删 除 的 值 。 注 意 ， 两 
个 方法 都 修改 并 蔡 换 原始 数组 而 非 生 成 一 个 修改 版 的 新 数组 。 组 合 使 用 
push0 和 pop0O 能 够 用 JavaScript 数 组 实现 先进 后 出 的 栈 。 例 如 ; 








var stack=[];//stack:[] 
stack.push(1,2);//stack:[1,2] 返回 2 
stack.pop();//stack:[1] 返回 2 
stack.push(3);//stack:[1,3] 返回 2 
stack.pop();//stack:[1] 返回 3 
stack.push([4,5]);//stack:[1,[4,5]] 返回 2 
stack.pop()//stack:[1] 返回 [4,5] 

stack.pop();//stack:[] 返回 1 























mt 














7.8.8 unshift() 和 shift() 


unshift() 和 shift() 方 法 的 行为 非常 类 似 于 push() 和 popO)， 不 一 样 的 是 
前 者 是 在 数组 的 头 部 而 非 尾 部 进行 元 素 的 插入 和 删除 操作 。unshift0 在 
数组 的 头 部 添加 一 个 或 多 个 元 素 ， 并 将 已 存在 的 元 素 移 动 到 更 高 索引 的 
位 置 来 获得 足够 的 空间 ， 最 后 返回 数组 新 的 长 度 。shift0 删 除数 组 的 第 
一 个 元 素 并 将 其 返回 ， 然 后 把 所 有 随后 的 元 素 下 移 一 个 位 置 来 填补 数组 
头 部 的 空缺 。 例 如 : 








var a=[];//a:[] 
a.unshift(1);//a:[1] 返 回 :1 
a.unshift(22);//a:[22,14] 返 回 :2 
a.shift();//a:[1] 返 回 :22 
a.unshift(3,[4,5]);//a:[3,[4,5],1] 返 回 :3 
a.shift();//a:[[4,5],1] 返 回 :3 
a.shift();//a:[i1] 返 回 : [4,5] 
a.shift();//a:[] 返 回 :1 






























































注意 ， 当 使 用 多 个 参数 调用 unshift0 时 它 的 行为 令 人 惊讶 。 参 数 是 
一 次 性 插入 的 《〈 融 像 splice(0) 方 法 ) 而 非 一 次 一 个 地 插入 。 这 意味 着 最 终 
的 数组 中 插入 的 元 素 的 顺序 和 书 们 在 参数 列表 中 的 | 顺序 一 致 。 而 假如 元 
素 是 一 次 一 个 地 插入 ， 它 们 的 顺序 应 该 是 反 过 来 的 。 








7.8.9 toString() 和 toLocaleString() 


数组 和 其 他 JavaScript 对 象 一 样 拥有 toString(0) 方 法 。 针 对 数组 ， 访 方 
法 将 其 每 个 元 素 转 化 为 字符 串 〈 如 有 必要 将 调用 元 素 的 toString0) 方 法 ) 
并 且 输 出 用 逗号 分 隔 的 字符 串 列表 。 注 意 ， 输 出 不 包括 方 括号 或 其 他 任 
何 形式 的 包 右 数组 值 的 分 隔 符 。 例 如 : 








[1,2,3]. MT 
["a", "b", "c"] .toString()// 生 成 ' 
[1, [2, c" ']] .tostring()// 生 成 '1 








注意 ， 这 里 与 不 使 用 任何 参数 调用 join0 方 法 返回 的 字符 串 是 一 样 
人 


toLocaleString() 古 toString() 方 法 的 本 地 化 版 本 。 它 调用 元 素 的 
toLocaleString() 方 法 将 每 个 数组 元 素 转 化 为 字符 串 ， 并 且 使 用 本 地 化 
《和 上 自 定义 实现 的 ) 分 隅 符 将 这 些 字 符 串 连接 起 来 生成 最 终 的 字符 串 。 


7.9 ECMAScript 5 中 的 数组 方法 


ECMAScript ”5 定义 了 9 个 新 的 数组 方法 来 表 历 、 上 映射 、 过 滤 、 检 
测 、 简 化 和 搜索 数组 。 下 面 几 节 描 述 了 这 些 方法 。 


但 在 开始 详细 介绍 之 前 ， 很 有 必要 对 ECMAScript 5 中 的 数组 方法 做 
一 个 概述 。 首 先 ， 大 多 数 方法 的 第 一 个 参数 接收 一 个 函数 ， 并 且 对 数组 
的 每 个 元 系 〈 或 一 些 元 素 ) 调用 一 次 该 函数 。 如 果 是 稀 玉 数 组 ， 对 不 存 
在 的 元 素 不 调用 传递 的 函数 。 在 大 多 数 情况 下 ， 调 用 提供 的 函数 使 用 三 
个 参数 : 数组 元 隶 、 元 系 的 索引 和 数组 本 身 。 通 汕 ， 只 需要 第 一 个 参数 
值 ， 可 以 忽略 后 两 个 参数 。 大 多 数 ECMAScript 5 数组 方法 的 第 一 个 参数 
是 一 个 函数 ， 第 二 个 参数 是 可 选 的 。 如 果 有 第 二 个 参数 ， 则 调用 的 函数 
被 看 做 是 第 二 个 参数 的 方法 。 也 就 是 说 ， 在 调用 函数 时 传递 进去 的 第 二 
个 参数 作为 它 的 this 关 键 字 的 值 来 使 用 。 被 调用 的 函数 的 返回 值 非常 重 
要 ， 但 是 不 同 的 方法 处 理 返回 值 的 方式 也 不 一 样 。ECMAScript 5 中 的 数 
组 方法 都 不 会 修改 它们 调用 的 原始 数组 。 当 然 ， 传 递 给 这 些 方法 的 函数 
古 可 以 修改 这 些 数组 的 。 


7.9.1 forEach() 


forEach() 方 法 从 头 至 尾 遍 历数 组 ， 为 每 个 元 素 调用 指定 的 函数 。 如 
上 所 述 ， 传 递 的 函数 作为 forEachO 的 第 一 个 参数 。 然 后 forEach0O 使 用 三 
个 参数 调用 该 函数 : 数组 元 素 、 元 素 的 索引 和 数组 本 身 。 如 果 只 关心 数 
组 元 素 的 值 ， 可 以 编写 只 有 一 个 参数 的 函数 一 一 额外 的 参数 将 忽略 : 




















var data=[1,2,3,4,5];// 要 求 和 的 数组 

// 计 算数 组 元 素 的 和 值 

var sum=0;// 初 始 为 0 
data.forEach(function(value){sum+=value;});// 将 每 个 值 累加 到 sum 上 
Sum//=>15// 每 个 数组 元 素 的 值 自 加 1 
data.forEach(function(v,i,a)t{a[il]=v+1;}); 

















data//=>[2,3,4,5,6] 





注意 ，forEach() 无 法 在 所 有 元 素 都 传递 给 调用 的 函数 之 前 终止 授 
历 。 也 就 是 说 ， 没 有 像 for 循 环 中 使 用 的 相应 的 break 语 句 。 如 果 要 提前 
终止 ， 必 须 把 forEach() 方 法 放 在 一 个 try 块 中 ， 并 能 抛 出 一 个 异常 。 如 果 
forEach() 调 用 的 函数 抛 出 foreach.break 异 常 ， 循 环 会 提前 终 上 上 : 





function foreach(a,f,t)t{ 
try{a.forEach(f,t);} 
catch(e)t{ 
if(e===foreach.break)return,; 
else throw e; 


foreach.break=new Error("StopIteration"); 





7.9.2 map() 


map0 方 法 将 调用 的 数组 的 每 个 元 系 传 递 给 指定 的 函数 ， 并 返回 一 
个 数组 ， 它 包含 该 函数 的 返回 值 。 例 如 : 





a=[1,2,3]; 
b=a. map(function(x){return x*x;});//b 是 [1, 4,9] 





传递 给 map0 的 函数 的 调用 方式 和 传递 给 forEach0 的 区 函数 的 调用 方 
一 但 传递 给 map0O 的 函数 应 该 有 返回 值 。 注 意 ，map0 返 回 的 是 新 
数组 : 它 不 修改 调用 的 数组 。 如 果 是 稀疏 数组 ， 返 回 的 也 是 相同 方式 的 
稀 下 数 组 : 它 具 有 相同 的 长 度 ， 相 同 的 缺失 元 素 。 


7.9.3 filter() 


fliter() 方 法 返回 的 数组 元 素 是 调用 的 数组 的 一 个 子 集 。 传 递 的 函数 
是 用 来 逻辑 判定 的 : 该 函数 返回 true 或 false。 调 用 判定 函数 就 像 调用 
forEachO0 和 mapO0 一 样 。 如 果 返 回 值 为 true 或 能 转化 为 true 的 值 ， 那 么 传 
递 给 判定 函数 的 元 系 束 是 这 个 子 集 的 成 员 ， 它 将 被 添加 到 一 个 作为 返回 
值 的 数组 中 。 例 如 : 





a=[5,4,3,2,1]; 
smallvalues=a.filter(function(x){return x=3});//[2,1] 
everyother=a.filter(function(x,i){return i%2==0});//[S5,3,1] 





注意 ，filter0 会 跳 过 稀 玻 数组 中 缺少 的 元 素 ， 它 的 返回 数组 总 是 笛 
蜜 的 。 为 了 压缩 牧 下 数组 的 空缺 ， 代 码 如 下 : 





var dense=sparse.filter(function(){return true;}); 





甚至 ， 压 绾 空缺 并 删除 undefined 和 null 元 系 ， 可 以 这 样 使 用 filter(0): 








a=a.filter(function(x){return x!==undefined& &x!=null;}); 





7.9.4 every() 和 some() 


ts tie ss le 罗 辑 判定 : 它们 对 数组 元 素 应 用 指定 
的 函数 进行 判定 ， 返 回 true 或 false。 


every0 方 法 束 像 数学 中 的 “针对 所 有 ”的 量词 : 当 且 仅 当 针对 数组 中 
的 所 有 元 素 调 用 判定 函数 都 返回 true， 它 才 返 回 true: 








a=[1,2,3,4,5]; 
a. every(function(x){return x 二 10;})//= 之 true: 所 有 的 值 <10 
a.every(function(x)f{return x%2===0;})//=false: 不 是 所 有 的 值 都 是 偶数 























some() 方 法 就 像 数 学 中 的 “存在 ”的 量词 : 当 数 组 中 至 少 有 一 个 元 素 
调用 判定 函数 返回 true， 它 就 返回 true; 并 且 当 日 仅 当 数值 中 的 所 有 元 素 
调用 判定 函数 都 返回 false， 它 才 返 回 false: 











a=[1,2,3,4,5]; 
a. some(function(x){return Xx%2===0;})//=>true: a 含 有 偶数 值 
a.some(isNaN)//=>false: a 不 包含 非 数值 元 素 





























注意 ， 一 旦 every0) 和 some() 确 认 该 返回 什么 值 它们 束 会 停止 避 历 数 
组 元 素 。some0 在 判定 函数 第 一 次 返回 true 后 就 返回 true， 但 如 果 判 定 函 
数 一 直 返回 false， 它 将 会 遇 历 整个 数组 。every0 恰 好 相反 : 它 在 判定 函 
数 第 一 次 返回 false 后 束 返 回 false， 但 如 果 判 定 函数 一 直 返 回 true， 它 将 
会 过 历 整个 数组 。 注 意 ， 例 ， 在 空 数 组 上 调用 时 ， 
every(O 返 回 true，some(O 返 回 false。 





7.9.5 reduce() 和 reduceRight() 


reduce() 和 reduceRight() 方 法 使 用 指定 的 函数 将 数组 元 素 进行 组 合 ， 
生成 单个 值 。 这 在 函数 式 编程 中 是 常见 的 操作 ， 也 可 以 称 为 “ 注 
入 ”和 “ 折 对 *"。 举 例 说 明 它 是 如 何 工作 的 : 


var a=[1,2,3,4,5] 

var sum=a.reduce(function(x,y)f{return xty},0);// 数 组 求 和 

var product=a.reduce(function(x,y)f{return x*y},1);// 数 组 求 积 
var max=a.reduce(function(x,y){return(x>>y)?x:y;});// 求 最 大 值 


reduce() 需 要 两 个 参数 。 第 一 个 是 执行 化 简 操 作 的 函数 。 化 简 函 数 
的 任务 就 是 用 茶 种 方法 把 两 个 值 组 合 或 化 简 为 一 个 值 ， 并 返回 化 简 后 的 
值 。 在 上 述 例子 中 ， 函 数 通过 加 法 、 乘 法 或 取 最 大 值 的 方法 组 合 两 个 
值 。 第 二 个 《可 选 ) 的 参数 是 一 个 传递 给 函数 的 初始 值 。 


reduce() 使 用 的 函数 与 forEach() 和 map0) 使 用 的 函数 不 同 。 比 较 熟 悉 
的 是 ， 数 组 元 素 、 元 素 的 索引 和 数组 本 身 将 作为 第 2 一 4 个 参数 传递 给 函 
数 。 第 一 个 参数 是 到 目前 为 止 的 化 简 操 作 累 积 的 结果 。 第 一 次 调用 函数 
时 ， 第 一 个 参数 是 一 个 初始 值 ， 它 就 是 传递 给 reduce() 的 第 二 个 参数 。 
在 接 下 来 的 调用 中 ， 这 个 值 就 是 上 一 次 化 简 函 数 的 返回 值 。 在 上 面 的 第 
一 个 例子 中 ， 第 一 次 调用 化 简 函 数 时 的 参数 是 0 和 1。 将 两 者 相 加 并 返回 
1。 再 次 调用 时 的 参数 是 1 和 2， 它 返回 3。 然 后 它 计 算 3+3=6、6+4=10， 
最 后 计算 10+5=15。 最 后 的 值 是 15，reduce0 返 回 这 个 值 。 


可 能 已 经 注意 到 了 ， 上 面 第 三 次 调用 reduce0 时 只 有 一 个 参数 : 没 
有 指定 初始 值 。 当 不 指定 初始 值 调 用 reduce() 时 ， 它 将 使 用 数组 的 第 一 
个 元 素 作 为 其 初始 值 。 这 意味 着 第 一 次 调用 化 简 函 数 就 使 用 了 第 一 个 和 
第 二 个 数组 元 素 作 为 其 第 一 个 和 第 二 个 参数 。 在 上 面 求 和 与 求 积 的 例子 
中 ， 可 以 省 略 初始 值 参数 。 


在 空 数 组 上 ， 不 带 初 始 值 参数 调用 reduce() 将 导致 类 型 错误 异常 。 
如 果 调 用 它 的 时 候 只 有 一 个 值 一 一 数组 只 有 一 个 元 素 并 且 没 有 指定 初始 
值 ， 或 者 有 一 个 空 数 组 并 且 指 定 一 个 初始 值 一 一 reduceO 只 是 简单 地 返 
回 那 个 值 而 不 会 调用 化 简 函 数 。 


reduceRightO 的 工作 原理 和 reduce0 一 样 ， 不 同 的 是 它 按 照 数 组 索引 
从 高 到 低 《〈 从 右 到 左 ) 处 理 数组 ， 而 不 是 从 低 到 高 。 如 果 化 简 操 作 的 优 





























先 顺序 是 从 右 到 左 ， 你 可 能 想 使 用 它 ， 例 如 ; 





var a=[2,3,4]// 计 算 2^(3^4) 。 乘 方 操 作 的 优先 顺序 是 从 右 到 左 
var big=a.reduceRight(function(accumulator,value)t{ 
return Math.pow(value,accumulator ); 


}); 





注意 ，reduce() 和 reduceRight() 都 能 接收 一 个 可 选 的 参数 ， 它 指定 了 
化 简 函 数 调用 时 的 this 关 键 字 的 值 。 可 选 的 初始 值 参 数 仍 然 需要 占 一 个 
位 置 。 如 果 想 让 化 简 函 数 作 为 一 个 特殊 对 象 的 方法 调用 ， 请 参看 
Function.bind() 方 法 。 


值得 注意 的 是 ， 上 面 描述 的 everyO 和 some() 方 法 是 一 种 闫 型 的 数组 
但 是 不 同 的 是 ， 它 们 会 尽早 终止 避 历 而 不 总 是 访问 每 一 个 数 
组 元 系 。 


为 了 简单 起 见 ， 到 目前 位 置 所 展示 的 例子 都 是 数值 的 ， 但 数学 计算 
不 是 reduce() 和 reduceRight() 的 唯一 意图 。 考 处 一 下 例 6-2 中 的 union() 函 
数 。 它 计算 两 个 对 象 的 “并 集 ”， 并 返回 另 一 个 新 对 象 ， 新 对 象 具有 二 者 
的 属性 。 该 函数 期 待 两 个 对 象 并 返回 另 一 个 对 象 ， 所 以 它 的 工作 原理 和 
一 个 化 简 函 数 一 样 ， 并 且 可 以 使 用 reduce() 来 把 它 一 般 化 ， 计 算 任 意 数 
目的 对 象 的 “并 集 ”。 

















var objects=[{x:1},{y:2}, {z:3}]; 
var merged=objects.reduce(union);//=>{x:1,y:2,2z:3} 





回想 一 下 ， 当 两 个 对 象 拥有 同名 的 属性 时 ，union() 函 数 使 用 第 一 个 
参数 的 属性 值 。 这 样 ，reduce() 和 reduceRight() 在 使 用 unionO 时 给 出 了 不 
同 的 结果 : 





var objects=[{x:1,a:1},{y:2,a:2}, {z:3,a:3}]; 
var leftunion=objects.reduce(union);//{xX:1,y:2,2: 


z:3,a:1} 
var rightunion=objects.reduceRight(union);//{xX:1,y:2,z 


:3,a:3} 





7.9.6 indexOf() 和 ]astIndexOf() 


indexOfO 和 1lastIndexOfO 搜 索 整 个 数组 中 具有 给 定 值 的 元 素 ， 返 回 
找到 的 第 一 个 元 素 的 索引 或 者 如 果 没 有 找到 就 返回 -1。indexOf() 从 头 至 





尾 搜索 ， 而 lastIndexOf(0) 则 反 向 搜索 。 





a=[9,1,2,1,0]; 
a.indexof(1)//=>1:a[1] 是 1 
a.lastIndexof(1)//=>3:a[3] 是 1 
a.indexof(3)//=>-1: 没 有 值 为 3 的 元 素 

















不 同 于 本 节 摘 述 的 其 [他 方法 ， ， a ee \ 接 收 
一 个 函数 作为 其 参数 。 第 一 个 参数 是 需要 搜索 的 值 ， 第 二 个 参数 是 可 选 
的 : 它 指定 数组 中 的 一 个 索引 ， 从 那里 开始 搜索 。 如果 省 咯 该 参数 ， 
indexOfO 从 头 开 始 搜索 ， 而 lastfndexOfO 从 末尾 开始 搜索 。 第 二 个 参数 
也 可 以 是 负数 ， 它 代表 相对 数组 末尾 的 偏 移 量 ， 对 于 splice() 方 法 : 例 
如 ，-1 指 定数 组 的 最 后 一 个 元 素 。 


如 下 函数 在 一 个 数组 中 搜索 指定 的 值 并 返回 包含 所 有 匹配 的 数组 索 
引 的 一 个 数组 。 它 展示 了 如 何 运用 indexOfO 的 第 二 个 参数 来 查找 除了 第 
一 个 以 外 匹配 的 值 。 

















// 在 数组 中 查找 所 有 出 现 的 x， 并 返回 一 个 包含 匹配 索引 的 数组 
function findall(a, 六 
var results=[],// 将 会 返回 的 数组 
len=a.length, // 待 搜索 数组 的 长 度 
pos=0;// 开 始 搜索 的 位 置 

while(pos 二 len){// 循 环 搜 索 多 个 元 素 . 
pos=a.indexof(x, pos);// 搜 索 
if(pos===-1)break;// 未 找到 ， 就 完成 搜索 
results.push(pos);// 否 则 ， 在 数组 中 存储 索引 
pos=pos+1;// 并 从 下 一 个 位 置 开始 搜索 


} 
return results;// 返 回 包含 索引 的 数组 
} 



































注意 ， 字 符 串 也 有 indexOf() 和 lastIndexOf() 方 法 ， 它 们 和 数组 方法 
的 功能 类 似 。 


7.10 ”数组 类 型 
我 们 在 本 章 中 到 处 都 可 以 看 见 数组 是 具有 特殊 行为 的 对 象 。 给 定 一 


个 未 知 的 对 象 ， 判 定 它 是 否 为 数组 通常 非常 有 用 。 在 ECMAScript 5 中 ， 
可 以 使 用 Array.isArray() 函 数 来 做 这 件 事情 : 








Array.isArray([]1)//=>true 


Array.isArray({})//=>false 





但 是 ， 在 ECMAScript 5 以 前 ， 要 区 分 数组 和 非 数 组 对 象 却 令 人 惊讶 
地 困难 。typeof 操 作 符 在 这 里 帮 不 上 忙 ， 对 数组 它 返 回 “ 对 象 *” (并且 对 
0 对 象 都 是 如 此 ) 。instanceof 操 作 符 只 能 用 于 简单 
情形: 





[jinstanceof Array//=>true 
({})instanceof Array//=>false 











使 用 instanceof 的 问题 是 在 Web 浏 览 器 中 有 可 能 有 多 个 窗口 或 窗 体 
(frame) 存在 。 每 个 窗口 都 有 自己 的 JavaScript 环 境 ， 有 自己 的 全 局 对 
象 。 并 且 ， 每 个 全 局 对 象 有 自己 的 一 组 构造 函数 。 因 此 一 个 窗 体 中 的 对 

象 将 不 可 能 是 另外 窗 体 中 的 构造 函数 的 实例 。 窗 体 之 间 的 混 消 不 常 发 
生 人 问题 足 已 证 明 instanceof 操 作 符 不 能 视 为 一 个 可 靠 的 数组 检测 
方法 


解决 方案 是 检查 对 象 的 类 属性 ( 见 6.8.2 节 ) 。 对 数组 而 言 该 属性 的 
值 总 是 "Array"， 因 此 在 ECMAScript 3 中 isArray0 函 数 的 代码 可 以 这 样 书 
写 : 














var isArray=Function.isArray||function(o){ 

return typeof o==="object"& 
Object,prototype.toString,.cal1(o)==="[object Array]"; 
}; 





实际 上 ， 此 处 类 属性 的 检测 就 是 ECMAScript ”5 中 Array.isArray() 函 
数 所 做 的 事情 。 获 得 对 象 类 属性 的 技术 使 用 了 6.8.2 节 和 例 6-4 中 展示 的 
Object.prototype.toString() 方 法 。 


7.11 类 数组 对 象 
我 们 已 经 看 到 ，JavaScript 数 组 的 有 一 些 特性 是 其 他 对 象 所 没有 的 : 
. 当 有 新 的 元 素 添加 到 列表 中 时 ， 自 动 更 新 length 属 性 。 
.设置 length 为 一 个 较 小 值 将 截断 数组 。 





.从 Array.prototype 中 继承 一 些 有 用 的 方法 。 
其 类 属性 为 "Array"。 


这 些 特 性 让 JavaScript 数 组 和 常规 的 对 象 有 明显 的 区 别 。 但 古 它 们 不 
古 定 义 数组 的 本 质 特性 。 一 种 常常 完 全 合理 的 看 法 把 拥有 一 个 数值 
length 属 性 和 对 应 非 负 整数 属性 的 对 象 看 做 一 种 类 型 的 数组 。 


实践 中 这 些 “ 关 数组 ?对 象 实际 上 偶尔 出 现 ， 虽 然 不 能 在 它们 之 上 直 
接 调用 数组 方法 或 者 期 望 langth 属 性 有 什么 特殊 的 行为 ， 但 是 仍然 可 以 
用 针对 真正 数组 过 历 的 代码 来 通 历 它们 。 结 论 就 是 很 多 数组 算法 针对 类 
数组 对 象 工 作 得 很 好 ， 束 像 针对 真正 的 数组 一 样 。 如 果 算法 把 数组 看 成 
只 读 的 或 者 如 果 它 们 至 少 保持 数组 长 度 不 变 ， 也 尤其 是 这 种 情况 。 


以 下 代码 为 一 个 常规 对 象 增加 了 一 些 属性 使 其 变 成 类 数组 对 象 ， 然 
后 遍历 生成 的 伪 数 组 的 “元 系 ”: 














Var a=f{f};// 从 一 个 常规 空 对 象 开始 
// 添 加 一 些 属性 ， 称 为 "类 数组 " 
Var i=0; 

while (i<=10)f 

a[i]=i*i; 

i++， 


} 

a.length=i;// 现 在 ， 当 做 真正 的 数组 遍历 它 
Var total=0; 

for(var j=0;j<=a.length;j++) 
total+=a[j]; 











8.3.2 贡 描述 的 Arguments 对 象 就 是 一 个 类 数组 对 象 。 在 客户 端 
JavaScript 中 ， 一 些 DOM 方 法 (如 document.getElementsByTagName()) 
也 返回 类 数组 对 象 。 下 面 有 一 个 函数 可 以 用 来 检测 类 数组 对 象 : 








// 判 定 o 是 否 是 一 个 类 数组 对 象 

// 字 符 串 和 函数 有 length 属 性 ， 但 是 它们 

// 可 以 用 typeof 检 测 将 其 排除 。 在 客户 端 JavaScript 中 ，DOM 文 本 节点 
// 也 有 length 属 性 ， 需 要 用 额外 判断 o.nodeType!=3 将 其 排除 
function isArrayLike(o)t{ 

if(o&&%//o 非 hull1、undefined 等 














































































































isFinite(o.length)&%&//0.1length 是 有 限 数 值 
o.length>=o&&//o.LIength 为 非 负 值 
0.length===Math.floor(0.length)&&//o.1length 是 整数 
0.length=4294967296)//0o.length=2^32 

return true;//o 是 类 数组 对 象 

else 








return false;// 和 否则 它 不 是 





将 在 7.12 节 中 看 到 在 ECMAScript 5 中 字符 串 的 行为 与 数组 类 似 〈 并 
且 有 些 浏览 器 在 ECMAScript 5 之 前 已 经 让 字符 串 变 成 可 索引 的 了 ) 。 然 
而 ， 类 似 上 述 的 类 数组 对 象 的 检测 方法 针对 字符 串 和 常常 返回 false 一 一 它 
们 通常 最 好 当做 字符 串 处 理 ， 而 非 数 组 。 


JavaScript 数 组 方法 是 特意 定义 为 通用 的 ， 因 此 它们 不 仅 应 用 在 真正 
的 数组 而 且 在 类 数组 对 象 上 都 能 正确 工作 。 在 ECMAScript 5 中 ， 所 有 的 
数组 方法 都 是 通用 的 。 在 ECMAScript 3 中 ， 除 了 toStringO0 和 
toLocaleString() 以 外 的 所 有 方法 也 是 通用 的 。 〈concat0) 方 法 是 一 个 特 
例 : 虽然 可 以 用 在 类 数组 对 象 上 ， 但 它 没有 将 那个 对 象 扩充 进 返 回 的 数 
组 中 。) 既然 类 数组 对 象 没 有 继承 自 Array.prototype， 那 就 不 能 在 它们 
上 面 直 接 调用 数组 方法 。 尽 管 如 此 ， 可 以 间接 地 使 用 Function.call 方 法 
调用 : 




















var a={"0" : Was Ni": vb "20 Ve length : 3};// 类 数组 对 象 
Array.prototype.join.call(a, "+")//=>"atb+tc" 
Array.prototype.slice.call(a,0)//=["a", "b", "c"]: 真正 数组 的 副本 
Array.prototype.map.call(a,function(x)t 

return x.toUpperCase(); 

})//=["A", MB "CcC"] 








在 7.10 节 的 isArray0 方 法 之 前 我 们 就 已 经 见 过 call0 技 术 。8.7.3 节 涵 
盖 关 于 Function 对 象 的 call0 方 法 的 更 多 内 容 。 


ECMAScript 5 数组 方法 是 在 Firefox 1.5 中 引入 的 。 由 于 它们 的 写法 
的 一 般 性 ，Firefox 还 将 这 些 方 法 的 版 本 在 Array 构 造 函 数 上 直接 定义 为 
函数 。 使 用 这 些 方 法 定义 的 版 本 ， 上 述 例子 就 可 以 这 样 重 写 : 





var a={"0":"a", "1":"b","2":"c", length:3};// 类 数组 对 象 
Array.join(a,"+") 

Array.slice(a,90) 

Array.map(a,function(x){return x.toUpperCase();}) 





当 用 在 类 数组 对 象 上 时 ， 数 组 方法 的 静态 函数 版 本 非常 有 用 。 但 既 
然 它 们 不 是 标准 的 ， 不 能 期 望 它们 在 所 有 的 浏览 需 中 都 有 定义 。 可 以 这 
样 书写 代码 来 保证 使 用 它们 之 前 是 存在 的 : 








Array.join=Array.join||function(a,sep)t 
return Array.prototype.join.call(a, sep); 

}; 
Array.slice=Array.slice||function(a,from,to){ 
return Array.prototype.slice.call(a,from, to); 
}; 

Array.map=Array.map| |function(a,f,thisArg){ 
return Array.prototype.map.call(a,f,thisArg); 
} 


7.12 ”作为 数组 的 字符 串 


在 ECMAScript 5 在 众多 最 近 的 浏览 器 实现 一 一 包括 IE8 一 一 早 于 
ECMAScript 5) 中 ， 字 符 串 的 行为 类 似 于 只 读 的 数组 。 除 了 用 charAt() 
方法 来 访问 单个 的 字符 以 外 ， 还 可 以 使 用 方 括号 : 











Var S=test 
s.charAt(0)//=>"t" 
s[1]//=>"e" 





当然 ， 针 对 字符 串 的 typeof 操 作 符 仍然 返回 "string"， 但 是 如 果 给 
Array.isArray() 传 递 字符 串 ， 它 将 返回 false。 


可 索引 的 字符 串 的 最 大 的 好 处 束 是 简单 ， 用 方 括 写 代 从 了 charAt() 
调用 ， 这 样 更 加 简洁 、 可 读 并 且 可 能 更 高 效 。 不 仅 如 此 ， 字 符 串 的 行为 
类 似 于 数组 的 事实 使 得 通用 的 数组 方法 可 以 应 用 到 字符 串 上 。 例 如 : 





s="Javascript" 
Array.prototype.join.call(s,"")//=>"Javascript" 
Array.prototype.filter .call(s,// 过 滤 字 符 串 中 的 字符 
function(x){ 

return x.match(/[^aeiou]/);// 只 匹配 非 元 音字 母 
}).join("")//=>"JvScrpt" 














请 记 住 ， 字 符 串 是 不 可 变 值 ， 故 当 把 它们 作为 数组 看 竺 时， 它们 是 
只 读 的 。 如 push()、sort()、reverse() 和 splice() 等 数组 方法 会 修改 数组 ， 
它们 在 字符 串 上 是 无 效 的 。 不 仅 如 此 ， 使 用 数组 方法 来 修改 字符 串 会 导 
致 错误 : 出 错 的 时 候 没 有 提示 。 





第 8 章 ” 郴 数 


函数 是 这 样 的 一 段 JavaScript 代 码 ， 它 只 定义 一 次 ， 但 可 能 被 执行 或 
调用 任意 次 。 你 可 能 已 经 从 诸如 子 例 程 (subroutine) 或 者 过 程 
(procedure) 这 些 名 字 里 对 函数 的 概念 有 所 了 解 。JavaScript 函 数 是 参数 
化 的 : 函数 的 定义 会 包括 一 个 称 为 形 参 〈parameter) 的 标识 符 列 表 ， 这 
些 参数 在 函数 体 中 像 局 部 变量 一 样 工作 。 函 数 调用 会 为 形 参 提 供 实 参 的 
值 出 。 函 数 使 用 它们 实 参 的 值 来 计算 返回 值 ， 成 为 该 函数 调用 表达 式 的 
值 。 除 了 实 参 之 外 ， 每 次 调用 还 会 拥有 另 一 个 值 一 一 本 次 调用 的 上 下 文 
一 一 这 就 是 this 关 键 字 的 值 。 


如 果 函 数 挂 载 在 一 个 对 象 上 ， 作 为 对 象 的 一 个 属性 ， 就 称 它 为 对 象 
的 方法 。 当 通过 这 个 对 象 来 调用 函数 时 ， 该 对 象 就 是 此 次 调用 的 上 下 文 
(context) ， 也 就 是 该 函数 的 this 的 值 。 用 于 初始 化 一 个 新 创建 的 对 象 
的 函数 称 为 构造 函数 (constructor) 。6.1 节 会 对 构造 函数 有 进一步 的 讲 
解 ， 第 9 章 还 会 再 谈 到 它 。 


在 JavaScript 里 ， 函 数 即 对 象 ， 程 序 可 以 随意 操控 它们 。 比 如 ， 
JavaScript 可 以 把 函数 赋值 给 变量 ， 或 者 作为 参数 传递 给 其 他 函数 。 因 为 
函数 就 是 对 象 ， 所 以 可 以 给 它们 设置 属性 ， 甚 至 调用 它们 的 方法 。 


JavaScript 的 疯 数 可 以 艇 套 在 其 他 函数 中 定义 ， 这 样 它们 就 可 以 访问 
它们 被 定义 时 所 处 的 作用 域 中 的 任何 变量 。 这 意味 着 JavaScript 函 数 构成 
了 一 个 闭 包 (closure〉， 它 给 JavaScript 带 来 了 非常 强劲 的 编程 能 


8.1 函数 定义 


函数 使 用 function 关 键 字 来 定义 ， 它 可 以 用 在 函数 定义 表达 式 〈 见 
4.3 节 ) 或 者 函数 声明 语句 〈 见 5.3.2 节 ) 里 。 在 两 种 形式 中 ， 函 数 定义 
都 从 function 关 键 字 开始 ， 其 后 跟随 这 些 组 成 部 分 : 


函数 名 称 标识 符 。 函 数 名 称 是 函数 声明 语句 必需 的 部 分 。 它 的 用 
途 就 像 变 量 的 名 字 ， 新 定义 的 函数 对 象 会 赋值 给 这 个 变量 。 对 函数 定义 
表达 式 来 说 ， 这 个 名 字 是 可 选 的 ;如 果 存 在 ， 该 名 字 只 存在 于 函数 体 
中 ， 并 指 代 该 函数 对 象 本 身 。 























一 对 圆 括 号 ， 其 中 包含 由 0 个 或 者 多 个 用 运 号 隔 开 的 标识 符 组 成 的 
人 


一 对 花 括 号 ， 其 中 包含 0 条 或 多 条 JavaScript 语 句 。 这 些 语 句 构成 了 
函数 体 : 一旦 调用 函数 ， 就 会 执行 这 些 语句 。 

例 8-1 分 别 展示 了 函数 语句 和 表达 式 两 种 方式 的 函数 定义 。 注 意 ， 
以 表达 式 来 定义 函数 只 适用 于 它 作 为 一 个 大 的 表达 式 的 一 部 分 ， 比 如 在 
赋值 和 调用 过 程 中 定义 函数 : 


例 8-1: 定义 JavaScript 函 数 














// 输 出 o 的 每 个 属性 的 名 称 和 值 ， 返 回 undefined 
function printprops(o){ 

for(var p in o) 
console.log(p+":"+0[p]+"\n"); 














// 计 算 两 个 稍 卡 尔 坐 标 (xl1,y1) 和 (x2,y2) 之 间 的 距离 
function distance(x1,y1,x2,y2){ 

Var dx=x2-x1; 

Var dy=y2-y1; 

return Math.sqrt(dx*dx+dy*dy); 


} 

// 计 算 阶 乘 的 递归 函数 (调用 自身 的 函数 
//Xx1! 的 值 是 从 x 到 x 递减 ( 步 长 为 1) 的 值 的 累 乘 
function factorial(x){ 
if(x==1)return 1; 

return x*factorial(x-1); 


} 

// 这 个 函数 表达 式 定 义 了 一 个 函数 用 来 求 传 入 参数 的 平方 

// 注 意 我 们 把 它 赋 值 给 一 个 变量 

var square=function(x){return x*x;}// 函 数 表 达 式 可 以 包含 名 称 ， 这 在 递归 时 很 有 用 

var f=function fact(x){fif(x<=1)return 1;else return x*fact(x-1);};// 函 数 表达 式 也 可 
以 作为 参数 传 给 其 他 函数 

data.sort(function(a,b){return a-b;});// 函 数 表达 式 有 时 定义 后 立即 调用 

var tensquared=(function(x){return x*x;}(10)); 
































































































































注意 : 以 表达 式 方式 定义 的 函数 ， 函 数 的 名 称 是 可 选 的。 一 条 函数 
声明 语句 实际 上 声明 了 一 个 变量 ， 并 把 一 个 函数 对 象 赋值 给 它 。 相 对 而 
言 ， 定 义 函 数 表 达 式 时 并 没有 声明 一 个 变量 。 阔 数 可 以 命名 ， 束 像 上 面 
的 阶乘 函数 ， 它 需要 一 个 名 称 来 指 代 上 自己 。 如 果 一 个 函数 定义 表达 式 包 
含 名 称 ， 函 数 的 局 部 作用 域 将 会 包含 一 个 绑 定 到 函数 对 象 的 名 称 。 实 际 
上 ， 子 数 的 名 称 将 成 为 函数 内 部 的 一 个 局 部 变量 。 通 常 而 言 ， 以 表达 式 
方式 定义 函数 时 都 不 需要 名 称 ， 这 会 让 定义 它们 的 代码 更 为 紧 竣 。 函 数 
定义 表达 式 特别 适合 用 来 定义 那些 只 会 用 到 一 次 的 函数 ， 比 如 上 面 展示 











的 最 后 两 个 例子 。 
男 数 命名 


任何 合法 的 JavaScript 标 识 符 都 可 以 用 做 一 个 函数 的 名 称 。 命 名 时 要 
尽量 选择 描述 性 强 而 又 简 尘 的 函数 名 。 在 这 两 者 之 间 做 到 恰到好处 是 一 
门 艺 术 ， 需 要 丰富 的 经 验 。 精 心 挑选 的 函数 名 可 以 极 大 地 改善 代码 的 可 
读 性 〈 从 而 也 提高 了 可 维护 性 ) 。 


半数 名 称 通常 是 动词 或 以 动词 为 前 级 的 词组 。 通 第 函数 名 的 第 一 个 
字符 为 小 写 ， 这 是 一 种 编程 约定 。 当 函数 名 包含 多 个 蛙 词 时 ， 一 种 约定 
是 将 单词 以 下 划 线 分 隔 ， 就 像 like_this()。 还 有 另外 一 种 约定 ， 就 是 除了 
第 一 个 单词 之 外 的 单词 首 字 母 使 用 大 写字 母 ， 就 像 likeThisD。 有 一 些 函 
数 是 用 做 内 部 函数 或 私有 函数 不 是 作为 公用 API 的 一 部 分 )， 这 种 函 
数 名 通 凋 以 一 条 下 划 线 为 前 绥 。 


在 一 些 编程 风格 中 ， 或 者 编程 框架 里 ， 通 常 为 那些 经 常 调 用 的 函数 
指定 短 名 称 ， 比 如 客户 端 JavaScript 框 架 jQuery (第 19 章 会 详细 讲述 ) 就 
将 最 常用 的 方法 重 命 名 为 $()〔 一 个 美元 符号 ) (2.4 节 提 到 ， 美 元 符号 
和 下 划 线 是 除了 字母 和 数字 之 外 的 两 个 合法 的 JavaScript 标 识 符 ) 。 


如 5.3.2 节 所 述 ， 函 数 声 明 语句 “被 提前 ?到 外 部 脚本 或 外 部 函数 作用 
域 的 项 部 ， 所 以 以 这 种 方式 声明 的 函数 ， 可 以 被 在 它 定 义 之 前 出 现 的 代 
码 所 调用 。 不 过 ， 以 表达 式 定 义 的 函数 就 妨 当 别论 了 ， 为 了 调用 一 个 函 
数 ， 必 须要 能 引用 它 ， 而 要 使 用 一 个 以 表达 式 方 式 定 义 的 函数 之 前 ， 必 
须 把 它 赋值 给 一 个 变量 。 变 量 的 声明 提前 了 《参见 3.10.1 节 ) ， 但 给 变 
人 
调用 ) 。 


请 注意 ， 例 8-1 中 的 大 多 数 函 数 ( 但 不 是 全 部 ) 包含 一 条 return 语 人 句 
《 见 5.6.4 节 〉 。return 语 句 导 致 函 数 停 止 执 行 ， 并 返回 它 的 表达 式 〈 如 
果 有 的 话 ) 的 值 给 调用 者 。 如 果 return 语 句 没 有 一 个 与 之 相关 的 表达 
式 ， 则 它 返 回 undefined 值 。 如 果 一 个 函数 不 包含 return 语 句 ， 那 它 就 只 
执行 函数 体 中 的 每 条 语句 ， 并 返回 undefined 值 给 调用 者 。 


例 8-1 中 的 大 多 数 函 数 都 是 用 来 计算 出 一 个 值 的 ， 它 们 使 用 return 把 
值 返 回 给 调用 者 。 而 printprops0) 函 数 的 不 用 之 处 在 于 ， 它 的 任务 是 输出 
对 象 各 属性 的 名 称 和 值 。 没 有 必要 返回 值 ， 该 函数 不 包含 return 语 句 。 


























printprops() 函 数 的 返回 值 始终 是 undefined。 (没有 返回 值 的 函数 有 时候 
称 为 过 程 ) 


在 JavaScript 里 ， 函 数 可 以 舱 套 在 其 他 函数 里 。 例 如 : 





function hypotenuse(a,b){ 
function square(x){return x*x;} 
return Math. sqrt (souare(a)+square(b)); 


} 





般 套 函数 鸭 有 趣 之 处 在 于 它 的 变量 作用 域 规则 : 它们 可 以 访问 般 套 
它们 《或 多 重 藤 套 ) 的 函数 的 参数 和 变量 。 例 如 ， 在 上 面 的 代码 里 ， 内 
部 函数 squareO0 可 以 读 写 外 部 函数 hypotenuse(0) 定 义 的 参数 a 和 b。 这 些 作 
用 域 规 则 对 内 花 函 数 非 常 重要 ， 我 们 会 在 8.6 节 再 深入 了 解 它 们 。 

5.3.2 节 曾 提 到 ， 也 数 声 明 语 句 并 非 真 正 的 语句 ，ECMAScript 规 范 
只 是 允许 它们 作为 项 级 语句 。 它 们 可 以 出 现在 全 局 代码 里 ， 或 者 内 骸 在 
其 他 函数 中 ， 但 它们 不 能 出 现在 循环 、 条 件 判 晰 ， 或 者 try/cache/finally 
以 及 with 语句 中 四 。 注 意 ， 此 限制 仅 适用 于 以 i 吾 句 声明 形式 定义 的 函 
数 。 函 数 定义 表达 式 可 以 出 现在 JavaScript 代 码 的 任何 地 方 。 


8.2 ”函数 调用 


构成 函数 主体 的 JavaScript 代 码 在 定义 之 时 并 不 会 执行 ， 只 有 调用 该 
函数 时 ， 它 们 才 会 执行 。 有 4 种 方式 来 调用 JavaScript 函 数 : 


-作为 函数 

-作为 方法 

-作为 构造 函数 

通过 它们 的 cal0 和 apply0 方 法 间接 调用 
8.2.1 ”函数 调用 





使 用 调用 表达 式 可 以 进行 普通 的 函数 调用 也 可 进行 方法 调用 《〈 见 
4.5 市 ) 。 一 个 调用 表达 式 由 多 个 函数 表达 式 组 成 ， 每 个 函数 表达 式 都 
征 由 一 个 函数 对 象 和 左 圆 括号 、 参 数列 表 和 右 圆 括号 组 成 ， 参 数列 表 是 
由 去 号 分 隅 的 零 个 或 多 个 参数 表达 式 组 成 。 如 采 函 数 表达 式 是 一 个 属性 
访问 表达 式 ， 即 该 函数 是 一 个 对 象 的 属性 或 数组 中 的 一 个 元 素 ， 那 么 它 
就 是 一 个 方法 调用 表达 了 式 。 下 面 将 会 解释 这 种 情形 。 下 面 的 代码 展示 了 
一 些 普 通 的 函数 调用 表达 式 : 





printprops({x:1}); 
var total=distance(0,0,2,1)+distance(2,1,3,5); 
var probability=factorial(5)/factorial(13); 


在 一 个 调用 中 ， 每 个 参数 表达 式 〈 圆 括号 之 间 的 部 分 ) 都 会 计算 出 
一 个 值 ， 计 算 的 结果 作为 参数 传递 给 另外 一 个 函数 。 这 些 值 作为 实 参 传 
圳 给 声明 函数 时 定义 的 形 参 。 在 函数 体 中 存在 一 个 形 参 的 引用 ， 指 问 当 
前 传 入 的 实 参 列表 ， 通 过 它 可 以 获得 参数 的 值 。 


对 于 普通 的 函数 调用 ， 函 数 的 返回 值 成 为 调用 表达 式 的 值 。 如 果 该 
函数 返回 是 因为 解释 器 到 达 结尾 ， 返 回 值 就 是 undefined。 如 果 函 数 返 回 
是 因为 解释 器 执行 到 一 条 return 语 句 ， 返 回 值 就 是 return 之 后 的 表达 式 的 
值 ， 如 果 returmn 语 句 没 有 值 ， 则 返回 undefined。 


根据 ECMAScript 3 和 非 严格 的 ECMAScript 5 对 函数 调用 的 规定 ， 调 
用 上 下 文 〈this 的 值 ) 是 全 局 对 象 。 然 而 ， 在 严格 模式 下 ， 调 用 上 下 文 


则 是 undefined。 


以 函数 形式 调用 的 函数 通 第 不 使 用 this 关 键 字 。 不 过 ，"this" 可 以 用 
来 判断 当前 是 否 是 严格 模式 。 

















// 定 义 并 调用 一 个 函数 来 确定 当前 脚本 运行 时 是 否 为 严格 模式 


var strict=(function(){return!this;}()); 














8.2.2 ”方法 调用 


一 个 方法 无 非 是 个 保存 在 一 个 对 象 的 属性 里 的 JavaScript 函 数 。 如 果 
和 象 0， 则 可 以 用 下 面 的 代码 给 o 定 义 一 个 名 为 m0 的 
方法 : 





0.m=f; 





给 对 象 o 定 义 了 方法 m0， 调 用 它 时 就 像 这 样 : 





o.m(); 





或 者 ， 如 果 mO 需 要 两 个 实 参 ， 调 用 起 来 则 像 这 样 ， 





o.m(x,y); 





上 面 的 代码 是 一 个 调用 表达 式 : 它 包 括 一 个 函数 表达 式 o.m， 以 及 
两 个 实 参 表达 式 x 和 y， 疯 数 表达 式 本 里 就 是 一 个 属性 访问 表达 式 ( 见 
0 函数 被 当做 一 个 方法 ， 而 不 是 作为 一 个 普通 函数 

调 


对 方法 调用 的 参数 和 返回 值 的 处 理 ， 和 上 面 所 描述 的 普通 函数 调用 
完全 一 致 。 但 是 ， 方 法 调用 和 函数 调用 有 一 个 重要 的 区 别 ， 即 : 调用 上 
下 文 。 属 性 访问 表达 式 由 两 部 分 组 成 : 一 个 对 象 〈 本 例 中 的 o) 和 属性 
名 称 Cm) 。 在 像 这 样 的 方法 调用 表达 式 里 ， 对 象 o 成 为 调用 上 下 文 ， 
函数 体 可 以 使 用 关键 字 this 引 用 该 对 象 。 下 面 是 一 个 具体 的 例子 : 








var calculator={// 对 象 直 接 量 
operand1:1, 

operand2:1, 
add:function( ){// 注 意 this 关 键 字 的 用 法 ，this 指 代 当 前 对 象 
this,.result=this.operandi+this.operand2; 



































}; 
calculator .add( );// 这 个 方法 调用 计算 1+1 的 结果 
calculator.result//=>2 





大 多 数 方法 调用 使 用 点 符 写 来 访问 属性 ， 使 用 方 括号 的 属性 访问 
表达 式 ) 也 可 以 进行 属性 访问 操作 。 下 面 两 个 例子 都 是 函数 调用 : 








of"m"] (x,y);//o. Mm(x, es 种 写法 
a[9] (z)// 同 样 是 个 方法 这 里 假设 a[0] 是 一 个 函数 ) 
































方法 调用 可 能 包括 更 复杂 的 属性 访问 表达 式 : 

















customer .surname.toUpperCase();// 调 用 customer .surname 的 方法 
f().m();// 在 f( ) 调 用 结束 后 继续 调用 返回 值 中 的 方法 m( ) 


















































方法 和 this 关 键 字 是 面向 对 象 编程 范例 的 核心 。 任 何 函 数 只 要 作为 
方法 调用 实际 上 都 会 传 入 一 个 隐 陈 的 实 参 一 一 这 个 实 参 是 一 个 对 象 ， 方 
法 调用 的 母体 就 是 这 个 对 象 。 通 常 来 讲 ， 基 于 那个 对 象 的 方法 可 以 执行 
多 种 操作 ， 方 法 调用 的 语法 已 经 很 清晰 地 表明 了 函数 将 基于 一 个 对 象 进 
行 操作 ， 比 较 下 面 两 行 代码 : 











rect.setSize(width,height); 
setRectSize(rect,width,height); 





我 们 假设 这 两 行 代码 的 功能 完全 一 样 ， 它 们 都 作用 于 一 个 假定 的 对 
象 rect。 可 以 看 出 ， 第 一 行 的 方法 调用 语法 非常 清晰 地 表明 这 个 函数 执 
行 的 载体 是 rect 对 象 ， 函 数 中 的 所 有 操作 都 将 基于 这 个 对 象 。 


方法 链 


当 方 法 的 返回 值 是 一 个 对 象 ， 这 个 对 象 还 可 以 再 调用 它 的 方法 。 这 
种 方法 调用 序列 中 (通常 称 为 “ 链 ” 或 者 “级 联 ”) 每 次 的 调用 结果 都 是 另 
外 一 个 表达 式 的 组 成 部 分 。 比 如 ， 基 于 jQuery 库 (参见 第 19 章 ) ， 我 们 
常常 会 这 样 写 代 码 : 























// 找 到 所 有 的 header， 取 得 它们 id 的 映射 ， 转 换 为 数组 并 对 它们 进行 排序 
$(":header").map(function(){return this.id}).get().sort(); 

















当 方 法 并 不 需要 返回 值 时 ， 最 好 直接 返回 this。 如 果 在 设计 的 API 中 
一 直 采 用 这 种 方式 《每 个 方法 都 返回 this) ， 使 用 API 束 可 以 进行 “ 链 式 
调用 ”时 风 格 的 编程 ， 在 这 种 编程 风格 中 ， 只 要 指定 一 次 要 调用 的 对 象 
即 可 ， 余 下 的 方法 都 可 以 基于 此 进行 调用 : 








shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw(); 





不 要 将 方法 的 链 式 调用 和 构造 函数 的 链 式 调用 混为一谈 ，9.7.2 节 将 
会 讨论 构造 函数 的 链 式 调用 。 


需要 注意 的 是 ，this 是 一 个 关键 字 ， 不 是 变量 ， 也 不 是 属性 名 。 


JavaScript 的 语法 不 允许 给 this 赋 值 。 


和 变量 不 同 ， 关 键 字 this 没 有 作用 域 的 限制 ， 藤 套 的 函数 不 会 从 调 
用 它 的 函数 中 继承 this。 如 果 髓 套 函 数 作为 方法 调用 ， 其 this 的 值 指 回调 
用 它 的 对 象 。 如 果 授 套 函 数 作 为 函数 调用 ， 其 this 值 不 是 全 局 对 象 非 
严格 模式 下 ) 束 是 undefined (严格 模式 下 ) 。 很 多 人 误 以 为 调用 馈 套 函 
数 时 this 会 指 回调 用 外 层 函 数 的 上 下 文 。 如 果 你 想 访 问 这 个 外 部 函数 的 
this 值 ， 需 要 将 this 的 值 保存 在 一 个 变量 里 ， 这 个 变量 和 内 部 函数 都 同 在 
一 个 作用 域内 。 通 党 使 用 变量 self 来 保存 this， 比 如 : 








var 0={// 对 象 0 

m:function( ){// 对 象 中 的 方法 m( ) 

var self=this;// 将 this 的 值 保存 至 一 个 变量 中 
console.1og(this===o);// 输 出 true，this 就 是 这 个 对 象 0 
f() ;// 调 用 辅助 函数 f( ) 
function f(){// 定 义 一 个 散 套 函数 f() 
console.1log(this===0);//"false":this 的 值 是 全 局 对 象 或 undefined 
console .log(self===0);//"true":self 指 外 部 函数 的 this 值 

} 

} 


}; 
0.m( ) ;// 调 用 对 象 o 的 方法 m( ) 




































































在 8.7.4 节 的 例 8-5 中 有 var self=this 更 切合 实际 的 用 法 。 
8.2.3 ”构造 函数 调用 


如 果 函 数 或 者 方法 调用 之 前 带 有 关键 字 new， 它 就 构成 构造 函数 调 
用 (构造 函数 调用 在 4.6 节 和 6.1.2 节 有 简单 介绍 ， 第 9 章 会 对 构造 函数 做 
更 详细 的 讨论 ) 。 构 造 函 数 调用 和 普通 的 函数 调用 以 及 方法 调用 在 实 参 
处 理 、 调 用 上 下 文 和 返回 值 方面 都 有 不 同 。 


如 果 构 造 函 数 调用 在 圆 括号 内 包含 一 组 实 参 列表 ， 先 计算 这 些 实 参 
表达 式 ， 然 后 传 入 函数 内 ， 这 和 函数 调用 和 方法 调用 是 一 致 的 。 但 如 果 
构造 函数 没有 形 参 ，JavaScript 构 造 函 数 调用 的 语法 是 允许 省 略 实 参 列 表 
和 圆 括 写 的 。 凡 是 没有 形 参 的 构造 函数 调用 都 可 以 省 略 圆 括号 ， 比 如 ， 
下 面 这 两 行 代码 就 是 等 价 的 : 








Var o=new Object(); 
var o=new Object 





构造 函数 调用 创建 一 个 新 的 空 对 象 ， 这 个 对 象 继承 上 自 构 造 函数 的 
prototype 必 性。 构造 函数 试图 初始 化 这 个 新 创建 的 对 象 ， 并 将 这 个 对 象 
用 做 其 调用 上 下 文 ， 因 此 构造 函数 可 以 使 用 this 关 键 字 来 引用 这 个 新 创 
建 的 对 象 。 注 意 ， 尽 管 构 造 函数 看 起 来 像 一 个 方法 调用 ， 它 依然 会 使 用 
0 也 就 是 说 ， 在 表达 式 new o.m() 中 ， 调 用 上 
下 文 并 不 是 o。 


构造 函数 通常 不 使 用 retum 关 键 字 ， 它 们 通常 初始 化 新 对 象 ， 当 构 
造 函 数 的 函数 体 执行 完毕 时 ， 它 会 显 式 返 回 。 在 这 种 情况 下 ， 构 造 函 数 
调用 表达 式 的 计算 结果 就 是 这 个 新 对 象 的 值 。 然 而 如 果 构 造 函 数 显 式 地 
使 用 return 语 句 返回 一 个 对 象 ， 那 么 调用 表达 式 的 值 就 是 这 个 对 象 。 如 
打 构 造 函 数 使 用 return 语 句 但 没有 指定 返回 值 ， 或 者 返回 一 个 原始 值 ， 
那么 这 时 将 忽略 返回 值 ， 同 时 使 用 这 个 新 对 象 作 为 调用 结果 。 


8.2.4 间接 调用 


JavaScript 中 的 函数 也 是 对 象 ， 和 其 他 JavaScript 对 象 没 什么 两 样 ， 
函数 对 象 也 可 以 包含 方法 。 其 中 的 两 个 方法 cal0 和 applyO 可 以 用 来 间接 
地 调用 函数 。 两 个 方法 都 允许 显 式 指定 调用 所 需 的 this 值 ， 也 就 是 说 ， 
任何 函数 可 以 作为 任何 对 象 的 方法 来 调用 ， 哪 怕 这 个 函数 不 是 那个 对 象 
的 方法 。 两 个 方法 都 可 以 指定 调用 的 实 参 。ca _ 10 方法 使 用 它 自 有 的 实 
参 列 表 作 为 函数 的 实 参 ，apply0 方 法 则 要 求 以 数组 的 形式 传 入 参数 。 
8.7.3 节 会 有 关于 call0 和 apply0) 方 法 的 详细 讨论 。 


8.3 ”本 数 的 实 参 和 形 参 


JavaScript 中 的 函数 定义 并 未 指定 函数 形 参 的 类 型 ， 函 数 调 用 也 未 对 
传 入 的 实 参 值 做 任何 类 型 检查 。 实 际 上 ，JavaScript 函 数 调用 甚至 不 检查 
传 入 形 参 的 个 数 。 下 面 几 节 将 会 讨论 当 调 用 函数 时 的 实 参 个 数 和 声明 的 
形 参 个 数 不 匹 配 时 出 现 的 状况 ， 同 样 说 明了 如 何 显 式 测试 函数 实 参 的 类 
型 ， 以 避免 非法 的 实 参 传 入 函数 。 


8.3.1 可 选 形 参 
当 调 用 函数 的 时 候 传 入 的 实 参 比 函数 声明 时 指定 的 形 参 个 数 要 少 ， 


剩 下 的 形 参 都 将 设置 为 undefined 值 。 因 此 在 调用 函数 时 形 参 是 否 可 选 以 
及 是 否 可 以 省 略 应 当 保 持 较 好 的 适应 性 。 为 了 做 到 这 一 点 ， 应 当 给 省 略 











的 参数 赋 一 个 合理 的 默认 值 ， 来 看 这 个 例子 : 




















// 将 对 象 o 中 可 枚 举 的 属性 名 追加 至 数组 a 中 ， 并 返回 这 个 数组 a 
// 如 果 省 略 a， 则 创建 一 个 新 数组 并 返回 这 个 新 数组 
function getPropertyNames(o,/*optional*/a)t{ 

































































if(a===undefined)a=[];// 如 果 未 定义 ， 则 使 用 新 数组 
for(var property in o)a.push(property); 
return a; 





























} 

// 这 个 函数 调用 可 以 传 入 1 个 或 2 个 实 参 

var a=getPropertyNames(o);// 将 o 的 属性 存储 到 一 个 新 数组 中 
getPropertyNames(p,a);// 将 p 的 属性 追加 至 数组 a 中 











读 

















如 果 在 第 一 行 代 码 中 不 使 用 计 语 多， 可 以 使 用 “ 术 "运算 符 ， 这 是 一 种 
习惯 用 法 绽 : 





a=al |[]; 





mn 一 个 实 参 是 真 值 的 话 
就 返回 第 一 个 实 参 ; 否则 返回 第 二 个 实 参 。 在 这 个 场景 下 ， 如 果 作 为 第 
二 实 参 传 入 任意 对 象 1 如 果 省 略 掉 第 二 
个 实 参 《或 者 传递 null 以 及 其 他 任何 假 值 ) ， 那 么 就 新 创建 一 个 空 = 数 一 
组 ， 并 赋值 给 a。 


要 注意 的 是 ， 当 用 这 种 可 选 实 参 来 实现 函数 时 ， he 
放 在 ， 那些 调用 你 的 函数 的 程序 员 是 没 办 法 省 略 第 
0 下 实 参 的 ， 它 必须 将 undefined 作 为 第 一 人 1 实 参 显 式 传 
是。 同样 注意 在 函数 定义 中 使 用 注释 /*optional*/ 来 强调 形 参 是 可 选 


8.3.2 ”可 变 长 的 实 参 列表 : 实 参 对 象 


当 调 用 函数 的 时 候 传 入 的 实 参 个 数 超过 函数 定义 时 的 形 参 个 数 时 ， 
没有 办 法 直接 获得 未 命名 值 的 引用 。 参 数 对 象 解决 了 这 个 问题 。 在 函数 
体内 ， 标 识 符 arguments 是 指向 实 参 对 象 的 引用 ， 实 参 对 象 是 一 个 类 数组 
对 象 〈 参 照 7. 0 这 样 可 以 通过 数字 下 标 就 能 访问 传 入 函数 的 实 参 
值 ， 而 不 用 非 要 通过 名 字 来 得 到 实 参 。 


假设 定义 了 函数 f， 它 的 实 参 只 有 一 个 x。 
两 个 实 参 ， 第 一 个 实 参 可 以 通过 参数 名 x 来 获得 ， 也 可 以 通 

















arguments[0] 来 得 到 。 第 二 个 实 参 只 能 通过 arguments[1] 来 得 到 。 此 外 ， 
和 真正 的 数组 一 样 ，arguments 也 包含 一 个 length 属 性 ， 用 以 标识 其 所 包 
含 元 素 的 个 数 。 因 此 ， 如 果 调 用 函数 {0 时 传 入 两 个 参数 ， 
arguments.length 的 值 就 是 2。 


实 参 对 象 在 很 多 地 方 都 非常 有 用 ， 下 面 的 例子 展示 了 使 用 它 来 验证 
实 参 的 个 数 ， 从 而 调用 正确 的 逻辑 ， 因 为 JavaScript 本 号 不 会 这 么 做 : 








function f(x,y,z) 





{ 

// 首 先 ， 验 证 传 入 实 参 的 个 数 是 否 正确 

if(arguments.length!=3){ 

throw new Error("function f called with"+arguments.length+ 
"arguments,but it expects 3 arguments."); 
































} 
六 
} 


入 


再 执行 函数 的 其 他 逻辑 ,, ， 

















需要 注意 的 是 ， 通 常 不 必 像 这 样 检查 实 参 个 数 。 大 多 数 情况 下 
JavaScript 的 默认 行为 是 可 以 满足 需要 的 : 省 略 的 实 参 都 将 是 undefined， 
多 出 的 参数 会 自动 省 略 。 


实 参 对 象 有 一 个 重要 的 用 处 ， 束 是 让 函数 可 以 操作 任意 数量 的 实 
参 。 下 面 的 函数 就 可 以 接收 任意 数量 的 实 参 ， 并 返回 传 入 实 参 的 最 大 值 
(内 置 函数 Max.max() 的 功能 与 之 类 似 ): 








function max(/*...*/)t{ 

var max=Number .NEGATIVE_INFINITY;// 遍 历 实 参 ， 查 找 并 记 住 最 大 值 
for(var i=0;i<arguments.length;i++) 
if(arguments[I]>max)max=arguments[i];// 返 回 最 大 值 

return max; 





























} 
var largest=max(1,10,100,2,3,1000,4,5,10000,6);//=>10000 





类 似 这 种 函数 可 以 接收 任意 个 数 的 实 参 ， 这 种 函数 也 称 为 “不 定 实 
参 函 数 ”(varargs function〉 则 ， 这 个 术语 源 自古 老 的 C 语 言 。 

注意 ， 不 定 实 参 函 数 的 实 参 个 数 不 能 为 零 ， arguments[] 对 象 最 运 合 
的 应 用 场景 是 在 这 样 一 类 函数 中 ， 这 类 函数 包含 固定 个 数 的 命名 和 必 知 
参数 ， 以 及 随后 个 数 不 定 的 可 选 实 参 。 


记 住 ，arguments 并 不 是 真正 的 数组 ， 它 是 一 个 实 参 对 象 。 每 个 实 参 


VS 


对 象 部 包含 以 数字 为 索引 的 一 组 元 素 以 及 length 属 性 ， 但 它 毕 竟 不 是 真 
正 的 数组 。 可 以 这 样 理 解 ， 它 是 一 个 对 象 ， 只 是 碰巧 具有 以 数字 为 索引 
的 属性 。 参照 7.11 节 以 获得 更 多 关于 类 数组 对 象 的 信息 。 


数组 对 象 包含 一 个 非 同 寻常 的 特性 。 在 非 严 格 模 式 下 ， 当 一 个 函数 
包含 若干 形 参 ， 实 参 对 象 的 数组 元 素 是 函数 形 参 所 对 应 实 参 的 别名 ， 实 
参 对 象 中 以 数字 索引 ， 并 且 形 参 名 称 可 以 认为 是 相同 变量 的 不 同 命 名 。 
通过 实 参 名 字 来 修改 实 参 值 的 话 ， 通 过 arguments[] 数 组 也 可 以 获取 到 更 
改 后 的 值 ， 下 面 这 个 例子 清楚 地 说 明了 这 一 点 : 

















function f(x){ 

console.1log(x);// 输 出 实 参 的 初始 值 
arguments[0]=null;// 修 改 实 参 数组 的 元 素 同 样 会 修改 x 的 值 
console.10g(x); // 输 出 "n LL" 

} 











如 果实 参 对 象 是 一 个 普遍 数组 的 话 ， 第 二 条 console.log(x) 语 句 的 结 
果 绝 对 不 会 是 null， 在 这 个 例子 中 ， argements[0] 和 x 指 代 局 同一 个 值 ， 修 
改 其 中 一 个 的 值 会 影响 到 另 一 个 。 


在 ECMAScript 5 中 移 除 了 实 参 对 象 的 这 个 特殊 特性 。 在 严格 模式 下 
还 有 一 点 4 和 非 产 格 模式 下 相 比 的 ) 不 同 ， 在 非 严 格 模式 中 ， 函 数 里 的 
arguments 仪 仅 是 一 个 标识 符 ， 在 严格 模式 中 ， 它 变 成 了 一 个 保留 字 。 A 
格 模式 中 的 函数 无 法 使 用 arguments 作 为 形 参 名 或 局 部 变量 名 ， 也 不 能 
arguments 赋 值 。 











callee 和 caller 属 性 


除了 数组 元 素 ， 实 参 对 象 还 定义 了 callee 和 caller 属 性 。 在 
ECMAScript 5 严格 模式 中 ， 对 这 两 个 属性 的 读 写 操作 都 会 产生 一 个 类 型 
错误 。 而 在 非 严 格 模 式 下 ，ECMAScript 标 准 规范 规定 callee 属 性 指 代 当 

前 正在 执行 的 函数 。 caller 是 非 标准 的 ， 但 大 多 数 浏 览 器 都 实现 了 这 个 
属性 ， 它 指 代 调用 当前 正在 执行 的 函数 的 函数 。 通 过 caller 属 性 可 4 
问 调 用 栈 。callee 属 性 在 茶 些 时 候 会 非常 有 用 ， 比 如 在 匿名 函数 中 通 
callee 来 递归 地 调用 上 自身 。 

















Var factorial=function(x){ 
if(x==1)return 1; 
return x*arguments.callee(x-1); 


}; 





8.3.3 ”将 对 象 属性 用 做 实 参 


当 一 个 函数 包含 超过 三 个 形 参 时 ， 对 于 程序 员 来 说 ， 要 记 住 调用 函 
数 中 实 参 的 正确 顺序 实在 让 人 头疼 。 每 次 调用 这 个 函数 时 都 要 不 厌 其 烦 
地 查阅 文档 ， 为 了 不 让 程序 员 每 次 都 翻阅 手册 这 么 肤 烦 ， 最 好 通过 名 / 
值 对 的 形式 来 传 入 参数 ， 这 样 参 数 的 顺序 就 无 关 紧 要 了 。 为 了 实现 这 种 
风格 的 方法 调用 ， 定 义 函数 的 时 候 ， 传 入 的 实 参 都 写 入 一 个 单独 的 对 象 
之 中 ， 在 调用 的 时 候 传 入 一 个 对 象 ， 对 象 中 的 名 / 值 对 是 真正 需要 的 实 
参数 据 。 下 面 的 代码 就 展示 了 这 种 风格 的 函数 调用 ， 这 种 写法 允许 在 函 
数 中 设置 省 略 参数 的 默认 值 : 
































// 将 原始 数组 的 length 元 素 复 制 至 目标 数组 

// 开 始 复制 原始 数组 的 from_start 元 素 

// 并 且 将 其 复制 至 目标 数组 的 to_start 中 

// 要 记 住 实 参 的 顺序 并 不 容易 

function 
arraycopy(/*array*/from,/*index*/from start,/*array*/to,/*index*/to_start, 

/*integer*/length) 

































































{ 
// 逻 辑 代 码 


// 这 个 版 本 的 实现 效率 稍微 有 些 低 ， 但 你 不 必 再 去 记 住 实 参 的 顺序 
// 并 且 from_start 和 to_start 都 默认 为 9 
function easycopy(args)t 
arraycopy(args.from, 
args.from_start||10,// 注 意 这 里 设置 了 默认 值 
args.to, 
args.to_start||0,args.1length); 


































































































} 

// 来 看 如 何 调用 easycopy() 

var a=[1,2,3,4],b=[]; 
easycopy({from:a,to:b,1length:4}); 








8.3.4” 实 参 类 型 

JavaScript 方 法 的 形 参 并 未 声明 类 型 ， 在 形 参 传 入 函数 体 之 前 也 未 做 
任何 类 型 检查 。 可 以 采用 语义 化 的 单词 来 给 函数 实 参 命名 ， 或 者 像 刚才 
的 示例 代码 中 的 arraycopy0 方 法 一 样 给 实 参 补充 注释 ， 以 此 使 代码 自 文 
档 化 ， 对 于 可 选 的 实 参 来 说 ， 可 以 在 注释 中 补充 一 下 “这 个 实 参 是 可 选 
的 >”。 当 一 个 方法 可 以 接收 任意 数量 的 实 参 时 ， 可 以 使 用 省 略 号 : 








function max(/*number...*/){/* 代 码 区 */} 





3.8 ”市 已 经 提 到 ，JavaScript 在 必要 的 时 候 会 进行 类 型 转换 。 因 此 
如 果 函 数 期 望 接收 一 个 字符 串 实 参 ， 而 调用 函数 时 传 入 其 他 类 型 的 值 ， 
所 传 入 的 值 会 在 函数 体内 将 其 用 做 字符 串 的 地 方 转 换 为 字符 串 类 型 。 所 
有 的 原始 类 型 都 可 以 转换 为 字符 串 ， 所 有 的 对 象 都 包含 toString() 方 法 
《尽管 不 一 定 有 用 ) ， 上 所 以 这 种 场景 下 是 不 会 有 任何 错误 的 。 


然而 事情 不 总 是 这 样 ， 回 头 看 一 下 刚才 提 到 的 arraycopy0) 方 法 。 这 
个 方法 期 望 它 的 第 一 个 实 参 是 一 个 数组 。 当 传 入 一 个 非 数组 的 值 作为 第 
一 个 实 参 时 《〈 通 第 会 传 入 类 数组 对 象 ) ， 尽 管 看 起 来 是 没 问 题 的 ， 实 际 
上 会 出 错 。 除 非 所 写 的 函数 是 只 用 到 一 两 次 的 “用 完 即 丢 ? 函 数 ， 你 应 当 
添加 类 似 的 实 参 类 型 检查 逻辑 ， 因 为 宁愿 程序 在 传 入 非法 值 时 报错 ， 也 
不 愿 非 法 值 导致 程序 在 执行 时 报错 ， 相 比 而 言 ， 逻 辑 执行 时 的 报错 消 奶 
不 其 清晰 且 更 难处 理 。 下 面 这 个 例子 中 的 函数 就 做 了 这 种 类 型 检查 。 注 
意 这 里 使 用 了 7.11 市 的 isArrayLike() 函 数 : 











// 返 回 数组 〈 或 类 数组 对 象 ) a 的 元 素 的 累加 和 

// 数 组 a 中 必须 为 数字 、null 和 undefined 的 元 素 都 将 忽略 
function sum(a)t{ 

if(isArrayLike(a))t 

Var total=0; 

for(var i=0;i<a.length;i++){// 遍 历 所 有 元 素 

var element=a[i]; 
if(element==null)continue;// 跳 过 null 和 undefined 
if(isFinite(element))total+=element,; 

else throw new Error("sum():elements must be finite numbers"); 




















return total; 


} 
else throw new Error("sum():argument must be array-like"); 


} 





这 里 的 sum() 方 法 进行 了 非常 严格 的 实 参 检查 ， 当 传 入 非法 的 值 时 
会 给 出 容易 看 全 的 错误 提示 信息 。 但 当 涉 及 类 数组 对 象 和 真正 的 数组 
(不 考虑 数组 元 素 是 否 是 null 还 是 undefined) ， 这 种 做 法 带 来 的 灵活 性 
其 实 并 不 大 。 


JavaScript 是 一 种 非常 灵活 的 弱 类 型 语言 ， 有 时 适合 编写 实 参 类 型 和 
实 参 个 数 的 不 确定 性 的 函数 。 接 下 来 的 flexisum(0) 方 法 就 是 这 样 〈 可 能 
向 了 一 个 极端 ) 。 比 如 ， 它 可 以 接收 任意 数量 的 实 参 ， 并 可 以 递归 地 处 
理 实 参 是 数组 的 情况 ， 这 样 的 话 ， 它 就 可 以 用 做 不 定 实 参 函 数 或 者 实 参 
是 数组 的 本 数 。 此 外 ， 这 个 方法 尽 可 能 的 在 狗 出 异常 之 前 将 者 数字 转交 
5 数字 : 


























function flexisum(a){ 

Var totalL=0 

for(var i=0;i<arguments.Jlength;i++){ 

var element=arguments[i],n; 
if(element==null)continue;// 忽 略 null 和 undefined 实 参 
if(isArray (element ))// 如 果实 参 是 数组 
n=flexisum.apply(this,element );// 递 归 地 计算 累加 和 

else if(typeof element==="function'" )// 和 否则 ， 如 果 是 函数 ., . 
n=Number (element());// 调 用 它 并 做 类 型 转换 

else 
n=Number (element ) ;// 和 否则 直接 做 类 型 转换 
if(isNaN(n) )// 如 果 无 法 转换 为 数字 ， 则 抛 出 异常 

throw Error("flexisum():can't convert"+element+"to number"); 
total+=n;// 人 否则 ， 将 n 累 加 至 total 


























return total; 





8.4 作为 值 的 函数 


半数 可 以 定义 ， 也 可 以 调用 ， 这 是 函数 最 重要 的 特性 。 函 数 定义 和 
调用 是 JavaScript 的 词法 特性 ， 对 于 其 他 大 多 数 编程 语言 来 说 亦 是 如 此 。 
然而 在 JavaScript 中 ， 函 数 不 仅 是 一 种 语法 ， 也 是 值 ， 也 就 是 说 ， 可 以 将 
函数 赋值 给 变量 ， 存 储 在 对 象 的 属性 或 数组 的 元 素 中 ， 作 为 参数 传 入 男 
外 一 个 函数 等 局 。 


为 了 便于 理解 JavaScript 中 的 函数 是 如 何 用 做 数据 的 以 及 JavaScript 
语法 ， 来 看 一 下 这 样 一 个 函数 定义 : 








function square(x){return x*x,;} 





这 个 定义 创建 一 个 新 的 函数 对 象 ， 并 将 其 赋值 给 变量 square。 也 数 
的 名 字 实 际 上 是 看 不 见 的 ， 它 〈square) 仅仅 是 变量 的 名 字 ， 这 个 变量 
指 代 函数 对 象 。 函 数 还 可 以 赋值 给 其 他 的 变量 ， 并 且 仍 可 以 正常 工作 : 














var s=square;// 现 在 SsS 和 square 指 代 同 一 个 函数 
square(4);//=>>16 
s(4);//=>16 





除了 可 以 将 函数 赋值 给 变量 ， 同 样 可 以 将 函数 赋值 给 对 象 的 属性 。 
当 函 数 作为 对 象 的 属性 调用 时 ， 函 数 就 称 为 方法 : 





var o={square:function(x){return x*x;}};// 对 象 直接 量 











var y=0.square(16);//y 等 于 256 





图 数 其 全 不 需要 市 名 字 ， 当 把 它们 赋值 给 数组 元 系 时 : 

















var a=[function(x){return x*x;},20];// 数 组 直接 量 
a[o](a[1]);//==>400 





最 后 一 句 代 码 看 起 来 很 奇怪 ， 但 的 确 是 合法 的 函数 调用 表达 式 ! 
例 8-2 展 示 了 将 函数 用 做 值 时 的 一 些 例子 ， 这 段 代 码 可 能 会 难 读 一 





些 ， 但 注释 解释 了 代码 的 具体 合 义 : 


例 8-2: 将 函数 用 做 值 

















// 在 这 里 定义 一 些 简 单 的 函数 

function add(x,y){return x+y;} 

function subtract(x,y){return x-y;} 

function multiply(x,y){return x*y;} 

function divide(x,y)f{return x/y;}// 这 里 的 函数 以 上 面 的 某 个 函数 作为 参数 
// 并 给 它 传 入 两 个 操作 数 然后 调用 它 

function operate(operator,operandi1, operand2){ 

return operator(operand1,operand2 ) ; 

































































} 
// 这 行 代码 所 示 的 函数 调用 实际 上 计算 了 (2+3)+(4*5) 的 值 
var i=operate(add,operate(add,2,3),operate(multiply,4,5));// 我 们 为 这 个 例子 重复 实现 一 




































































































































































个 简单 的 函数 
// 这 次 实现 使 用 函数 直接 量 ， 这 些 函 数 直接 量 定 义 在 一 个 对 象 直接 量 中 
var operators={ 
add:function(x,y){return x+y;}, 
subtract:function(x,y){return x-y;}, 
multiply:function(x,y){return x*y;}, 
divide:function(x,y){return x/y;}, 
pow: Math .pow// 使 用 预定 义 的 函数 
};// 这 个 函数 接收 一 个 名 字 作 为 运算 符 ， 在 对 象 中 查找 这 个 运算 符 
// 然 后 将 它 作 用 于 所 提供 的 操作 数 
// 注 意 这 里 调用 运算 符 函 数 的 语法 
function operate2(operation,operand1, operand2){ 
if(typeof operators[operation]==="function") 
return operators[operation](operand1, operand2); 
else throw"unknown operator"; 
} 
// 这 样 来 计算 ("hello"+""+"world") 的 人 
var j=operate2("add", "hello",operate2("add","", "world"));// 使 用 预定 义 的 函数 
Math. pow( ) 


Var k=operate2("pow",10,2); 





这 里 是 将 函数 用 做 值 的 另外 一 个 例子 ， 考 虑 一 下 Array.sort() 方 法 。 








这 个 方法 用 来 对 数组 元 素 进 行 排序 。 因 为 排序 的 规则 有 很 多 馈 〈 基 于 数 


值 大 小 、 字 母 表 顺 序 、 日 期 大 小 、 从 小 到 大 、 从 大 到 小 等 ) ，sort0 方 法 
可 以 接收 一 个 函数 作为 参数 ， 用 来 处 理 具体 的 排序 操作 。 这 个 函数 的 作 
用 非常 简单 ， 对 于 任意 两 个 值 都 返回 一 个 值 ， 以 指定 它们 在 排序 后 的 数 
组 中 的 先后 顺序 。 这 个 函数 参数 使 得 Array.sort(0) 具 有 更 完美 的 通用 性 和 
展 性 ， 它 可 以 对 任何 类 型 的 数据 进行 任意 排序 。7.8.3 市 有 示例 


自 定义 函数 属性 


JavaScript 中 的 函数 并 不 是 原始 值 ， 而 是 一 种 特殊 的 对 象 ， 也 就 是 
说 ， 函 数 可 以 拥有 属性 。 当 函数 需要 一 个 “静态 ”变量 来 在 调用 时 保持 某 
到 > 直下 2 ee 全 函数 定义 属性 ， 而 不 是 定义 全 局 变量 ， 
显然 定义 全 局 变量 会 让 命名 空间 变 得 更 加 杂乱 无 章 。 比 如 ， 假 设 你 想 写 
一 个 返 合 二 个 唯一 倪 闭 的 员 台 不 管 在 哪里 调用 函数 都 会 返回 这 个 整 
数 。 而 函数 不 能 两 次 返回 同一 个 值 ， 为 了 做 到 这 一 点 ， 函 数 必须 能 够 跟 
踪 它 每 次 返回 的 值 ， 而 且 这 些 值 的 信息 需要 在 不 同 的 函数 调 过 程 中 持久 
化 。 可 以 将 这 些 信 息 存 放 到 全 局 变量 中 ， 但 这 并 不 是 必需 的 ， 因 为 这 个 
信息 仅仅 是 函数 本 身 用 到 的 。 最 好 将 这 个 信息 保存 到 函数 对 象 的 一 个 属 
a 这 样 一 个 函数 ， 每 次 调用 函数 都 会 返回 一 
| -的 至 妈 : 



































// 初 始 化 函数 对 象 的 计数 器 属性 
// 由 于 函数 声明 被 提前 了 ， 因 此 这 里 是 可 以 在 函数 声明 
// 之 前 给 它 的 成 员 赋 值 的 
unidqueInteger,counter=0;// 每 次 调用 这 个 函数 都 会 返回 一 个 不 同 的 整数 
// 它 使 用 一 个 属性 来 记 住 下 一 次 将 要 返回 的 值 

function uniqueInteger(){ 

return uniqueInteger.counter++;// 先 返回 计数 器 的 值 ， 然 后 计数 器 自 增 1 
} 


斌 


























































































































来 看 妨 外 一 个 例子 ， 下 面 这 个 国 数 factorial0 使 用 了 日 身 的 属性 (将 
目 身 当做 数组 来 对 符 ) 来 缓存 上 一 次 的 计算 结果 : 

















// 计 算 阶 乘 ， 并 将 结果 缓存 至 函数 的 属性 中 
function factorial(n){ 
if(isFinite(n)&&n>o&&n==Math . 
if(!(n in factorial))// 如 果 没 有 缓存 结 
factorial[n]=n*factorial(n-1); // 计 算 结果 并 缓存 之 
return factorial[n];// 返 回 缓存 结果 























} 
else return NaN;// 如 果 输 入 有 误 




















} 
factorial[1]=1;// 初 始 化 缓存 以 保存 这 种 基本 情况 


8.5 ”作为 命名 空间 的 函数 


3.10.1 节 介 绍 了 JavaScript 中 的 函数 作用 域 的 概念 : 在 函数 中 声明 
的 变量 在 整个 函数 体内 都 是 可 见 的 《包括 在 众 套 的 函数 中 ) ， 在 函数 的 
外 部 是 不 可 见 的 。 不 在 任何 函数 内 声明 的 变量 是 全 局 变量 ， 在 整个 
JavaScript 程 序 中 都 是 可 见 的 。 在 JavaScript 中 是 无 法 声明 只 在 一 个 代码 
块 内 可 见 的 变量 的 乌 ， 基 于 这 个 原因 ， 我 们 常常 简单 地 定义 一 个 函数 用 
在 这 个 命名 空间 内 定义 的 变量 都 不 会 污染 到 全 局 命 
| 


比如 ， 假 设 你 写 了 一 段 JavaScript 模 块 代码 ， 这 段 代码 将 要 用 在 不 同 
的 JavaScript 程 序 中 (对 于 客户 端 JavaScript 来 讲 通 常 是 用 在 各 种 各 样 的 
网 页 中 ) 。 和 大 多 数 代 码 一 样 ， 假 定 这 段 代码 定义 了 一 个 用 以 存储 中 间 
计算 结果 的 变量 。 这 样 问题 就 来 了 ， 当 模块 代码 放 到 不 同 的 程序 中 运行 
时 ， 你 无 法 得 知 这 个 变量 是 否 已 经 创建 了 ， 如 果 已 经 存在 这 个 变量 ， 那 
么 将 会 和 代码 发 生 冲 突 。 解 决 办 法 当然 是 将 代码 放 入 一 个 函数 内 ， 然 后 
调用 这 个 函数 。 这 样 全 局 变量 就 变 成 了 函数 内 的 局 部 变量 : 









































function mymodule(){// 模 块 代码 
// 这 个 模块 所 使 用 的 所 有 变量 都 是 局 部 变量 
// 而 不 是 污染 全 局 命名 空间 














到 





























} 
mymodule( ) ;// 不 要 忘 了 还 要 调用 这 个 函数 





这 上 段 代 码 仅仅 定义 了 一 个 单独 的 全 局 变量 : 名 叫 "mymodule" 的 郴 
Tn 可 以 直接 定义 一 个 匿名 函数 ， 并 在 单个 表达 式 中 
调用 它 : 











(function(){//mymodule( ) 函 数 重 写 为 匿名 的 函数 表达 式 
// 模 块 代码 
}() ) ; /7 结束 函 数 定 义 并 立即 调用 它 
































这 种 定义 匿名 函数 并 立即 在 单个 表达 式 中 调用 它 的 写法 非常 常见 ， 
已 经 成 为 一 种 惯用 法 了 。 注 意 上 面 代 码 的 圆 括号 的 用 法 ，function 之 前 
的 左 圆 括号 是 必需 的 ， 因 为 如 果 不 写 这 个 左 圆 括号 ，JavaScript 解 释 器 会 
试图 将 关键 字 function 解 析 为 函数 声明 语句 。 使 用 圆 括号 JavaScript 解 释 
器 才 会 正确 地 将 其 解析 为 函数 定义 表达 式 。 使 用 圆 括号 是 习惯 用 法 ， 尽 














管 有 些 时 候 没有 必要 也 不 应 当 省 略 。 这 里 定义 的 函数 会 立即 调用 。 


例 8-3 展 示 了 这 种 命名 空间 技术 。 它 定义 一 个 返回 extend0 函 数 的 匿 
名 函数 ， 正 如 在 例 6-2 中 所 展示 的 那样 ， 匿 名 函数 中 的 代码 检测 了 是 否 
出 现 了 一 个 众所周知 的 耻 bug， 如 果 出 现 了 这 个 bug， 就 返回 一 个 带 补 丁 
的 函数 版 本 。 此 外 ， 这 个 匿名 函数 命名 空间 用 来 隐藏 一 组 属性 名 。 


例 8-3: 特定 场景 下 返回 带 补 丁 的 extend0 版 本 




















// 定 义 一 个 扩展 函数 ， 用 来 将 第 二 个 以 及 后 续 参 数 复制 至 第 一 个 参数 
// 这 里 我 们 处 理 了 IE bug: 在 多 数 IE 版 本 中 
// 如 果 o 的 属性 拥有 一 个 不 可 枚 举 的 同名 属性 ， 则 for/in 循 环 

// 不 会 枚 举 对 象 o 的 可 枚 举 属性 ， 也 就 是 说 ， 将 不 会 正确 地 处 理 诸如 toString 的 属性 
// 除 非 我 们 显 式 检测 它 
var extend=(function(){// 将 这 个 函数 的 返回 值 赋值 给 extend 
// 在 修复 它 之 前 ， 首 先 检查 是 否 存在 bug 

for(var p in{toString:null}){// 如 果 代 码 执行 到 这 里 ， 那 么 for/in 循 环 会 正确 工作 并 返 民 
// 一 个 简单 版 本 的 extend( ) 函数 

return function extend(o){ 

for(var i=1;i<arguments.length;i++){ 

var source=arguments[i]; 

for(var prop in source)o[prop]=source[prop]; 

































































六 
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return o; 


}; 


} 

// 如 果 代 码 执行 到 这 里 ， 说 明 for/in 循 环 不 会 枚 举 测试 对 象 的 toString 属 性 
// 因 此 返回 另 一 个 版 本 的 extend( ) 函 数 ， 这 个 函数 显 式 测 试 

//0bject .prototype 中 的 不 可 枚 举 属性 
return function patched extend(o){ 

for(var i=1;i<arguments.Jlength;i++){ 

var source=arguments[i];// 复 制 所 有 的 可 枚 举 属性 

for(var prop :in source)o[prop]=source[prop];// 现 在 检查 特殊 属 1 
for(var j=0;j<=<protoprops.1length;j++){ 

prop=protoprops[j]; 
if(source.hasOwnProperty(prop))o[lprop]=source[prop]; 


} 

return o; 

};// 这 个 列表 列 出 了 需要 检查 的 特殊 属性 

Var protoprops= 
[ toString"，"valueof" "constructor","hasOwnProperty","isPrototypeOof", "propertyIsEnumera 


}()); 


















































讼 











8.6 ” 闭 包 


和 其 他 大 多 数 现代 编程 语言 一 样 ，JavaScript 也 采用 词法 作用 域 
(lexical scoping) ， 也 就 是 说 ， 函 数 的 执行 依赖 于 变量 作用 域 ， 这 个 作 
用 域 是 在 函数 定义 时 决定 的 ， 而 不 是 函数 调用 时 决定 的 。 为 了 实现 这 种 





词法 作用 域 ， JavaScript 孙 数 对 象 的 门 部 状态 不 仅 包含 函数 的 代码 逻辑 ， 

还 必须 引用 当前 的 作用 域 链 《在 继续 阅读 后 续 的 章节 之 前 ， 应 当 复 习 一 
下 3.10 节 和 3.10.3 节 中 讲 到 的 变量 作用 域 和 作用 域 链 的 概念 ) 。 函 数 对 

象 可 以 通过 作用 域 链 相互 关联 起 来 ， 函 数 体 内 部 的 变量 都 可 以 保存 在 函 
数 作用 域内 ， 这 种 特性 在 计算 机 科学 文献 中 称 为 “ 闭 包 ”Ul。 


从 技术 的 角度 讲 ， 所 有 的 JavaScript 函 数 都 是 财 包 : 它们 都 是 对 象 ， 
它们 都 关联 到 作用 域 链 。 定 义 大 多 数 函 数 时 的 作用 域 链 在 调用 函数 时 依 
然 有 效 ， 但 这 并 不 影响 朵 包 。 当 调用 函数 时 闭 包 所 指 同 的 作用 域 链 和 秆 
义 函 数 时 的 作用 域 链 不 是 同一 个 作用 域 链 时 ， 事 情 就 变 得 非常 微妙 。 当 
一 个 函数 舱 套 了 男 外 一 个 函数 ， 外 部 函数 将 骸 套 的 冰 数 对 象 作为 返回 值 
返回 的 时 候 往 往 会 发 生 这 种 事情 。 有 很 多 强大 的 编程 技术 都 利用 到 了 这 
类 藤 套 的 函数 闭 包 ， 以 全 于 这 种 编程 模式 往 JavaScript 中 非常 帝 见 。 当 株 
第 一 次 碰 到 闭 包 时 可 能 会 觉得 非常 让 人 费解 ， 一 旦 你 理解 掌握 了 闭 包 之 
后 ， 就 能 非常 自如 地 使 用 它 了 ， 了 解 这 一 点 至 关 重 要 。 


理解 闭 包 首 先 要 了 解散 套 函 数 的 词法 作用 域 规 则 。 看 一 下 这 上 段 代 码 
(这 段 代 码 和 你 刚 在 3.10 节 中 看 到 的 代码 非常 类 似 》: 
































var scope="global scope";// 全 局 变量 
function checkscope( ){ 

var scope="local scope";// 局 部 变量 
function f(){freturn scope;}// 在 作用 域 中 返回 这 个 值 
return f(); 


























checkscope( )//=>>"local scope" 


checkscope0O 函 数 声 明了 一 个 局 部 变量 ， 2 函数 f0D， 函 
数 f() 返 回 了 这 个 变量 的 值 ， 最 后 将 函数 f() 的 执行 结果 返回 。 你 应 当 非 常 
rs A ee local scope"。 现 在 我 们 对 这 段 代码 
做 一 点 改动 。 你 知道 这 段 代 码 返回 什么 吗 ? 





var scope="global scope";// 全 局 变量 
function checkscope(){ 

var scope="local scope";// 局 部 变量 
function f(){freturn scope;}// 在 作用 域 中 返回 这 个 值 
return f; 





























} 
checkscope( )()// 返 回 值 是 什么 ? 








在 这 段 代 人 码 中 ， 我 们 将 函数 内 的 一 对 圆 括号 移动 到 了 checkscope0) 








之 后 。checkscope(O 现 在 仅仅 返回 函数 内 和 藤 套 的 一 个 函数 对 象 ， 而 不 是 
直接 返回 结果 。 在 定义 函数 的 作用 域外 面 ， 调 用 这 个 般 套 的 函数 〈 包 含 
最 后 一 行 代码 的 最 后 一 对 圆 括号 ) 会 发 生 什 么 事情 呢 ? 


回想 一 下 词法 作用 域 的 基本 规则 : JavaScript 函 数 的 执行 用 到 了 作用 
域 链 ， 这 个 作用 域 链 是 函数 定义 的 时 候 创建 的 。 峰 套 的 函数 {0 定义 在 这 
个 作用 域 链 里 ， 其 中 的 变量 scope 一 定 是 局 部 变量 ， 不 管 在 何 时 何 地 执 
行 函 数 f{()， 这 种 绑 定 在 执行 f0 时 依然 有 效 。 因 此 最 后 一 行 代码 返 
回 "local scope"， 而 不 是 "global scope"。 简 言 之 ， 闭 包 的 这 个 特性 强大 到 
让 人 上 吃惊: 它们 可 以 捕捉 到 局 部 变量 (和 参数 ) ， 并 一 直 保存 下 来 ， 看 
起 来 像 这 些 变量 绑 定 到 了 在 其 中 定义 它们 的 外 部 函数 。 


实现 闭 包 


如 果 你 理解 了 词法 作用 域 的 规则 ， 你 束 能 很 容易 地 理解 闭 包 : 函数 
定义 时 的 作用 域 链 到 函数 执行 时 依然 有 效 。 然 而 很 多 程序 员 觉 得 闭 包 非 
常 难 理解 ， 因 为 他 们 在 深入 学 习 闭 包 的 实现 细节 时 将 自己 搞 得 举 头 转 
回 。 他 们 筑 得 在 外 部 函数 中 定义 的 局 部 变量 在 图 数 返 回 后 就 不 存在 了 
中 ， 那 么 幅 套 的 函数 如 何 能 调用 不 存在 的 作用 域 链 呢 ?如 果 你 想 搞 清 
楚 这 个 问题 ， 你 需要 更 深入 地 了 解 类 似 C 语 言 这 种 更 底层 的 编程 语言 ， 
并 了 解 基于 栈 的 CPU 架 构 : 如 宁 一 个 函数 的 局 部 变量 定义 在 CPU 的 栈 
中 ， 那 么 当 函 数 返 回 时 它们 的 确 就 不 存在 了 。 


但 回想 一 下 在 3.10.3 节 中 是 如 何 定义 作用 域 链 的 。 我 们 将 作用 域 链 
描述 为 一 个 对 象 列表 ， 不 是 绑 定 的 栈 。 每 次 调用 JavaScript 函 数 的 时 候 ， 
都 会 为 之 创建 一 个 新 的 对 象 用 来 保存 局 部 变量 ， 把 这 个 对 象 添加 至 作用 
域 链 中 。 当 函数 返回 的 时 候 ， 就 从 作用 域 链 中 将 这 个 绑 定 变量 的 对 象 删 
除 。 如 果 不 存 在 租 套 的 函数 ， 也 没有 其 他 引用 指 辣 这 个 绑 定 对 象 ， 它 就 
会 被 当做 垃圾 回收 掉 。 如 果 定 义 了 骨 套 的 函数 ， 每 个 风 套 的 函数 都 各 自 
对 应 一 个 作用 域 链 ， 并 有 旦 这 个 作用 域 链 指 癌 一 个 变量 绑 定 对 象 。 但 如 果 
这 些 嵌 套 的 函数 对 象 在 外 部 函数 中 保存 下 来 ， 那 么 它们 也 会 和 所 指 辐 的 
变量 绑 定 对 象 一 样 当做 垃圾 回收 。 但 是 如 果 这 个 函数 定义 了 髓 套 的 函 
数 ， 并 将 它 作 为 返回 值 返回 或 者 存储 在 某 处 的 属性 里 ， 这 时 就 会 有 一 个 
外 部 引用 指 问 这 个 散 套 的 函数 。 它 就 不 会 被 当做 垃圾 回收 ， 并 且 它 所 指 
向 的 变量 绑 定 对 象 也 不 会 被 当做 垃圾 回收 号。 


在 8.4.1 节 中 定义 了 uniqueIntegerO 函 数 ， 这 个 函数 使 用 自身 的 一 个 
属性 来 保存 每 次 返回 的 值 ， 以 便 每 次 调用 都 能 跟踪 上 次 的 返回 值 。 但 这 


















































种 做 法 有 一 个 问题 ， 就 是 恶意 代码 可 能 将 计数 器 重 置 或 者 把 一 个 非 整 数 
赋值 给 它 ， 导 致 uniquenterger() 函 数 不 一 定 能 产生 “唯一 ”的 “整数 ”"。 而 闭 
包 可 以 捕捉 到 单个 函数 调用 的 局 部 变量 ， 并 将 这 些 局 部 变量 用 做 私有 状 
态 。 我 们 可 以 利用 闭 包 这 样 来 重 写 uniqgueInteger() 函 数 : 
































var uniqueInteger=(function(){// 定 义 函数 并 立即 调用 
var counter=0;// 函 数 的 私有 状态 
return function( ){return counter++;}; 


}()); 























你 需要 仔细 阅读 这 段 代码 才能 理解 其 售 义 。 粗 略 来 看 ， 第 一 行 代码 
看 起 来 像 将 函数 赋值 给 一 个 变 萤 unigueInteger， 实际 上 ， 这 上段 代码 定义 
了 一 个 立即 调用 的 函数 (水 数 的 开始 带 有 左 圆 括号 ) ， 因 此 是 这 个 函数 
的 返回 值 赋值 给 变量 uniqueInteger。 现 在 ， 我 们 来 看 函数 体 ， 这 个 函数 
返回 另外 一 个 函数 ， 这 是 一 个 侍 套 的 函数 ， 我 们 将 它 赋 值 给 变量 
uniqueInteger， 般 套 的 函数 是 可 以 访问 作用 域内 的 变量 的 ， 而 且 可 以 访 
问 外 部 函数 中 定义 的 counter 变 量 。 当 外 部 函数 返回 之 后 ， 其 他 任何 代码 
都 无 法 访问 counter 变 量 ， 只 有 内 部 的 函数 才能 访问 到 它 。 


像 counter 一 样 的 私有 变量 不 是 只 能 用 在 一 个 单独 的 财 包 内 ， 在 同一 
个 外 部 函数 内 定义 的 多 个 髓 套 函 数 也 可 以 访问 它 ， 这 多 个 藤 套 函数 都 共 
享 一 个 作用 域 链 ， 看 一 下 这 段 代码 : 














function counter(){ 
Var n=0 

returnt 
count:function(){return n++;}, 
reset:function( ){n=0;} 

}; 

} 

var c=counter(),d=counter();// 创 建 两 个 计数 器 
c.count()//=>0 
d.count()//=>0: 它 们 互 不 干扰 
c.reset()//reset() 和 count() 方 法 共享 状态 
c.count()//= 之 9: 因为 我 们 重 置 了 c 
d.count()//=>1I: 而 没有 重 置 d 













































































counter() 函 数 返回 了 一 个 “计数 器 ”对 象 ， 这 个 对 象 包含 两 个 方法 : 
count() 返 回 下 一 个 整数 ，reset() 将 计数 器 重 置 为 内 部 状态 。 首 先 要 理 
解 ， 这 两 个 方法 都 可 以 访问 私有 变量 n。 再 者 ， 每 次 调用 counter() 都 会 创 
建 一 个 新 的 作用 域 链 和 一 个 新 的 私有 变量 。 因 此 ， 如 果 调 用 counter() 两 
次 ， 则 会 得 到 两 个 计数 器 对 象 ， 而 且 彼 此 包含 不 同 的 私有 变量 ， 调 用 其 


中 一 个 计数 器 对 象 的 count0) 或 resetO 不 会 影响 到 另外 一 个 对 象 。 


从 技术 角度 看 ， 其 实 可 以 将 这 个 闭 包 合并 为 属性 存 取 器 方法 getter 
和 setter。 下 面 这 上 段 代 码 所 示 的 counter0 函 数 的 版 本 是 6.6 节 中 代码 的 变 
种 ， 所 不 同 的 是 ， 这 里 私有 状态 的 实现 是 利用 了 闭 包 ， 而 不 是 利用 普通 
的 对 象 属性 来 实现 : 

















return{// 属 性 getter 方 法 返回 并 给 私有 计数 器 var 递 增 1 

get count(){return n++;},// 属 性 setter 不 允许 n 递 减 

set count(m){ 

if(m>=n)n=m; 

else throw Error("count can only be set to a larger value"); 


}; 

} 

Var c=counter(1000); 
c.count//=>1000 
c.count//=>>1001 
c.count=2000 
c.count//=>2000 
c.count=2000//=Error! 


function counter(n){// 函 数 参 数 n 是 一 个 私有 变量 


















































需要 注意 的 是 ， 这 个 版 本 的 counter() 函 数 并 未 声明 局 部 变量 ， 而 只 
是 使 用 参数 n 来 保存 私有 状态 ， 属 性 存 取 器 方法 可 以 访问 nm。 这 样 的 话 ， 
调用 counter0O 的 函数 就 可 以 指定 私有 变量 的 初始 值 了 。 


例 8-4 是 这 种 使 用 闭 包 技术 来 共享 的 私有 状态 的 通用 做 法 。 这 个 例 
子 定 义 了 addPrivateProperty() 函 数 ， 这 个 函数 定义 了 一 个 私有 变量 ， 以 
及 两 个 能 套 的 函数 用 来 获取 和 设置 这 个 私有 变量 的 值 。 它 将 这 些 舱 套 函 
数 添加 为 所 指定 对 象 的 方法 : 


例 8-4: 利用 闭 包 实 现 的 私有 属性 存 取 需 方法 

















// 这 个 函数 给 对 象 o 增 加 了 属性 存 取 器 方法 
// 方 法 名 称 为 get<name 之 和 set<name 之 。 如 果 提 供 了 一 个 判定 函数 
/Vsetter 方 法 就 会 用 它 来 检测 参数 的 合法 性 ， 然 后 在 存储 它 

// 如 果 判 定 函数 返回 false，setter 方 法 抛 出 一 个 异常 
// 
// 这 个 函数 有 一 个 非 同 寻常 之 处 ， 就 是 getter 和 Setter 函 数 
// 所 操作 的 属性 值 并 没有 存储 在 对 象 o 中 
// 相 反 ， 这 个 值 仅仅 是 保存 在 函数 中 的 局 部 变量 中 
//getter 和 setter 方 法 同样 是 局 部 函数 ， 因 此 可 以 访问 这 个 局 部 变量 
// 也 就 是 说 ， 对 于 两 个 存 取 器 方法 来 说 这 个 变量 是 私有 的 

// 没 有 办 法 绕 过 存 取 器 方法 来 设置 或 修改 这 个 值 

function addPrivateProperty(o,name,predicate)t{ 

var value;// 这 是 一 个 属性 什 
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/V/getter 方 法 简单 地 将 其 返 下 
o["get"+name]=function()f{return value;};//setter 方 法 首先 检查 值 是 否 合法 ， 若 不 合法 就 抛 出 


// 和 否则 就 将 其 存储 起 来 
o["set"+name]=function(v){ 

if(predicate& &!predicate(v)) 

throw Error("set"+name+":invalid value"+Vv); 
else 
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// 下 面 的 代码 展示 了 addPrivateProperty() 方 法 
var 0={};// 设 置 一 个 空 对 象 

// 增 加 属性 存 取 器 方法 getName( ) 和 setName() 

// 确 保 只 允许 字符 串 值 

addPrivateProperty(o,"Name",function(x){return typeof x=="string";}); 
0.setName("Frank");// 设 属性 信 
console.1og(o.getName() ) ;// 得 到 属性 值 
o.setName(0) ; // 试 图 设置 一 个 错误 类 型 的 值 
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我 们 已 经 给 出 了 很 多 例子 ， 在 同一 个 作用 域 链 中 定义 两 个 财 包 ， 这 
< 孚 同样 的 私有 变量 或 变量 。 这 是 一 种 非常 重要 的 技术 ， 但 还 

要 特别 小 心 那些 不 希望 共享 的 变量 往往 不 经 意 间 共 吾 给 了 其 他 的 闭 
包 ， 了 解 这 一 点 也 很 重要 。 看 一 下 下 面 这 段 代 码 : 














// 这 个 函数 返回 一 个 总 是 返回 v 的 函数 

function constfunc(v){return function(){return Vv;};}// 创 建 一 个 数组 用 来 存储 常数 函数 
var funcs=[]; 

for(var i=0;i<10;i++)funcs[i]=constfunc(i);// 在 第 5 个 位 置 的 元 素 所 表示 的 函数 返回 值 为 5 
funcs[5]()//=>5 



































这 上 段 代 码 利用 循环 创建 了 很 多 个 闭 包 ， 当 写 类 似 这 种 代码 的 时 候 往 
往 会 犯 一 个 错误 : 那 就 是 试图 将 循环 代码 移入 定义 这 个 财 包 的 函数 之 
内 ， 看 一 下 这 段 代码 : 











// 返 回 一 个 函数 组 成 的 数组 ， 它 们 的 返回 值 是 9 一 9 
function constfuncs(){ 

var funcs=[]; 

for(var i=0;i<10;i++) 
funcs[i]=function(){return i,;,}; 
return funcs; 

} 

var funcs=constfuncs(); 
funcs[5]()// 返 回 值 是 什么 ? 




















上 面 这 段 代 码 创建 了 10 个 闭 包 ， 并 将 它们 存储 到 一 个 数组 中 。 这 些 
闭 包 都 是 在 同一 个 函数 调用 中 定义 的 ， 因 此 它们 可 以 共享 变量 i。 当 
constfuncs() 返 回 时 ， 变 量 i 的 值 是 10， 所 有 的 闭 包 都 共享 这 一 个 值 ， 因 











此 ， 数 组 中 的 函数 的 返回 值 都 是 同一 个 值 ， 这 不 是 我 们 想 要 的 结果 。 关 
联 到 闭 包 的 作用 域 链 都 是 “活动 的 ”， 记 住 这 一 点 非常 重要 。 藤 套 的 函数 
不 会 将 作用 域内 的 私有 成 员 复 制 一 份 ， 也 不 会 对 所 绑 定 的 变量 生成 静态 


快照 (static snapshot) 。 


书写 闭 包 的 时 候 还 需 注意 一 件 事情 ，this 是 JavaScript 的 关键 字 ， 而 
不 是 变量 。 正 如 之 前 讨论 的 ， 每 个 函数 调用 都 包含 一 个 this 值 ， 如 有 果 闭 
包 在 外 部 函 数 里 是 无 法 访问 this 的 此 ， 除 非 外 部 函数 将 this 转 存 为 一 个 变 


量 : 

















var Self=this;// 将 this 保 存 至 一 个 变量 中 ， 以 便 舱 套 的 函数 能 够 访问 它 











绑 定 arguments 的 问题 与 之 类 似 。arguments 并 不 是 一 个 关键 字 ， 但 
在 调用 每 个 函数 时 都 会 自动 声明 它 ， 由 于 闭 包 具有 自己 所 绑 定 的 
arguments， 因 此 闭 包 内 无 法 直接 访问 外 部 函数 的 参数 数组 ， 除 非 外 部 函 
数 将 参数 数组 保存 到 另外 一 个 变量 中 : 























var outerArguments=arguments;// 保 存 起 来 以 便 嵌 套 的 函数 能 使 用 它 





在 本 间接 下 来 讲 到 的 例 8-5 中 就 利用 了 这 种 编程 技巧 来 定义 闭 包 ， 
以 便 在 闭 包 中 可 以 访问 外 部 函数 的 this 和 arguments 值 。 


8.7 ”函数 属性 、 方 法 和 构造 函数 


我 们 看 到 在 JavaScript 程 序 中 ， 函 数 是 值 。 对 函数 执行 typeof 运 算 会 
返回 字符 串 "function"， 但 是 函数 是 JavaScript 中 特殊 的 对 象 。 因 为 函数 
也 是 对 象 ， 它 们 也 可 以 拥有 属性 和 方法 ， 就 像 普通 的 对 象 可 以 拥有 属性 
和 方法 一 样 。 甚 至 可 2 用 Function0 构 造 函 数 来 创建 新 的 函数 对 象 。 接 
下 来 几 节 束 会 着 重 介 绍 函 数 属 性 和 方法 以 及 Function0 构 造 函 数 。 在 第 
二 部 分 也 有 关于 这 些 内 容 的 讲解 。 


8.7.1 ” length 属性 
在 函数 体 里 ，arguments.length 表 示 传 入 函数 的 实 参 的 个 数 。 而 函数 


本 身 的 length 属 性 则 有 着 不 同 含义 。 函 数 的 length 属 性 是 只 读 属 性 ， 它 代 
表 函 数 实 参 的 数量 ， 这 里 的 参数 指 的 是 “ 形 参 ” 而 非 “ 实 参 ”"， 也 就 是 在 函 








0 通常 也 是 在 函数 调用 时 期 望 传 入 函数 的 实 参 
站 数 。 


下 面 的 代码 定义 一 个 名 叫 checkO 的 函 数 ， 从 另外 一 个 函数 给 它 传 入 
arguments 数 组 ， 它 比较 arguments.length (实际 传 入 的 实 参 个 数 ) 和 
arguments.callee.length (期望 传 入 的 实 参 个 数 ) 来 判断 所 传 入 的 实 参 个 
数 是 否 正 确 。 如 果 个 数 不 正 确 ， 则 殷 出 异常 。check() 函 数 之 后 定义 一 个 
测试 函数 f{()， 用 来 展示 check() 的 用 法 : 


























// 这 个 函数 使 用 arguments .callee， 因 此 它 不 能 在 严格 模式 下 工作 
function check(args)t{ 
var actual=args.length;// 实 参 的 真实 个 数 

var expected=args.callee.1length;// 1 
if(actual!==expected)// 如 果 不 同 则 抛 出 
throw Error("Expected"+expected+" ee got'"+actual ) 





















































} 

function f(x,y,zZ){ 

check(arguments);// 检 查实 参 个 数 和 期 望 的 实 参 个 数 是 否 一 致 
return xty+z;// 再 执行 函数 的 后 续 逻 辑 
} 





























8.7.2 ”prototype 属 性 


每 一 个 函数 都 包含 一 个 prototype 属 性 ， 这 个 属性 是 指 同 一 个 对 象 的 
引用 ， 这 个 对 象 称 做 “原型 对 象 ”(prototype object) 。 每 一 个 函数 都 包 
含 不 同 的 原型 对 象 。 当 将 函数 用 做 构造 函数 的 时 候 ， 新 创建 的 对 象 会 从 
原型 对 象 上 继承 属性 。6.1.3 节 讨论 了 原型 和 prototype 属 性 ， 在 第 9 音 里 
会 有 进一步 讨论 。 


8.7.3 call(0 方 法 和 apply0) 方 法 


我 们 可 以 将 callO0 和 applyO) 看 做 是 某 个 对 象 的 方法 ， 通 过 调用 方法 的 
形式 来 间接 调用 〈 见 8.2.4 节 ) 函数 《比如 在 例 6-4 我 们 使 用 了 call0 方 法 
来 调用 一 个 对 象 的 Objec t.prototype. toString 方 法 ， 用 以 输 i 出 对 象 的 
类 ) 。call0 和 apply0 的 第 一 个 实 参 是 要 调用 函数 的 母 对 象 ， 它 是 调用 上 
下 文 ， 在 函数 体 内 通过 this 来 获得 对 它 的 引用 。 要 想 以 对 象 o 的 方法 来 调 
用 函数 f0， 可 以 这 样 使 用 cal0 和 apply0): 














f.call(o); 
f.apply(o); 








人 We 下 面 代 码 的 功能 类 似 《〈 假 设 对 象 o 中 预先 不 存在 名 为 m 





Oo.m=f; na Fae he 
0.m( );// 调 用 它 ， 不 传 入 
delete o.m; Os 




















在 ECMAScript 5 的 严格 模式 中 ，call0 和 apply0 的 第 一 个 实 参 都 会 变 
为 this 的 值 ， 哪 怕 传 入 的 实 参 是 原始 值 其 至 是 null 或 undefined。 在 
ECMAScript 3 和 非 严 格 模式 中 ， 传 入 的 nul 和 undefined 都 会 被 全 局 对 象 
代 蔡 ， 而 其 他 原始 值 则 会 被 相应 的 包装 对 象 (wrapper object) 所 蔡 代 。 


对 于 call0 来 说 ， 第 一 个 调用 上 下 文 实 参 之 后 的 所 有 实 参 就 是 要 传 入 
竺 调用 函数 的 值 。 比 如 ， 以 对 象 o 的 方法 的 形式 调用 函数 f0， 并 传 入 两 
个 参数 ， 可 以 使 用 这 样 的 代码 : 








f.call(o,1,2); 





apply0) 方 法 和 call0) 类 似 ， 但 传 入 实 参 的 形式 和 call() 有 所 不 同 ， 它 的 
实 参 都 放 入 一 个 数组 当中 : 





f.apply(o, [1 2]) 7 





如 果 一 个 函数 的 实 参 可 以 是 任意 数量 ， 给 apply0 传 入 的 参数 数组 可 
以 是 任意 长 上 度 的 。 比 如 ， 为 了 找 出 数组 中 最 大 的 数值 元 素 ， 调 用 
Math.max() 方 法 的 时 候 可 以 给 apply0 传 入 一 个 包含 任意 个 元 素 的 数组 : 








var biggest=Math.max.apply(Math,array_of_numbers); 





要 注意 的 是 ， 传 入 apply0 的 参数 数组 可 以 是 类 数组 对 象 也 可 以 是 
实际 上 ， 可 以 将 当前 函数 的 arguments 数 组 直接 传 入 〈( 男 一 个 
函数 的 ) apply0 来 调用 另 一 个 函数 ， 参 照 如 下 代码 : 














// 将 对 象 of a 
// 可 以 在 调用 原始 的 前 和 之 后 记录 日 志 消 息 









































function ee 人 
var original=o[m];// 在 闭 包 中 保存 原始 方法 














o[m]=function(){// 定 义 新 的 方法 
console.1og(new Date(),"Entering:",m);// 输 出 日 志 消 息 
var result=original. apply(this, arguments);// 调 原始 函数 
console.log(new Date(), "Exiting:",m);// 输 出 日 志 消 息 
return result;// 返 回 结果 

}; 

} 




































































trace() 函 数 接收 两 个 参数 ， 一 个 对 象 和 一 个 方法 名 ， 它 将 指定 的 方 
法 蔡 换 为 一 个 新 方法 ， 这 个 新 方法 是 “ 包 囊 ”原始 方法 的 另 一 个 泛 函 
数 上 4。 这 种 动态 修改 已 有 方法 的 做 法 有 时 称 做 "monkey-patching"。 


8.7.4 bind0) 方 法 








bind0 是 在 ECMAScript 5 中 新 增 的 方法 ， 但 在 ECMAScript 3 中 可 以 
轻易 模拟 bind0。 从 名 字 就 可 以 看 出 ， 这 个 方法 的 主要 作用 就 是 将 函数 
绑 定 至 某 个 对 象 。 当 在 函数 f0 上 调用 bind() 方 法 并 传 入 一 个 对 象 o 作 为 参 
数 ， 这 个 方法 将 返回 一 个 新 的 函数 。《〈 以 函数 调用 的 方式 ) 调用 新 的 函 
数 将 会 把 原始 的 函数 fO 当 做 o 的 方法 来 调用 。 传 入 新 函数 的 任何 实 参 都 
将 传 入 原始 函数 ， 比 如 : 





function f(y)f{return this.x+y;}// 这 个 是 待 绑 定 的 函数 
var o={fx:1};// 将 要 绑 定 的 对 象 

var g=f.bind(o);// 通 过 调用 g(x) 来 调用 o ,f(x) 
g(2)//=>3 












































可 以 通过 如 下 代码 轻易 地 实现 这 种 绑 定 : 























// 返 回 一 个 函数 ， 通 过 调用 它 来 调用 o 中 的 方法 f( ) ， 传 递 它 所 有 的 实 参 

function bind(f,o){ 

if(f,bind)return f.bind(0o);// 如 果 bind() 方 法 存在 的 话 ， 使 用 bind( ) 方 法 
else return function(){// 否 则 ， 这 样 绑 定 

return f.apply(o,arguments); 


} 
























































ECMAScript 5 中 的 bind0O) 方 法 不 仅仅 是 将 函数 绑 定 至 一 个 对 象 ， 它 
还 附带 一 些 其 他 应 用 : 除了 第 一 个 实 参 之 外 ， 传 入 bind0 的 实 参 也 会 绑 
定 至 this， 这 个 附带 的 应 用 是 一 种 常见 的 函数 式 编程 技术 ， 有 时 也 被 称 
为 “ 柯 里 化 ”(currying) 。 参 照 下 面 这 个 例子 中 的 bind() 方 法 的 实现 : 

















var sum=function(x,y){return x+y};// 返 回 两 个 实 参 的 和 值 














// 创 建 一 个 类 似 sum 的 新 函数 ， 但 this 的 值 绑 定 到 nu11 

// 并 且 第 一 个 参数 绑 定 到 1， 这 个 新 的 函数 期 望 只 传 入 一 个 实 参 
var succ=sum.bind(null,1); 
Succ(2)//=>3;:X 绑 定 到 1， 并 传 入 2 作为 实 参 y 

function f(y,z){return this.x+y+z}y;// 另 外 一 个 做 累加 计算 的 函数 
var g=f.bind({x:1},2);// 绑 定 this 和 y 
g(3)//=>6:this.x 绑 定 到 1，y 绑 定 到 2，z 绑 定 到 3 


















































我 们 可 以 绑 定 this 的 值 并 在 ECMAScript 3 中 实现 这 个 附带 的 应 用 。 
例 8-5 中 的 示例 代码 束 模 拟 实 现 了 标准 的 bind0) 方 法 。 


注意 ， 我 们 将 这 文 个 方法 另存 为 Function. bind， 以 便 所 有 的 
函数 对 象 都 继承 它 ， 这 种 技术 在 9.4 节 中 有 详细 介 


例 8-5: ECMAScript 3 版 本 的 Function.bind0) 方 法 








if(!Function.prototype.bind)t{ 
Function.prototype.bind=function(0/*,args*/){// 将 this 和 arguments 的 值 保存 至 变量 中 
// 以 便 在 后 面 嵌 套 的 函数 中 可 以 使 用 它们 

var self=this,boundArgs=arguments; /Lbind( ) 方 法 的 返回 值 是 一 个 函数 

return function(){// 创 建 一 个 实 参 列表 ， 将 传 入 bind( ) 的 第 二 个 及 后 续 的 实 参 都 传 入 这 个 函数 
var args=[],i; 

for(i=1;i<boundArgs.1length;i++)args.push(boundArgs[i]); 

































































for(i=0;i<arguments.length;i++)args.push(arguments[i]);// 现 在 将 self 作 为 0 的 方法 来 调 
上 月， 传 入 这 些 实 参 
return self.apply(o,args); 








mn 











}; 
' 





我 们 注意 到 ，bind(0 方 法 返回 的 函数 是 一 个 财 包 ， 在 这 个 财 包 的 外 
部 函数 中 声明 了 self 和 boundArgs 变 量 ， 这 两 个 变量 在 闭 包 里 用 到 。 尽 管 
定义 闭 包 的 内 部 函数 已 经 从 外 部 函数 中 返回 ， 而 且 调 用 这 个 团 包 人 逻 辑 的 
时 刻 要 在 外 部 函数 返回 之 后 (在 闭 包 中 照样 可 以 正确 访问 这 两 个 变 


量 ) 。 


ECMAScript 5 定义 的 bind0) 方 法 也 有 一 些 特性 是 上 述 ECMAScript 3 
代码 无 法 模拟 的 。 首 先 ， 真 正 的 bind0) 方 法 返回 一 个 函数 对 象 ， 这 个 函 
数 对 象 的 length 属 性 是 绑 定 函数 的 形 参 个 数 减 去 绑 定 实 参 的 个 数 〈length 
的 值 不 能 小 于 零 ) 。 再 者 ，ECMAScript 5 的 bind() 方 法 可 以 顺带 用 做 构 
造 函 数 。 如 果 bind0 返 回 的 函数 用 做 构造 函数 ， 将 忽略 传 入 bind(0) 的 { 
his， 原 始 函 数 就 会 以 构造 函数 的 形式 调用 ， 由 
bind(0 方 法 所 返回 的 函数 并 不 包含 prototype 属 性 通 函数 固有 的 
prototype 属 性 是 不 能 删除 的 ) ， 并 且 将 ; 数 时 


所 创建 的 对 象 从 原始 的 未 绑 定 的 构造 函数 中 继承 prototype。 同 样 ， 在 使 
用 instanceof 运 算 符 时 ， 绑 定 构 造 浮 数 和 未 绑 定 构造 函数 并 无 两 样 。 


8.7.5 toString(0) 方 法 


和 所 有 的 JavaScript 对 象 一 样 ， 函 数 也 有 toString() 方 法 ， 
ECMAScript 规 范 规 定 这 个 方法 返回 一 个 字符 串 ， 这 个 字符 串 和 函数 声 
明 语 名 的 语法 相关 。 实 际 上 ， 大 多 数 〈 非 全 部 ) 的 toString(0 方 法 的 实现 
都 返回 函数 的 完整 源码 。 内 置 函数 往往 返回 一 个 类 似 "[native code]" 的 字 
符 串 作为 函数 体 。 


8.7.6 Function0 构 造 函 数 
不 管 是 通过 函数 定义 语句 还 是 函数 直接 量 表达 式 ， 函 数 的 定义 都 要 


使 用 function 关 键 字 。 但 函数 还 可 以 通过 Function() 构 造 函 数 来 定义 ， 比 
如 : 

















var f=new Function("x","y","return x*y;"); 








这 一 行 代 码 创建 一 个 新 的 函数 ， 这 个 函数 和 通过 下 面 代码 定义 的 函 
数 几乎 等 价 : 





var f=function(x,y){treturn x*y;} 





Function0 构 造 函 数 可 以 传 入 任意 数量 的 字符 串 实 参 ， 最 后 一 个 实 
参 所 表示 的 文本 束 是 函数 体 ; 它 可 以 包含 任意 的 JavaScript 语 句 ， 每 两 条 
语句 之 间 用 分 号 分 隔 。 传 入 构造 函数 的 其 他 所 有 的 实 参 字 符 串 是 指定 函 
数 的 形 参 名 字 的 字符 串 。 如 果 定 义 的 函数 不 包含 任何 参数 ， 只 须 给 构造 
函数 简单 地 传 入 一 个 字符 串 一 一 函数 体 一 一 即 可 。 


注意 ，Function() 构 造 函 数 并 不 需要 通过 传 入 实 参 以 指定 函数 名 。 
就 像 函数 直接 量 一 样 ，Function() 构 造 函 数 创建 一 个 匿名 函数 。 


关于 Function(0) 构 造 函 数 有 几 点 需要 特别 注意 : 


:Function() 构 造 函 数 人 允许 JavaScript 在 运行 时 动态 地 创建 并 编译 消 








每 次 调用 Function() 构 造 函 数 部 会 解析 函数 体 ， 并 创建 新 的 函数 对 
象 。 如 末 古 在 一 个 循环 或 者 多 次 调用 的 函数 中 执行 这 个 构造 函数 ， 执 行 
效率 会 受 影 响 。 相 比 之 下 ， 循 环 中 的 钥 套 函数 和 函数 定义 表达 式 则 不 会 
每 次 执行 时 都 重新 编译 。 


.最 后 一 点 ， 也 是 关于 Function0) 构 造 函 数 非常 重要 的 一 点 ， 就 是 它 
所 创建 的 函数 并 不 是 使 用 词法 作用 域 ， 相 反 ， 函 数 体 代码 的 编译 总 是 会 
在 顶层 函数 Hg 执行 ， 正 如 下 面 代 码 所 示 : 





Var scope="global" 

function constructFunction(){ 

Var scope="]loca 

return new Function(" return scope");// 无 法 捕获 局 部 作用 域 
















































































} 
// 这 一 行 代码 返回 gLlobal， 因 为 通过 Function( ) 构 造 函 数 
// 所 返回 的 函数 使 用 的 不 是 局 部 作用 域 
constructFunction()();//=>>"global" 





























—— 





我 们 可 以 将 Function0 构 造 函数 认为 是 在 全 局 作用 域 中 执行 的 eval0) 
(参照 4.12.2 节 ) ，eval0 可 以 在 自 己 的 私有 作用 域内 定义 新 变量 和 函 
数 ， Function0 构 造 函 数 在 实际 编程 过 程 中 很 少 会 用 到 。 


8.7.7 ”可 调用 的 对 象 


我 们 在 7.11 节 中 提 到 “类 数组 对 象 " 并 不 是 真正 的 数组 ， 但 大 部 分 场 
景 下 可 以 将 其 当做 数组 来 对 待 。 对 于 函数 也 存在 类 似 的 情况 。 “可 调用 
的 对 象 ”(callable object) 是 一 个 对 象 ， 可 以 在 函数 调用 表达 式 中 调用 
所 有 的 函数 都 是 可 调用 的 ， 但 并 非 所 有 的 可 调用 对 象 都 是 函 








截至 目前 ， 可 调用 对 象 在 两 个 JavaScript 实 现 中 不 能 算 作 函数 。 首 
先王 Web 浏 览 器 (IE8 及 之 前 的 版 本 ) 实现 了 客户 站 方法 《诸如 
Window.alert() 和 Document.getElementsById() 由， 使 用 了 可 调用 的 宿 
主 对 象 ， 而 不 是 内 置 函 数 对 象 。 正中 的 这 些 方法 在 其 他 浏览 器 中 也 都 存 
在 ， 但 它们 本 质 上 不 是 Function 对 象 。IE9 将 它们 实现 为 真正 的 函数 ， 因 
此 这 类 可 调用 的 对 象 将 越 来 越 罕 见 。 


男 外 一 个 常见 的 可 调用 对 象 是 RegExp 对 和 象 (在 众多 浏览 器 中 均 有 
实现 ) ， 可 以 直接 调用 RegExp 对 象 ， 这 比 调用 它 的 exec() 方 法 更 快捷 一 





些 。 在 JavaScript 中 这 是 一 个 彻头彻尾 的 非 标 准 特性 ， 最 开始 是 由 

Netscape 提 出 ， 后 被 其 他 浏览 器 厂商 所 复制 ， 仪 仪 是 为 了 和 Netscape 兼 

容 s 代码 最 好 个 要 对 可 调用 的 RegExp 对 象 有 太 多 依赖 ， 这 个 特性 在 不 

入 的 将 来 可 能 会 会 废弃 并 删除 。 对 RegExp 执 行 typeof 运 算 的 结果 并 不 统 
， 在 有 些 浏 览 器 中 返回 "function"， 在 有 些 中 返回 "object"。 


如 果 想 检测 一 个 对 象 是 否 是 真正 的 图 数 对 象 〈 并 且 具 有 函数 方 
法 ) ， 可 以 参照 例 6-4 中 的 代码 检测 它 的 class 属 性 ( 见 6.8.2 市 〉: 











function es 


} 





注意 ， 这 里 的 isFunction() 函 数 和 7.10 节 的 jisArray() 函 数 极其 类 似 。 
8.8 ”函数 式 编程 


和 Lisp、Haskell 不 同 ，JavaScript 并 非 函 数 式 编程 语言 ， 但 在 
JavaScript 中 可 以 像 操 控 对 象 一 样 操控 函数 ， 也 就 是 说 可 以 在 JavaScript 
中 应 用 函数 式 编程 技术 。ECMAScript ”5 中 的 数组 方法 (诸如 map0O 和 
Rn) 就 可 以 非常 适合 用 于 函数 式 编程 风格 。 接 下 来 的 几 节 将 会 着 
重 介绍 JavaScript 中 的 函数 式 编程 技术 。 对 JavaScript 函 数 的 探讨 会 让 人 
售 感 兴 ， 你 会 体会 到 JavaScript 函 数 非 常 强 大 ， 而 不 仅仅 是 学 习 一 种 编 
程 风格 而 已 181, 


8.8.1 使 用 函数 处 理 数 组 


假设 有 一 个 数组 ， 数 组 元 素 都 是 数字 ， i 
均值 和 标准 差 。 奋 使 用 非 函 数 式 编程 风格 的 话 ， 代 码 会 是 这 样 : 
































var data=[1,1,3,5,5];// 这 里 是 待 处 理 的 数组 

// 平 均 数 是 所 有 元 素 的 累加 和 值 除 以 元 素 个 数 

Var total=0; 

for(var i=0;i<data.length,; Ph 

var mean= total/data. length;// 平 均 数 是 

// 计 算 标准 差 首先 计算 答 个 疯 关 成 闫 平均 数 之 后 偏差 的 平方 然后 求 和 















































total=0; 

for(var i=0;i<data.length;i++)t{ 
var deviation=data[i]-mean,; 
total+=deviation*deviation; 


} 


var stddev=Math.sqrt(total/(data.length-1));// 标 准 差 的 值 是 2 





可 以 使 用 数组 方法 map() 和 reduce() 来 实现 同样 的 计算 ， 这 种 实现 极 
其 简洁 (参照 7.9 节 来 查看 这 些 方 法 ) : 




















// 首 先 定义 两 个 简单 的 函数 
var sum=function(x,y){return x+y;}; 
var square=function(x){return x*x;};// 然 后 将 这 些 函 数 和 数组 方法 配合 使 用 计算 出 平均 数 和 标准 
























































var data=[1,1,3,5,5]; 

var mean=data.reduce(sum)/data.1length,; 

var deviations=data.map(function(x){return x-mean;}); 

var stddev=Math.sqrt(deviations.map(square).reduce(sum)/(data.length-1)); 








如 果 我 们 基于 ECMAScript 3 来 如 何 实现 呢 ? 因为 ECMAScript 3 中 并 
不 包含 这 些 数组 方法 ， 如 果 不 存 在 内 置 方法 的 话 我 们 可 以 自 定义 map0 
和 reduce0O 函 数 : 
































// 对 于 每 个 数组 元 素 调 用 函数 f( ) ， 并 返回 一 个 结果 数组 

// 如 果 Array .prototype.map 定 义 了 的 话 ， 就 使 用 这 个 方法 
var map=Array.prototype.map 
?function(a,f){return a.map(f);}// 如 果 已 经 存在 map( ) 方 法 ， 就 直接 使 用 它 
:function(a,ff){// 否 则 ， 自 己 实现 一 个 

var results=[]; 

for(var i=0,1len=a.length;i<~]len;i++){ 

if(i in a)results[i]=f.call(null,al[il],i,a); 

} 


return results; 

};// 使 用 函数 f( ) 和 可 选 的 初始 值 将 数组 a 减 至 一 个 值 
// 如 果 Array .prototype.reduce 存 在 的 话 ， 就 使 用 这 个 方法 
var reduce=Array.prototype.reduce 
?function(a,f,initial){// 如 果 reduce( ) 方 法 存在 的 话 
if(arguments.length>2) 

return a.reduce(f,initial);// 如 果 传 入 了 一 个 初始 值 
else return a.reduce(f);// 否 则 没有 初始 值 















































































































































:function(a,f,initial){// 这 个 算法 来 自 ES5 规 范 

var i=0,1len=a.length,accumulator;// 以 特定 的 初始 值 开 始 ， 否 则 第 一 个 值 取 自 a 
if(arguments.length>2)accumulator=initial; 

else{// 找 到 数组 中 第 一 个 已 定义 的 索引 

if(len==0)throw TypeError(); 

while(i<=~=len)t{ 

if(i in a){ 

accumulator=a[i++]; 

break; 


} 


else i++; 



































} 
if(i==len)throw TypeError(); 





























} 
// 对 于 数组 中 剩 下 的 元 素 依 次 调用 f( ) 
while(i<=len)t{ 





if(i in a) 
accumulator=f.call(undefined,accumulator,al[il],i,a); 
i++， 


return accumulator; 


}; 





使 用 定义 的 map0O 和 reduce() 函 数 ， 计 算 平 均值 和 标准 差 的 代码 看 起 
来 像 这 样 : 





var data=[1,1,3,5,5]; 

var sum=function(x,y){return x+y;}; 

var square=function(x){return x*x;}; 

var mean=reduce(data, sum)/data.1length,; 

var deviations=map(data,function(x){return x-mean;}); 

var stddev=Math.sqrt(reduce(map(deviations, square),sum)/(data.length-1)); 





8.8.2 ”高 阶 函 数 


所 谓 高 阶 函数 (higher-order function) 就 是 操作 函数 的 函数 ， 它 接 
收 一 个 或 多 个 函数 作为 参数 ， 并 返回 一 个 新 函数 ， 来 看 这 个 例子 : 








// 这 个 高 阶 函 数 返 回 一 个 新 的 函数 ， 这 个 新 函数 将 它 的 实 参 传 入 f( ) 
// 并 返回 f 的 返回 值 的 逻辑 非 

function not(f)t{ 

return function(){// 返 回 一 个 新 的 函数 

var result=f. apply(this,arguments);// 调 用 f() 
return!result;// 对 结果 求 反 


}; 
} 


var even=function(x){// 判 断 a 是 否 为 偶数 的 函数 
return x%2===0; 




































































}; 
var odd=not (even);// 一 个 新 函数 ， 所 做 的 事情 和 even( ) 相 反 
[1,1,3,5,5].every(odd);//= 二 true: 每 个 元 素 都 是 奇数 





上 面 的 not0 函 数 就 是 一 个 高 阶 函 数 ， 因 为 它 接收 一 个 函数 作为 参 
数 ， 并 返回 一 个 新 冰 数 。 男 外 一 个 例子 ， 来 看 下 面 的 mapper() 冰 数 ， 它 
也 是 接收 一 个 函数 作为 参数 ， 并 返回 一 个 新 函数 ， 这 个 新 函数 将 一 个 数 
组 映射 到 男 一 个 使 用 这 个 函数 的 数组 上 。 这 个 函数 使 用 了 之 前 定义 的 
map0 函 函数 ， 但 要 首先 理解 这 两 个 函数 有 哪里 不 同 ， 理 解 这 一 点 至 关 重 


女 : 











// 所 返回 的 函数 的 参数 应 当 是 一 个 实 参数 组 ， 并 对 每 个 数组 元 素 执行 函数 f( ) 
// 并 返回 所 有 计算 结果 组 成 的 数组 



































// 可 以 对 比 一 下 这 个 函数 和 上 文 提 到 的 map ( ) 函数 
function mapper(f){ 
return function(a){return map(a,f);}; 


var increment=function(x){return x+1;}; 
var incrementer=mapper(increment); 
incrementer([1,2,3])//=>[2,3,4] 





这 里 是 一 个 更 常见 的 例子 ， 它 接收 两 个 函数 f() 和 g()， 并 返回 一 个 新 
的 函数 用 以 计算 f(gO): 





// 返 回 一 个 新 的 可 以 计算 f(g(... ) ) 的 函数 

// 返 回 的 函数 h( ) 将 它 所 有 的 实 参 传 入 g( )， 然 后 将 g( ) 的 返回 值 传 入 f() 

// 调 用 f( ) 和 g( ) 时 的 this 值 和 调用 h( ) 时 的 this 值 是 同一 个 this 

function compose(f,g)t{ 

return function(){// 需 要 给 f( ) 传 入 一 个 参数 ， 所 以 使 用 f( ) 的 call( ) 方 法 
// 需 要 给 g( ) 传 入 很 多 参数 ， 所 以 使 用 g( ) 的 apply( ) 方 法 
return f.call(this,g.apply(this,arguments)); 
}; 

























































































var square=function(x){return x*x;}; 
var sum=function(x,y){return x+y;}; 
var squareofsum=compose(square, sum); 
squareofsum(2,3)//=>25 





本 章 后 续 几 节 中 定义 了 partial0 和 memoize0 函 数 ， 这 两 个 函数 是 非 
第 重要 的 高 阶 函 数 。 


8.8.3 ”不 完全 函数 


函数 f()( 见 8.7.4 节 〉 的 bind0) 方 法 返回 一 个 新 函数 ， 给 新 函数 传 入 
特定 的 上 下 文 和 一 组 指定 的 参数 ， 然 后 调用 函数 f()。 我 们 说 它 把 函 
数 “ 绑 定 至 ?对 象 并 传 入 一 部 分 参数 。bind(0) 方 法 只 是 将 实 参 放 在 〈 完 整 
实 参 列 表 的 ) 左 侧 上 9， 也 就 是 说 传 入 bind0 的 实 参 都 是 放 在 传 入 原始 函 
数 的 实 参 列 表 开 始 的 位 置 ， 但 有 时 我 们 期 望 将 传 入 bind0 的 实 参 放 在 
(完整 实 参 列表 的 ) 右 侧 : 


















































// 实 现 一 个 工具 函数 将 类 数组 对 象 〈 或 对 象 ) 转换 为 真正 的 数组 

// 在 后 面 的 示例 代码 中 用 到 了 这 个 方法 将 arguments 对 象 转换 为 真正 的 数组 

function array(a,n){return Array.prototype.slice.call(a,n||10);}// 这 个 函数 的 实 参 传递 
至 左 侧 




































































function partialLeft(f/*,...*/){ 

var args=arguments;// 保 存 外 部 的 实 参 数组 

return function(){// 并 返回 这 个 函数 

var a=array(args,1);// 开 始 处 理 外 部 的 第 1 个 args 
a=a.concat(array(arguments ) ) ;// 然 后 增加 所 有 的 内 部 实 参 
return f.apply(this,a);// 然 后 基于 这 个 实 参 列表 调用 f( ) 









































}; 


} 

// 这 个 函数 的 实 参 传递 至 右 侧 
function partialRight(f/*,...*/){ 

var args=arguments;// 保 存 外 部 实 参 数组 

return function(){// 返 回 这 个 函数 

var a=array(arguments);// 从 内 部 参数 开始 
a=a.concat(array(args,1));// 然 后 从 外 部 第 1 个 args 开 始 添 加 
return f.apply(this,a);// 最 后 基于 这 个 实 参 列表 调用 f( ) 

}; 


} 

// 这 个 函数 的 实 参 被 用 做 模板 

// 实 参 列表 中 的 undefined 值 都 被 填充 

function partial(f/*,...*/){ 

var args=arguments; // 保 存 外 部 实 参数 组 

return function(){ 

var a=array(args,1);// 从 外 部 args 开 始 

var i=0, j=0;// 人 遍历 args， 从 内 部 实 参 填充 undefined 值 
for(;i<~a.length;i++) 
if(a[i]===undefined)a[i]=arguments[j++];// 现 在 将 剩 下 的 内 部 实 参 都 追加 进去 
a=a.concat(array(arguments, j)) 

return f.apply(this,a); 

}; 


} 

// 这 个 函数 带 有 三 个 实 参 

var f=function(x,y,z){return x*(y-z);};// 注 意 这 三 个 不 完全 调用 之 间 的 区 别 
partialLeft(f,2)(3,4)//=>-2: 绑 定 第 一 个 实 参 :2*(3-4) 
partialRight(f,2)(3,4)//=>6: 绑 定 最 后 一 个 实 参 :3*(4-2) 
partial(f,undefined,2)(3,4)//=>-6: 绑 定 中 间 的 实 参 :3*(2-4) 















































































































































利用 这 种 不 完全 函数 的 编程 技巧 ， 可 以 编写 一 些 有 意思 的 代码 ， 利 
用 已 有 的 函数 来 定义 新 的 函数 ， 参 照 下面 这 个 例子 : 





var increment=partialLeft(sum,1); 

var cuberoot=partialRight(Math.pow,1/3); 
String.prototype.first=partial(String.prototype.charAt, 09); 
String.prototype.1last=partial(String.prototype.substr, -1, 1); 





当 将 不 完全 调用 和 其 他 高 阶 函数 整合 在 一 起 的 时 候 ， 事 情 就 变 得 格 
Ra 函数 ， 它 用 到 了 刚才 提 到 的 不 
完全 调用 : 





var not=partialLeft(compose,function(x){return!x;}); 
var even=function(x){return x%2===0;}; 

var odd=not (even); 

var isNumber=not(isNaN) 





我 们 也 可 以 使 用 不 完全 调用 的 组 合 来 重新 组 织 求 平均 数 和 标准 差 的 
代码 ， 这 种 编码 风格 是 非常 纯粹 的 函数 式 编程 : 








var data=[1,1,3,5,5];// 我 们 要 处 理 的 数据 

var sum=function(x,y)f{return x+ty;};// 两 个 初等 函数 

var product=function(x,y)t{return x*y;}; 

var neg=partial(product, -1);// 定 义 其 他 函数 

var square=partial(Math.pow,undefined,2); 

var sqrt=partial(Math.pow,undefined, .5); 

var “ reciprocal=partial(Math.pow,undefined, -1);// 现 在 计算 平均 值 和 标准 差 ， 所 有 的 函数 调用 
都 不 带 运算 符 

// 这 段 代码 看 起 来 很 像 1isp 代 码 

var mean=product(reduce(data, sum),reciprocal(data.1length)); 

var stddev=sqrt(product(reduce(map(data, 

compose(square, 

partial(sum,neg(mean)))), 

sum), 

reciprocal(sum(data.length, -1)))); 





















































8.8.4 记忆 


在 8.4.1 节 中 定义 了 一 个 阶乘 函数 ， 它 可 以 将 上 次 的 计算 结果 缓存 起 
来 。 在 函数 式 编程 当中 ， 这 种 缓存 技巧 叫做 “记忆 ” (memorization) 。 
下 面 的 代码 展示 了 一 个 高 阶 函 数 ，memorize() 接 收 一 个 函数 作为 实 参 ， 
并 返回 带 有 记忆 能 力 的 函数 上 0。 




















// 返 回 f( ) 的 带 有 记忆 功能 的 版 本 

// 只 有 当 f( ) 的 实 参 的 字符 串 表 示 痢 不 相同 时 它 才 会 工作 
function memorize(f){ 

var cache={};// 将 值 保存 在 闭 包 内 
return function(){// 将 实 参 转换 为 字符 串 形 式 ， 并 将 其 用 做 缓存 的 键 

var key=arguments.1length+Array.prototype.join.call(arguments,","); 
if(key in cache)return cache[key]; 

else return cache[key]=f.apply(this,arguments),; 

}; 

} 





















































memorize0 函 数 创 建 一 个 新 的 对 象 ， 这 个 对 象 被 当做 缓存 〈 的 宿 
主 ) 并 赋值 给 一 个 局 部 变量 ， 因 此 对 于 返回 的 函数 来 说 它 是 私有 的 〈 在 
财 包 中 ) 。 所 返回 的 函数 将 它 的 实 参数 组 转换 成 字符 串 ， 并 将 字符 串 用 
做 缓存 对 象 的 属性 名 。 如 果 在 绥 存 中 存在 这 个 值 ， 则 直接 返回 它 。 


人 否则， 就 调用 既定 的 函数 对 实 参 进行 计算 ， 将 计算 结果 缓存 起 来 并 
返回 ， 下 面 的 代码 展示 了 如 何 使 用 memorize(): 




















// 返 回 两 个 整数 的 最 大 公约 数 

// 使 用 欧 几 里 德 算 法 :http://en.wikipedia.org/wiki/Euclidean_algorithm 
function gcd(a,b){// 这 里 省 略 对 a 和 b 的 类 型 检查 

var t;// 临 时 变量 用 来 存储 交换 数值 

if(a<b)t=b,b=a,a=t;// 确 保 a>=b 

























































































while(b!=0)t=b,b=a%b, a=t;// 这 是 求 最 大 公约 数 的 欧 几 里 德 算法 
return a; 


var gcdmemo=memorize(gcd); 
gcdmemo(85,187)//=>17// 注 意 ， 当 我 们 写 一 个 递归 函数 时 ， 往 往 
// 我 们 更 希望 调用 实现 了 记忆 功能 的 递归 函数 ， 而 不 是 原 递归 函数 
var factorial=memoize(function(n){ 
return(n==1)?1:n*factorial(n-1); 











要 实现 记忆 功能 











异 
类 


























}); 
factorial(5)/V/=>120. 对 于 4 一 1 的 值 也 有 缓存 





[参数 有 形 参 〈parameter) 和 实 参 argument) 的 区 别 ， 形 参 相 当 于 函 
数 中 定义 的 变量 ， 实 参 是 在 运行 时 的 函数 调用 时 传 入 的 参数 。 

[21 有 些 JavaScript 的 实现 并 未 严格 遵守 这 条 规则 ， 比 如 ，Firefox 束 允许 
在 让 语句 中 出 现 条 件 函 数 声明 。 

DB] 这 个 术语 最 初 是 由 Martin Fowler 提 出 的 ， 参 见 
http:/martinfowler.com/dslwip/MethodChaining.html。 

上 需要 注意 的 是 ， 使 用 “由 运算 符 代 车 if 语句 的 前 提 是 a 必 须 预 先 声 明 ， 
否则 a=all[] 会 报 引 用 错误 ， 在 这 个 例子 中 a 是 作为 形 参 传 入 的 ， 相 当 于 
var a， 即 已 经 声明 了 a， 所 以 这 样 用 是 没有 问题 的 。 

[5] 当 函数 的 实 参 可 选 时 往往 传 入 一 个 无 意义 的 占 位 符 ， 惯 用 做 法 是 传 入 
null 作 为 占 位 符 ， 当 然 也 可 以 使 用 undefined 作 为 占 位 符 。 

[6] 原 文 用 了 三 个 单词 来 描述 “不 定 实 参 函数 "”，variadic function、variable 
arity function 和 varargs function，variadic 的 含义 是 实 参 (模板 〉 的 顺序 不 
定 ，variable ”arity 的 含义 是 实 参 的 个 数 不 定 ，varargs 的 含义 是 实 参 的 值 
不 定 ， 这 里 统一 译 成 “不 定 实 参 函 数 "。 本 书 采 用 最 通俗 的 术语 “不 定 实 
参 ”(vararg) 。 作 者 在 这 里 选用 最 常见 的 一 种 情形 ， 即 “ 实 参 的 值 不 
定 ”， 但 在 后 续 音 节 中 ， 这 个 单词 的 含义 应 当 是 包含 前 两 种 情形 的 ， 即 
J 含 实 参 顺 序 不 定 和 实 参 个 数 不 定 。 

[四 ] 这 看 起 来 不 足 为 奇 ， 但 如 果 你 对 Java 很 熟悉 ， 你 会 发 现 Java 中 的 函数 
是 程序 的 一 部 分 ， 但 无 法 被 程序 操作 。 

[8] 通 常 我 们 认为 的 排序 都 是 按照 值 从 小 到 大 ， 实 际 上 排序 参照 的 维度 不 
同 排序 结果 也 不 尽 相 同 。 

[9] 在 客户 端 JavaScript 中 这 种 说 法 不 完全 正确 ， 比 如 ， 在 有 些 JavaScript 
的 扩展 中 歌 可 以 使 用 let 来 声明 语句 其 入 的 变量 ， 详细 内 容 请 参照 第 11 


章 。 
[0] 这 个 术语 非常 古老 ， 是 指 函 数 变量 可 以 被 隐藏 于 作用 域 链 之 内 ， 
此 看 起 来 是 函数 将 变量 “ 包 囊 ”了 起 来 。 

[1] 之 所 以 有 这 种 想法 是 因为 很 多 人 以 为 函数 执行 结束 后 ， 与 之 相关 的 
作用 域 链 似乎 也 不 存在 了， 但 在 JavaScript 中 并 非 如 此 。 

[12] 作 者 在 这 里 清楚 地 解释 了 闭 包 和 垃圾 回收 之 间 的 关系 ， 如 果 使 用 不 



































慎 ， 闭 包 很 容易 造成 “循环 引用 ”， 当 DOM 对 象 和 JavaScript 对 象 之 间 存 
在 循环 引用 时 需要 格外 小 心 ， 在 某 些 浏览 器 下 会 造成 内 存 泄漏 。 
[3] 严 格 讲 ， 闭 包 内 的 逻辑 是 可 以 使 用 this 的 ， 但 这 个 this 和 当初 定义 函 
数 时 的 this 不 是 同一 个 ， 即 便 是 同一 个 this，this 的 值 是 随 着 调用 栈 的 变 
化 而 变化 的 ， 而 闭 包 里 的 逻辑 所 取 到 的 this 的 值 也 是 不 确定 的 ， 因 此 外 
部 函数 内 的 闭 包 是 可 以 使 用 this 的 ， 但 要 非 营 小 心地 使 用 才 行 ， 作 者 在 
ee 
Xs 

4] 泛 函数 也 叫 泛 函 ， 在 这 里 特 指 一 种 变换 ， 以 函数 为 输入 ， 输 出 可 以 


http://zh.wikipedia.org/wiki/ 泛 函数 。 

15] 作者 的 意思 是 在 运行 时 将 bindO) 所 返回 的 函数 用 做 构造 函 数 时 ， 所 传 
入 实 参 会 原封 不 动 的 传 入 原始 函数 。 

[6] 也 就 是 全 局 作用 域 。 

DZ 作者 给 出 的 这 个 例子 有 误 ， 应 当 是 getElementById(0)。 

[8] 如 果 你 对 这 部 分 内 容 感 兴趣 ， 推 荐 你 使 用 一 下 《至 少 阅读 一 下 ) 奥 
利 弗 :斯 蒂 尔 〈Oliver Steele) 的 函数 式 JavaScript 库 ， 请 参照 : 
http://osteele.com/sources/javascript/functional/。 

[19] 作 者 在 本 节 讨 论 的 是 一 种 函数 变换 技巧 ， 即 把 一 次 完整 的 函数 调用 
拆 成 多 次 函数 调用 ， 每 次 传 入 的 实 参 都 是 完整 实 参 的 一 部 分 ， 每 个 拆 分 
开 的 函数 叫做 不 完全 函数 (partial function) ， 每 次 函数 调用 叫做 不 完全 
调用 〈partial application) ， 这 种 函数 变换 的 特点 是 每 次 调用 都 返回 一 
个 函数 ， 直 到 得 到 最 终 运 行 结果 为 止 ， 举 一 个 简单 的 例子 ， 将 对 函数 
f(1,2,3,4,5,6) 的 调用 修改 为 等 价 的 f(1,2)(3,4)(5,6)， 后 者 包含 三 次 调用 ， 

和 每 次 调用 相关 的 函数 就 是 “不 完全 函数 ”。 

[20] 需 要 注意 的 是 ， 记 忆 只 是 一 种 编程 技巧 ， 本 质 上 是 牺牲 算法 的 空间 
复杂 度 以 换取 更 优 的 时 间 复 杂 度 ， 在 客户 端 JavaScript 中 代码 的 执行 时 间 
复杂 拔 往往 成 为 瓶 贷 ， 因 此 在 大 多 数 场景 下 ， 这 种 牺牲 空间 换取 时 间 的 
做 法 以 提升 程序 执行 效率 的 做 法 是 非常 可 取 的 。 























第 9 章 ” 关 和 板块 


第 6 章 详 细 介 绍 了 JavaScript 对 象 ， 每 个 JavaScript 对 象 都 是 一 个 属性 
集合 ， 相 互 之 间 没 有 任何 联系 。 在 JavaScript 中 也 可 以 定义 对 象 的 类 ， 让 
每 个 对 象 都 共享 某 些 属性 ， 这 种 “共享 ”的 特性 是 非常 有 用 的 。 类 的 成 员 
或 实例 都 包含 一 些 属 性 ， 用 以 存放 或 定义 它们 的 状态 ， 其 中 有 些 属性 定 
义 了 它们 的 行为 (通常 称 为 方法 ) 。 这 些 行为 通常 是 由 类 定义 的 ， 而 且 
为 所 有 实例 所 共享 。 例 如 ， 假 设 有 一 个 名 为 Complex 的 类 用 来 表示 复 
数 ， 同 时 还 定义 了 一 些 复数 运算 。 一 个 Complex 实 例 应 当 包 含 复数 的 实 
(状态 ) ， 同 样 Complex 类 还 会 定义 复数 的 加 法 和 乘法 操作 
(行为 )。 


在 JavaScript 中 ， 类 的 实现 是 基于 其 原型 继承 机 制 的 。 如 果 两 个 实例 
都 从 同一 个 原型 对 象 上 继承 了 属性 ， 我 们 说 它们 是 同一 个 类 的 实例 。 
JavaScript 原 型 和 继承 在 6.1.3 节 和 6.2.2 节 中 有 详细 讨论 ， 为 了 更 好 地 理解 
本 章 的 内 容 ， 请 务必 首先 阅读 这 两 个 章节 。 本 章 将 会 在 9.1 节 中 对 原型 
做 进一步 讨论 。 


如 果 两 个 对 象 继承 自 同一 个 原型 ， 往 往 意味 着 〈 但 不 是 绝对 ) 它们 
是 由 同一 个 构造 函数 创建 并 初始 化 的 。 我 们 已 经 在 4.6 节 、6.2 节 和 8.2.3 
节 中 详细 讲解 了 构造 函数 ，9.2 节 会 有 进一步 讨论 。 


如 果 你 对 诸如 Java 和 C++ 这 种 强 类 型 出 的 面向 对 象 编程 比较 熟悉 ， 
你 会 发 现 JavaScript 中 的 类 和 Java 以 及 C++ 中 的 类 有 很 大 不 同 。 尽 管 在 写 
法 上 类 似 ， 而 且 在 JavaScript 中 也 能 “模拟 ”出 很 多 经 典 的 类 的 特性 乌 ， 但 
是 最 好 要 理解 JavaScript 的 类 和 基于 原型 的 继承 机 制 ， 以 及 和 传统 的 
Java〈 当 然 还 有 类 似 Java 的 语言 ) 的 类 和 基于 类 的 继承 机 制 的 不 同 之 
处 。9.3 节 展示 了 如 何在 JavaScript 中 实现 经 典 的 类 。 


JavaScript 中 类 的 一 个 重要 特性 是 “动态 可 继承 ”(dynamically 
extendable) ，9.4 节 详细 解释 这 一 特性 。 我 们 可 以 将 类 看 做 是 类 型 ，9.5 
节 讲 解 检 测 对 象 的 类 的 几 种 方式 ， 该 节 同 样 介 绍 一 种 编程 哲学 一 一 “ 鸭 
式 状 型 ”(duck-typing) ， 它 弱化 了 对 象 的 类 型 ， 强 化 了 对 象 的 功能 。 


在 讨论 了 JavaScript 中 所有 基本 的 面 癌 对 象 纺 程 特性 之 后 ， 我 们 将 关 
注 点 从 抽象 的 概念 转 癌 一 些 实例 。9.6 节 介绍 两 种 非常 重要 的 实现 类 的 



































方法 ， 包 括 很 多 实现 面向 对 象 的 技术 ， 这 些 技术 可 以 很 大 程度 上 增强 类 
的 功能 。9.7 节 展示 (包含 很 多 示例 代码 〉 如 何 实现 类 的 继承 ， 包 括 如 
何在 JavaScript 中 实现 类 的 继承 。9.8 节 讲解 如 何 使 用 ECMAScript 5 中 的 
新 特性 来 实现 类 以 及 面向 对 象 编程 。 


定义 类 是 模块 开发 和 重用 代码 的 有 效 方式 之 一 ， 本 章 最 后 一 廊 会 集 
中 讨论 JavaScript 中 的 模块 。 


9.1 类 和 原型 


在 JavaScript 中 ， 类 的 所 有 实例 对 象 都 从 同一 个 原型 对 象 上 继承 属 
性 。 因 此 ， 原 型 对 象 是 类 的 核心 。 在 例 6-1 中 定义 了 inherit() 函 数 ， 这 个 
函数 返回 一 个 新 创建 的 对 象 ， 后 者 继承 上 自 某 个 原型 对 象 。 如 果 定 义 一 个 
原型 对 象 ， 然 后 通过 inheritO) 函 数 创 建 一 个 继承 目 它 的 对 象 ， 
义 了 一 个 JavaScript 类 。 通 常 ， 类 的 实例 还 需要 进一步 的 初始 化 ， 通 篆 
通过 定义 一 个 函数 来 创建 并 初始 化 这 个 新 对 象 参照 例 9-1。 nn 
个 表示 “ 值 的 范围 ?> 的 类 定义 了 原型 对 象 ， 还 定义 了 一 个 “工厂 ”函数 乌 用 
以 创建 并 初始 化 类 的 实例 。 


例 9-1: 一 个 简单 的 JavaScript 类 

















//range.js: 实 现 一 个 能 表示 值 的 范围 的 类 
// 这 个 工厂 方法 返回 一 个 新 的 "范围 对 象 " 
function range(from,to){// 使 Jinherit( ) 函 数 来 创 建 对 象 ， 这 个 对 象 继承 自在 下 面 定 义 的 原型 对 象 
// 原 型 对 象 作为 函数 的 一 个 属性 存储 ， 并 定义 所 有 "范围 对 象 "所 共享 的 方法 〈 行 为 ) 
var r=inherit(range. methods);// 存 储 新 的 " 苑 围 对 象 "的 起 始 位 置 和 结束 位 置 〈 状 态 ) 
// 这 两 个 属性 是 不 可 继承 的 ， 每 个 对 象 都 拥有 唯一 的 属性 

r .from=from， 

r.to=to;// 返 回 这 个 新 创建 的 对 象 

return r; 














































































































































































































} 

// 原 型 对 象 定义 方法 ， 这 些 方法 为 每 个 范围 对 象 所 继承 
range.methods={// 如 果 x 在 范围 内 ， 则 返回 true; 否则 返回 false 
// 这 个 方法 可 以 比较 数字 范围 ， 也 可 以 比较 字符 串 和 日 期 范围 
includes:function(x){ 
return this.from<=x&&x<=this.to;},// 对 于 范围 内 的 每 个 整数 都 调用 一 次 f 
// 这 个 方法 只 可 用 做 数字 范围 
foreach:function(f){ 
for(var x=Math.ceil(this.from);x==this.to;x++)f(x); 
},// 返 回 表示 这 个 范围 的 字符 串 
toString: function(){return" ("+this. from+"..."+this.to+")";} 
};// 这 里 是 使 用 "范围 对 象 "的 一 坚 例 了 

var r=range(1,3);// 创 建 一 个 范围 对 象 
r.includes(2);//=>true:2 在 这 个 范围 内 
r.foreach(console.10g);// 输 出 1 2 3 
console.1og(r);// 输 出 (1...3) 






























































































































































































































































在 例 9-1 中 有 一 些 代 码 是 没有 用 的 。 这 段 代 码 定义 了 一 个 工厂 方法 
range()， 用 来 创建 新 的 范围 对 象 。 我 们 注意 到 ， 这 里 给 range() 函 数 定义 
了 一 个 属性 range.methods， 用 以 快捷 地 存放 定义 类 的 原型 对 象 。 把 原型 
对 象 挂 在 函数 上 没什么 大 不 了 ， 但 也 不 是 惯用 做 法 。 再 者 ， 注 意 range() 
函数 给 每 个 范围 对 象 都 定义 了 from 和 to 属性 ， 用 以 定义 范围 的 起 始 位 置 
和 结束 位 置 ， 这 两 个 属性 是 非 共 享 的 ， 当 然 也 是 不 可 继承 的 。 最 后 ， 注 
意 在 range.methods 中 定义 的 那些 可 共享 、 可 继承 的 方法 都 用 到 了 from 和 
to 属性 ， 而 且 使 用 了 this 关 键 池 ， 为 了 指 代 它 们 ， 二 者 使 用 this 关 键 字 来 
站 代 调 用 这 个 方法 的 对 象 。 任 何 类 的 方法 都 可 以 通过 this 的 这 种 基本 用 
法 来 读 取 对 象 的 属性 。 


9.2 ”类 和 构造 函数 


例 9- 1 展示 了 在 JavaScript 中 定义 类 的 其 中 一 种 方法 。 但 这 种 方法 并 
不 常用 ， 毕 竞 它 没有 定义 构造 函数 ， 构造 函数 是 用 来 初始 化 新 创建 的 对 
象 的 。8.2.3 节 已 经 讲 到 ， 使 用 关键 字 new 来 调用 构造 函数 。 使 用 new 调 
用 构造 函数 会 目 动 创建 一 个 新 对 象 ， 因 此 构造 函数 本 喘 只 需 初 始 化 这 个 
新 对 象 的 状态 即 可 。 调 用 构造 函数 的 一 个 重要 特征 是 ， 构 造 函 数 的 
prototye 属 性 被 用 做 新 对 象 的 原型 。 这 意味 着 通过 同一 个 构造 函数 创建 
的 所 有 对 象 都 继承 上 自 一 个 相同 的 对 象 ， 因 此 它们 都 是 同一 个 类 的 成 员 。 
例 9-2 对 例 9-1 中 的 “范围 类 ”做 了 修改 ， 使 用 构造 函数 代 蔡 工厂 函数 : 


例 9-2， 使 用 构造 函数 来 定义 “范围 类 ” 























//range2.js: 表 示 值 的 范围 的 类 的 男 一 种 实现 
// 这 是 一 个 构造 函数 ， 以 初 台 化 新 创建 的 "范围 对 象 " 

// 注 意 ， 这 里 并 没有 创建 并 返回 一 个 对 象 ， I 化 

function Range(from, to){// 存 储 "范围 对 象 " 的 起 始 位 置 和 结束 位 置 ( 状 态 ) 
// 这 两 个 属性 是 不 可 继承 的 ， 每 个 对 象 都 拥有 唯一 的 属性 

this,from=from， 

this.to=to,; 
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} 
// 所 有 的 "范围 对 象 "都 继承 自 这 个 对 象 
// 注 意 ， 属 性 的 名 字 必 须 是 "prototype' 
Range .prototype={// 如 果 x 在 范 则 返回 true; 否则 返回 false 
// 这 个 方法 可 以 比较 数字 范围 ， 也 可 以 比较 字符 串 和 日 期 范围 
includes:function(x){freturn this.from<=x&&x<=this.to;},// 对 于 范围 内 的 每 个 整数 都 调 
用 一 次 ff 
// 这 个 方法 只 可 用 于 数字 范围 
foreach:function(f){ 
for(var x=Math. re from);x==this.to;x++)f(x); 
},// 返 回 表示 这 个 范围 的 字符 
tostring: function( )freturn' ("+this.from+" "+this.to+")";} 
};// 这 里 是 使 用 "范围 对 象 " 的 一 些 例子 
var r=range(1,3);// 创 建 一 个 范围 对 象 







































































































































































































































































r.includes(2);V//=>true:2 在 这 个 范围 内 
r.foreach(console.10g);// 输 出 1 2 3 
console.1log(r);// 输 出 (1...3) 








将 例 9-1 和 例 9-2 中 的 代码 做 一 个 仔细 的 对 比 ， 可 以 发 现 两 种 定义 类 
的 拉 术 的 差别 。 首 先 ， 注 意 当 工厂 函数 range0) 转 化 为 构造 函数 时 被 重合 
名 为 Range()。 这 里 杀人 循 了 一 个 第 见 的 编程 约定 : 从 菏 种 意义 上 讲 ， 定 
义 构造 函数 既是 定义 类 ， 并 且 类 名 首 字母 要 大 写 。 而 普通 的 函数 和 方法 
都 是 首 字母 小 写 。 


再 者 ， 注 意 Range0 构 造 函 数 是 通过 new 关 键 字 调用 的 《在 示例 代码 
的 末尾 ) ， 而 range0 工 三 函数 则 不 必 使 用 new。 例 9-1 通 过 调用 普通 函数 
( 见 8.2.1 节 ) 来 创建 新 对 象 ， 例 9-2 则 使 用 构造 函数 调用 〈 见 8.2.3 节 ) 
来 创建 新 对 象 。 由 于 Range0 构 造 函 数 是 通过 new 关 键 字 调 用 的 ， 因 此 不 
必 调 用 inherit0 或 其 他 什么 逻辑 来 创建 新 对 象 。 在 调用 构造 函数 之 前 束 
己 经 创建 了 新 对 象 ， 通 过 this 关 键 字 可 以 获取 这 个 新 对 象 。Range() 构 造 
函数 只 不 过 是 初始 化 this 而 已 。 构 造 函 数 甚 至 不 必 返 回 这 个 新 创建 的 对 
象 ， 构 造 函数 会 目 动 创建 对 象 ， 然 后 将 构造 函数 作为 这 个 对 象 的 方法 来 
调用 一 次 ， 最 后 返回 这 个 新 对 象 。 事 实 上 ， 构 造 函 数 的 命名 规则 〈 首 字 
母 大 写 ) 和 普通 函数 是 如 此 不 同 还 有 另外 一 个 原因 ， 构 造 函 数 调用 和 普 
通 函 数 调 用 是 不 尽 相 同 的 。 构 造 函 数 束 是 用 来 “构造 新 对 象 " 的 ， 它 必须 
通过 关键 字 new 调 用 ， 如 果 将 构造 函数 用 做 普通 函数 的 话 ， 人 往往 不 会 正 
常 工 作 。 开 发 者 可 以 通过 命名 约定 来 (构造 函数 首 字 母 大 写 ， 普 通 方法 
首 字 母 小 写 ) 判断 是 否 应 当 在 函数 之 前 冠 以 关键 字 mew。 


例 9-1 和 例 9-2 之 间 还 有 一 个 非常 重要 的 区 别 ， 就 是 原型 对 象 的 命 
名 。 在 第 一 段 示 例 代码 中 的 原型 是 range.methods。 这 种 命名 方式 很 方便 
同时 有 具有 很 好 的 语义 ， 但 又 过 于 随意 。 在 第 二 段 示 例 代码 中 的 原型 是 
Range.prototype， 这 是 一 个 强制 的 命名 。 对 RangeO 构 造 函数 的 调用 会 自 
动 使 用 Range.prototype 作 为 新 Range 对 象 的 原型 。 


最 后 ， 需 要 注意 在 例 9-1 和 例 9-2 中 两 种 类 定义 方式 的 相同 之 处 ， 两 
者 的 范围 方法 定义 和 调用 方式 是 完全 一 样 的 。 


9.2.1 构造 函数 和 类 的 标识 


上 文 提 到 ， 原 型 对 象 是 类 的 唯一 标识 : 当 且 仅 当 两 个 对 象 继承 目 同 
一 个 原型 对 象 时 ， 它 们 才 是 属于 同一 个 类 的 实例 。 而 初始 化 对 象 的 状态 





















































的 构造 函数 则 不 能 作为 类 的 标识 ， 两 个 构造 函数 的 prototype 属 性 可 能 指 
ER 那么 这 两 个 构造 冰 数 创建 的 实例 是 属于 同一 个 类 
J 


尽管 构造 疯 数 不 像 原 型 那样 基础 ， 但 构造 函数 是 类 的 “外 在 表现 ”。 
很 明显 的 ， 构 造 函 数 的 名 字 通 常用 做 类 名 。 比 如 ， 我 们 说 Range0 构 造 
函数 创建 Range 对 象 。 然 而 ， 更 根本 地 讲 ， 当 使 用 instanceof 运 算 符 来 检 
测 对 象 是 否 属 于 某 个 类 时 会 用 到 构造 函数 。 假 设 这 里 有 一 个 对 象 r， 我 
们 想 知 道 r 是 否 是 Range 对 象 ， 我 们 这 样 写 : 




















r instanceof Range// 如 果 r 继 承 自 Range.prototype， 则 返回 true 














实际 上 instanceof 运 算 符 并 不 会 检查 r 是 否 是 由 Range() 构 造 函 数 初始 
化 而 来 ， 而 会 检查 r 是 否 继承 自 Range.prototype。 不 过 ，instanceof 的 语法 
则 强化 了 “构造 函数 是 类 的 公有 标识 ”的 概念 。 在 本 章 的 后 面 还 会 碰 到 对 


instanceof 运 算 符 的 介绍 。 
9.2.2 ”constructor 属 性 


在 例 9-2 中 ， 将 Range.prototype 定 义 为 一 个 新 对 象 ， 这 个 对 象 包含 类 
所 需要 的 方法 。 其 实 没 有 必要 新 创建 一 个 对 象 ， 用 单个 对 象 直接 量 的 属 
性 就 可 以 方便 地 定义 原型 上 的 方法 。 任 何 JavaScript 函 数 都 可 以 用 做 构造 
函数 ， 并 且 调 用 构造 函数 是 需要 用 到 一 个 prototye 属 性 的 。 因 此 ， 每 个 
JavaScript 函 数 (ECMAScript ”5 中 的 Function.bind() 方 法 返回 的 函数 除 
外 ) 都 自动 拥有 一 个 prototype 属 性 。 这 个 属性 的 值 是 一 个 对 象 ， 这 个 对 
象 包含 唯一 一 个 不 可 枚 举 属性 constructor。constructor 属 性 的 值 是 一 个 函 
数 对 象 : 








var F=function( ){};// 这 是 一 个 函数 对 象 

var p=F,.prototype;// 这 是 F 相 关联 的 原型 对 象 

var c=p.constructor;// 这 是 与 原型 相关 联 的 函数 
c===F//=>true: 对 于 任意 函数 F.prototype,.constructor==F 





可 以 看 到 构造 函数 的 原型 中 存在 预先 定义 好 的 constructor 必 性， 这 
意味 着 对 象 通 党 继承 的 constructor 均 指 代 它们 的 构造 函数 。 由 于 构造 函 
数 是 类 的 “公共 标识 ”， 因 此 这 个 constructor 属 性 为 对 象 提供 了 类 。 








var 0=new F();// 创 建 类 F 的 一 个 对 象 
o.constructor===F//=>true，constructor 属 性 指 代 这 个 类 

















如 图 9-1 所 示 ， 图 9-1 展 示 了 构造 函数 和 原型 对 象 之 间 的 关系 ， 包 括 
原型 到 构造 函数 的 反 加 引用 以 及 构造 函数 创建 的 实例 。 


构造 函数 原型 实例 


Rangel ， 中 new Range(1,2) 


foreach: ... 
toString: ,.. 





图 9-1 构造 函数 及 其 原型 和 实例 


需要 注意 的 是 ， 图 9-1 用 RangeO 构 造 函数 作 为 示例 ， 但 实际 上 ， 例 
9-2 中 定义 的 Range 类 使 用 它 自 号 的 一 个 新 对 象 重 写 预定 义 的 
Range.prototype 对 象 。 这 个 新 定义 的 原型 对 象 不 含有 constructor 属 性 。 
此 Range 类 的 实例 也 不 含有 constructor 属 性 。 我 们 可 以 通过 补救 措施 来 修 
正 这 个 问题 ， 显 式 给 原型 添加 一 个 构造 函数 : 








Range.prototype={ 

constructor:Range, // 显 式 设置 构造 函数 反 向 引用 
includes:function(x){return this.from<=x&&x==this.to;}, 
foreach:function(f){ 

for(var x=Math.ceil(this.from);x==this.to;x++)f(x); 


了 
tostring:function(){return"("+this.from+"..."+this.to+")";} 


了 





男 一 种 常见 的 解决 办 法 是 使 用 预定 义 的 原型 对 象 ， 预 定义 的 原型 对 
象 包 售 constructor 属 性 ， 然 后 依次 给 原型 对 象 添加 方法 : 





// 扩 展 预 定义 的 Range .prototype 对 象 ， 而 不 重 写 之 

// 这 样 就 自动 创建 Range .prototype.constructor 属 性 
Range.prototype.includes=function(x){return this.from<=x&&x<==this.to,;}; 
Range.prototype.foreach=function(f){ 

for(var x=Math.ceil(this.from);x==this.to;x++)f(x); 


}; 





























Range.prototype.toString=function( ){ 
return"("+this.fromt+"..."+this.to+")"; 


9.3 ”JavaScript 中 Java 式 的 类 继承 


如 果 你 有 过 Java 或 其 他 类 似 强 类 型 面向 对 象 语言 的 开发 经 历 的 话 ， 
在 你 的 脑海 中 ， 类 成 员 的 模样 可 能 会 是 这 个 样子 : 





实例 字段 





它们 是 基于 实例 的 属性 或 变量 ， 用 以 保存 独立 对 象 的 状态 。 
实例 方法 
它们 是 类 的 所 有 实例 所 共享 的 方法 ， 由 每 个 独立 的 实例 调用 。 


类 字段 


YY 














多 


些 属 性 或 变量 是 属于 类 的 ， 而 不 是 属于 类 的 某 个 实例 的 。 
类 方法 


米 








这 些 方法 是 属于 类 的 ， 而 不 是 属于 类 的 某 个 实例 的 。 


JavaScript 和 Java 的 一 个 不 同 之 处 在 于 ，JavaScript 中 的 函数 都 是 以 值 
的 形式 出 现 的 ， 方 法 和 字段 之 间 并 没有 太 大 的 区 别 。 如 果 属 性 值 是 函 
数 ， 那 么 这 个 属性 就 定义 一 个 方法 ; 否则 ， 它 只 是 一 个 普通 的 属性 
或 “字段 *。 尽 管 存在 诸多 差异 ， 我 们 还 是 可 以 用 JavaScript 模 拟 出 Java 中 
的 这 四 种 类 成 员 类 型 。JavaScript 中 的 类 替 扯 三 种 不 同 的 对 象 〈 参 照 图 9- 
1) ， 三 种 对 象 的 属性 的 行为 和 下 面 三 种 类 成 员 非 常 相似 ; 


构造 函数 对 象 








之 前 提 到 ， 构 造 函 数 〈 对 象 ) 为 JavaScript 的 类 定义 了 名 字 。 任 何 添 
加 到 这 个 构造 函数 对 象 中 的 属性 都 是 类 字段 和 类 方法 〈 如 果 属 性 值 是 函 
数 的 话 就 是 类 方法 ) 。 


原型 对 象 








原型 对 象 的 属性 被 类 的 所 有 实例 所 继承 ， 如 果 原 型 对 象 的 属性 值 是 
函数 的 话 ， 这 个 函数 束 作 为 类 的 实例 的 方法 来 调用 。 


实例 对 象 


类 的 每 个 实例 都 是 一 个 独立 的 对 象 ， 直 接 给 这 个 实例 定义 的 属性 是 
的 < 盏 的 。 定 义 在 实例 上 的 非 函数 属性 ， 实 际 上 是 
实例 的 字 


在 JavaScript 中 定义 类 的 步骤 可 以 缩减 为 一 个 分 三 步 的 算法 。 
步 ， 先 定义 一 个 构造 函数 ， 并 设置 初始 化 新 对 象 的 实例 属性 。 。， 
给 构造 函数 的 prototype 对 象 定 义 实例 的 方法 。 第 三 步 ， 给 构造 函数 定义 
类 字段 和 类 属性 。 我 们 可 以 将 这 三 个 步骤 封装 进 一 个 简单 的 
数 中 (这 里 用 到 了 例 6-2 中 的 extend0O) 函 数 和 例 8-3 中 的 改 
进 版 〉: 























// 一 个 用 以 定义 简单 类 的 函数 











FE 


function defineClass(constructor,// 用 以 设置 实例 的 属性 芯 
methods, // 实 例 的 方法 ， 复 制 至 原型 中 
statics)// 类 属性 ， 7 制 至 构造 函数 中 











一 
区 
洋 









































过 











if(methods )extend(constructor .prototypevmethods ) ; 
if(statics)extend(constructor, statics); 
return constructor; 


} 

// 这 是 Range 类 的 另 一 个 实现 

var SimpleRange= 
defineClass(function(f,t){this,.f=f;this.t=t;}, 


t 
includes:function(x){return this.f<=x&&x<==this.t;}, 
tostring:function(){return this.f+"..."+this.t;} 


}, 
{upto:function(t){return new SimpleRange(0,t);}}); 





例 9-3 中 定义 类 的 代码 更 长 一 些 。 这 里 定义 了 一 个 表示 复数 的 类 ， 
这 段 代 码 展示 了 如 何 使 用 JavaScript 来 模拟 实现 Java 式 的 类 成 员 。 例 9-3 
中 的 代码 没有 用 到 上 面 的 defineClassO 函 数 ， 而 是 “手动 ”来 实现 : 


例 9-3: Complex.js: 表示 复数 的 类 








基业 

*Complex.js: 

* 这 个 文件 定义 了 Complex 类 ， 用 来 描述 复数 

* 回 忆 一 下 ， 复数 是 实效 和 虐 数 的 和 . 并 且 虚 数 i 是 -1 的 平方 根 
*/ 






































WA 

* 这 个 构造 函数 为 它 所 创建 的 每 个 实例 定义 了 实例 字段 r 和 i 

* 这 两 个 字段 分 别 保存 复数 的 实 部 和 虚 部 

它们 是 对 象 的 状态 

*/ 
function Complex(real,imaginary)t{ 
if(isNaN(real)||isNaN(imaginary))// 确 保 两 个 实 参 都 是 数字 
throw new TypeError();// 如 果 不 都 是 数字 则 抛 出 错误 
this.r=real;// 复 数 的 实 部 
this ,i=imaginary;// 复 数 的 虚 部 


* 类 的 实例 方法 定义 为 原型 对 象 的 函数 值 属性 

* 这 里 定义 的 方法 可 以 被 所 有 实例 继承 ， 并 为 它们 提供 共享 的 行为 

* 需 要 注意 的 是 ，JavaScript 的 实例 方法 必须 使 用 关键 字 this 

* 来 存 取 实例 的 字段 

WA 

// 当 前 复数 对 象 加 上 另外 一 个 复数 ， 并 返回 一 个 新 的 计算 和 值 后 的 复数 对 象 

Complex.prototype.add=function(that)t{ 

return new Complex(this.r+that.r,this,.i+that.i); 

};// 当 前 复数 乘 以 另外 一 个 复数 ， 并 返回 一 个 新 的 计算 乘积 之 后 的 复数 对 象 

Complex.prototype.mul=function(that)t{ 

return new Complex(this.r*that.r-this.i*that.i,this.r*that.i+this.i*that.r); 

};// 计 算 复数 的 模 ， 复 数 的 模 定义 为 原点 (9, 9) 到 复 平面 的 距离 

Complex.prototype.mag=function(){ 

return Math.sqrt(this.r*this.r+this.i*this.i); 

};// 复 数 的 求 负 运 算 

Complex.prototype.neg=function(){ 

return new Complex(-this.r,-this.i); 

};// 将 复数 对 象 转换 为 一 个 字符 串 

Complex.prototype.toString=function(){ 

return"{"+this.r+","+this.i+"}",; 

};// 检 测 当 前 复数 对 象 是 否 和 另外 一 个 复数 值 相 等 

Complex.prototype.equals=function(that)t{ 

return that!=null& &// 必 须 有 定义 且 不 能 是 null 

that.constructor===Complex&&// 并 且 必 须 是 Complex 的 实例 

this.r===that,.r&&this.i===that .i;// 并 且 必 须 包 含 相同 的 人 

}7/™ 

* 类 字段 〈 比 如 常量 ) 和 类 方法 直接 定义 为 构造 函数 的 属性 
* 需 要 注意 的 是 ， 类 的 方法 通常 不 使 用 关键 字 this， 

* 它 们 只 对 其 参数 进行 操作 


// 这 里 预定 义 了 一 些 对 复数 运算 有 帮助 的 类 字段 

// 它 们 的 命名 全 都 是 大 写 ， 用 以 表明 它们 是 常量 

//〔 在 ECMAScript 5 中 ， 还 能 设置 这 些 类 字段 的 属性 为 只 读 ) 

Complex.ZERO=new Complex(0,0); 

Complex.ONE=new Complex(1,0); 

Complex.I=new Complex(0,1);// 这 个 类 方法 ; 
个 complex 对 象 

// 或 者 抛 出 一 个 类 型 错误 异常 

Complex.parse=function(s){ 

try{// 假 设 解析 成 功 

var m=Complex._format .exec(s);// 利 用 正则 表达 式 进行 匹配 

return new Complex(parseFloat(m[1]),parseFloat(m[2])); 

}catch(x){// 如 果 解 析 失 败 则 抛 出 异常 

throw new TypeError("Can't parse'"+s+"'as a complex number."); 
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实例 对 象 的 toString 方 法 返回 的 字符 串 格 式 解析 为 一 







































































} 

};// 定 义 类 的 "私有 "字段 ， 这 个 字段 在 Complex. parse( ) 中 | 到 J 
// 下 划 线 前 级 表明 它 是 类 内 部 使 用 的 ， 而 不 属于 类 的 公有 API 的 部 分 
Complex._format=/ 和 人 \{([^,]+), ([^}]+)\}$/; 




































































从 例 9-3 中 所 定义 的 Complex 类 可 以 看 出 ， 我 们 用 到 了 构造 函数 、 实 
例 字段 、 实 例 方法 、 类 字段 和 类 方法 ， 看 一 下 这 段 示例 代码 : 

















var c=new Complex(2,3);// 使 用 构造 函数 创建 新 的 对 象 
var d=new Complex(c.i,c.r);// 用 到 了 c 的 实例 属性 
c.add(d).tostring();//= 二 "{5,5}": 使 用 了 实例 的 方法 
// 这 个 稍微 复杂 的 表达 式 用 到 了 类 方法 和 类 字段 
Complex.parse(c.toString()).// 将 c 转 换 为 字符 串 
add(c.neg()).// 加 上 它 的 负数 

equals (Complex.ZERO)// 结 果 应 当 永 远 是 " 零 " 
















































































尽管 JavaScript 可 以 模拟 出 Java 式 的 类 成 员 ， 但 Java 中 有 很 多 重要 的 
特性 是 无 法 在 JavaScript 类 中 模拟 的 。 首 先 ， 对 于 Java 类 的 实例 方法 来 
说 ， 实 例 字 段 可 以 用 做 局 部 变量 ， 而 不 需要 使 用 关键 字 this 来 引用 它 
们 。JavaScript 是 没 办 法 模拟 这 个 特性 的 ， 但 可 以 使 用 with 语句 来 近似 地 
实现 这 个 功能 (但 这 种 做 法 并 不 推荐 ) : 

















Complex.prototype.toSstring=function(){ 
with(this)t{ 

return"{"+r+", 下 

} 

}; 








在 Java 中 可 以 使 用 final 声 明 字段 为 常量 ， 并 且 可 以 将 字段 和 方法 声 
明 为 private， 用 以 表示 它们 是 私有 成 员 且 在 类 的 外 面 是 不 可 见 的 。 在 
JavaScript 中 没有 这 些 关 键 字 。 例 9-3 中 使 用 了 一 些 命名 写法 上 的 约定 来 
给 出 一 些 暗示 ， 比 如 哪些 成 员 是 不 能 修改 的 (以 大 写字 母 命名 的 命 
名 ) ， 哪 些 成 员 在 类 外 部 是 不 可 见 的 〈 以 下 划 线 为 前 绥 的 命名 ) 。 关 于 
这 两 个 主题 的 讨论 在 本 章 后 续 还 会 碰 到 :， 私有 属性 可 以 使 用 闭 包 里 的 局 
部 变量 来 模拟 〈 参 照 9.6.6 节 ) ， 常 量 属性 可 以 在 ECMAScript 5 中 直接 实 
现 〈 参 照 9.8.2 节 ) 。 


9.4 类 的 扩充 


JavaScript 中 基于 原型 的 继承 机 制 是 动态 的 : 对 象 从 其 原型 继承 属 
性 ， 如 果 创 建 对 象 之 后 原型 的 属性 发 生 改 变 ， 也 会 影响 到 继承 这 个 原型 
的 所 有 实例 对 象 。 这 意味 着 我 们 可 以 通过 给 原型 对 象 添加 新 方法 来 扩充 
JavaScript 类 。 这 里 我 们 给 例 9-3 中 的 Complex 类 添加 方法 来 计算 复数 的 共 
恩 复 数 负 。 





























// 返 回 当前 复数 的 共 轿 复数 


Complex.prototype.conj=function(){return new Complex(this.r,-this.i);}; 








JavaScript 内 置 类 的 原型 对 象 也 是 一 样 如 此 “开放 ”， 也 就 是 说 可 以 给 
数字 、 字 符 串 、 数 组 、 函 数 等 数据 类 型 添加 方法 。 在 例 8-5 中 我 们 兽 给 
ECMAScript 3 中 的 函数 类 添加 了 bind0 方 法 ， 这 个 方法 原来 是 没有 的 : 











if(!Function.prototype.bind){ 
Function.prototype.bind=function(o/*,args*/){//bind() 方 法 的 代码 ,.. 
}; 

} 








这 里 有 一 些 其 他 的 例子 : 

















// 多 次 调用 这 个 函数 f， 传 入 一 个 迭代 数 

// 比 如 , 要 输出 "hello" 三 次 : 

//var n=3; 
//n.times(function(n){console.10g(n+"hel1o");}); 
Number .prototype.times=function(f,context){ 

var n=Number (this); 

for(var i=0;i<n;i++)f.call(context, 1); 

}; /7 如 果 不 存在 ES5 的 String. trim( ) 方 法 的 话 ， 就 定义 它 
// 这 个 方法 用 以 去 除 字 符 串 开头 和 结尾 的 空格 
String.prototype.trim=String.prototype.trim| |function(){ 
if(!this)return this;// 空 字符 串 不 做 处 理 

return this. replace(/ANS+|\S+$/g， "") ;// 使 用 正则 表达 式 进行 空格 蔡 换 
};// 返 回 函 数 的 名 字 ， 如 果 它 有 〔 非 标准 的 ) name 属 性 ， 则 直接 使 用 name 属 性 
/7 否则， 将 函数 转换 为 字符 串 然后 从 中 提取 名 字 

// 如 果 是 没有 名 字 的 函数 ， 则 返回 一 个 空 字 符 串 
Function.prototype.getName=function(){ 

return this.name||this.toString().match(/function\s*([^()*]\(/)[1]; 
}; 
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可 以 给 Object.prototype 添 加 方法 ， 从 而 使 所 有 的 对 象 都 可 以 调用 这 
些 方法 。 但 这 种 做 法 并 不 推荐 ， 因 为 在 ECMAScript 5 之 前 ， 无 法 将 这 些 
新 增 的 方法 设置 为 不 可 枚 举 的 ， 如 果 给 Object.prototype 添 加 属性 ， 这 些 
属性 是 可 以 被 fovin 循 环 遍 历 到 的 。 在 9.8.1 节 中 会 给 出 ECMAScript 5 中 
的 一 个 例子 ， 其 中 使 用 Object.defineProperty0) 方 法 可 以 安全 地 扩充 
Object.prototype。 


然而 并 不 是 所 有 的 宿主 环境 (比如 Web 浏 览 器 ) 都 可 以 使 用 
Object.defineProperty0， 这 跟 ECMAScript 的 具体 实现 有 关 。 比 如 ， 在 很 
多 Web 浏 览 器 中 ， 可 以 给 HIMLElement.prototype 添 加 方法 ， 这 样 当前 文 
档 中 表示 HITML 标 记 的 所 有 对 象 就 可 以 继承 这 些 方法 。 但 当前 版 本 的 下 








则 不 支持 这 样 做 。 这 对 客户 端 编程 实用 技术 有 着 严重 的 限制 。 
9.5 ”类 和 类 型 


回想 一 下 第 3 童 的 内 容 ，JavaScript 定 义 了 少量 的 数据 类 型 : null、 
undefined、 布 尔 值 、 数 字 、 字 符 串 、 函 数 和 对 象 。typeof 运 算 符 ( 见 
4.13.2 节 ) 可 以 得 出 值 的 类 型 。 然 而 ， 我 们 往往 更 希望 将 类 作为 类 型 来 
对 待 ， 这 样 惑 可 以 根据 对 象 所 属 的 类 来 区 分 它们 。JavaScript 语 言 核 心中 
的 内 置 对 象 〈 通 常 是 指 客户 端 JavaScript 的 宿主 对 象 ) 可 以 根据 它们 的 
class 属 性 〈 见 6.8.2 节 ) 来 区 分 彼此 ， 比 如 在 例 6-4 中 用 到 了 classofO 函 
数 。 但 当 我 们 使 用 本 章 所 提 到 的 技术 来 定义 类 的 话 ， 实 例 对 象 的 class 属 
性 都 是 "Object"， 这 时 classofO 函 数 也 无 用 武之 地 。 


接 下 来 的 几 节 介绍 了 三 种 用 以 检测 任意 对 象 的 类 的 技术 : instanceof 
运算 符 ，constructor 属 性 ， 以 及 构造 函数 的 名 字 。 但 每 种 技术 都 不 其 完 
美 ， 本 节 总 结 讨 论 了 鸭 式 辩 型 ， 这 种 编程 哲学 更 加 关注 对 象 可 以 完成 什 
么 工作 《〈 它 包含 什么 方法 ) 而 不 是 对 象 属于 哪个 类 。 





9.5.1 _ instanceof 运 算 符 


4.9.4” 节 已 经 讨论 过 了 instanceof 运 算 符 。 左 操作 数 是 待 检测 其 类 的 
对 象 ， 右 操作 数 是 定义 类 的 构造 函数 。 如 果 o 继 承 上 自 c.prototype， 则 表达 
式 o instanceof c 值 为 tue。 这 里 的 继承 可 以 不 是 直接 继承 ， 如 果 o 所 继承 
的 对 象 继承 目 另 一 个 对 象 ， 后 一 个 对 象 继承 自 c.prototype， 这 个 表达 式 
的 运算 结果 也 是 true。 


正如 在 本 章 前 面 所 讲 到 的 ， 构 造 函 数 是 类 的 公共 标识 ， 但 原型 是 唯 
一 的 标识 。 尽 管 instanceof 运 算 符 的 右 操 作 数 是 构造 函数 ， 但 计算 过 程 实 
际 上 是 检测 了 对 象 的 继承 关系 ， 而 不 是 检测 创建 对 象 的 构造 函数 。 


如 有 果 你 想 检测 对 象 的 原型 链 上 是 否 存 在 某 个 特定 的 原型 对 象 ， 有 没 
有 不 使 用 构造 函数 作为 中 介 的 方法 呢 ? 答案 是 肯定 的 ， 可 以 使 用 
isPrototypeOf(O 方 法 。 比 如 ， 可 以 通过 如 下 代码 来 检测 对 象 rp 是 否 是 例 9-1 
中 定义 的 范围 类 的 成 员 : 











range.methods.ispPrototypeof(r);//range.method 是 原型 对 象 





instanceof 运 算 符 和 isPrototypeOfO 方 法 的 缺点 是 ， 我 们 无 法 通过 对 

象 来 获得 类 名 ， 只 能 检测 对 象 是 否 属 于 指定 的 类 名 。 在 客户 端 JavaScript 
中 还 有 一 个 比较 严重 的 不 足 ， 就 是 在 多 窗口 和 多 框架 子 页 面 的 web 应 用 
中 兼容 性 不 佳 。 每 个 窗口 和 框架 子 页 面 都 具有 单独 的 执行 上 下 文 ， 每 个 
上 下 文 都 包含 独 有 的 全 局 变量 和 一 组 构造 函数 。 在 两 个 不 同 框架 页 面 中 
创建 的 两 个 数组 继承 自 两 个 相同 但 相互 独立 的 原型 对 象 ， 其 中 一 个 框 染 
页 面 中 的 数组 不 是 另 一 个 框架 页 面 的 Array0 构 造 函 数 的 实例 ，instanceof 
运算 结果 是 false。 














9.5.2 ”constructor 属 性 


男 一 种 识别 对 象 是 否 属 于 某 个 类 的 方法 是 使 用 constructor 属 性 。 
ee 公共 标识 ， 所 以 最 直接 的 方法 就 是 使 用 constructor 属 
性 ， 比如 : 














function typeAndValue(x){ 
if(x==null)return"";//Null 和 undefined 没 有 构造 函数 
switch(x.constructor)t 

case Number:return"Number:"+x;// 处 理 原始 类 型 

case String:return"String:'"+Xx+""",; 

case Date:return"Date:"+Xx;// 处 理 内 置 类 型 

case RegExp:return"Regexp:"+x; 

case Complex:return"Complex:"+X;// 处 理 自 定义 类 型 
} 

} 





























需要 注意 的 是 ， 在 代码 中 关键 字 case 后 的 表达 式 都 是 函数 ， 如 果 改 
用 typeof 运 算 符 或 获取 到 对 象 的 class 属 性 的 话 ， 它 们 应 当 改 为 字符 串 。 


使 用 constructor 属 性 检测 对 象 属于 某 个 类 的 技术 的 不 足 之 处 和 
instanceof 一 样 。 在 多 个 执行 上 下 文 的 场景 中 它 是 无 法 正常 工作 的 《比如 
在 浏览 器 窗口 的 多 个 框架 子 页 面 中 ) 。 在 这 种 情况 下 ， 每 个 框架 页 面 各 
自 拥 有 独立 的 构造 函数 集合 ， 一 个 框架 页 面 中 的 Array 构 造 函 数 和 男 一 
个 框架 页 面 的 Array 构 造 函 数 不 是 同一 个 构造 函数 。 


同样 ， 在 JavaScript 中 也 并 非 所 有 的 对 象 都 包含 constructor 属 性 。 在 

每 个 新 创建 的 函数 原型 上 默认 会 有 constructor 属 性 ， 但 我 们 常常 会 忽 觉 

原型 上 的 constructor 属 性 。 比 如 本 章 前 面 的 示例 代码 中 所 定义 的 两 个 类 
《在 例 9-1 和 例 9-2 中 ) ， 它 们 的 实例 都 没有 constructor 属 性 。 

















9.5.3 ”构造 函数 的 名 称 


使 用 instanceof 运 算 符 和 constructor 属 性 来 检测 对 象 所 属 的 类 有 一 个 
主要 的 问题 ， 在 多 个 执行 上 下 文中 存在 构造 函数 的 多 个 副本 的 时 候 ， 这 
两 种 方法 的 检测 结果 会 出 错 。 多 个 执行 上 下 文中 的 函数 看 起 来 是 一 模 一 
样 的 ， 但 它们 是 相互 独立 的 对 象 ， 因 此 彼此 也 不 相等 。 


一 种 可 能 的 解决 方案 是 使 用 构造 函数 的 名 字 而 不 是 构造 冰 数 本 里 作 
为 类 标识 符 。 一 个 帘 口 里 的 Aray 构 造 函 数 和 另 一 个 窗口 的 Array 构 造 函 
数 是 不 相等 的 ， 但 是 它们 的 名 字 是 一 样 的 。 在 一 些 JavaScript 的 实现 中 为 
函数 对 象 提供 了 一 个 非 标准 的 属性 name， 用 来 表示 函数 的 名 称 。 Be 
些 没有 name 属 性 的 JavaScript 实 现 来 说 ， 可 以 将 函数 转换 为 字符 串 ， 然 
后 从 中 提取 出 函数 名 在 9. 4 下 中 的 示例 代码 给 Function 类 添加 了 
getName() 方 法 ， 就 是 使 用 这 种 方式 来 得 到 函数 名 ) 。 


例 9-4 定 义 的 type0 函 数 以 字符 串 的 形式 返回 对 象 的 类 型 。 它 用 
typeof 运 算 符 来 处 理 原 始 值 和 函数 。 对 于 对 象 来 说 ， 它 要 么 返回 class 属 
性 的 值 要 么 返回 构造 函数 的 名 字 。type0 函 数 用 到 了 例 6-4 中 的 classof() 函 
数 和 9.4 节 中 的 Function.getName0 方 法 。 为 了 简单 起 见 ， 这 里 包含 了 郴 
数 和 方法 的 代码 。 


例 9-4: 可 以 判断 值 的 类 型 的 type(O) 函 数 

















pA 

* 以 字符 串 形 式 返回 o 的 类 型 : 

* -如 果 o 是 nulL1, 返回 "null"; 如 果 o 是 NaN, 返回 "nan" 

*- 如 果 typeof 所 返回 的 值 不 是 " object”, 则 返回 这 个 值 

* (注意 些 JavaScript 的 实现 将 正则 表达 式 识 别 为 函数 ) 
*- 如 果 lo 的 类 不 是 ， '0bject"， 则 返回 这 个 值 
*- 如 果 o 包 含 构造 函数 并 且 这 个 构造 函数 具有 名 称 , 则 返回 这 个 名 称 

* -和 否则， 一 律 返 回 "0bject" 

wf 

function type(o){ 

var t,c,n;//type,class,name 

// 处 理 null 值 的 特殊 情形 

if(o0o===null)return" null" ;// 男 外 一 种 特殊 情形 :NaN 和 它 自身 不 相等 
if(o!==0)return"nan" ; // 如 果 typeof 的 值 不 是 ' 'object"， 则 使 用 这 个 值 

// 这 可 以 识别 出 原始 值 的 类 型 和 函 数 

if((t=typeof 0)!=="object")return t;// 返 回 对 象 的 类 名 ， 除 非 值 为 "Object" 
// 这 种 方式 可 以 识别 出 大 多 数 的 内 置 对 象 
ee classof(0))!=="0bject")return c; // 如 果 对 象 构造 函数 的 名 字 存 在 的 话 ， 则 返回 它 



































































































































































































































(n=0. .constructor,. getName( )) )return n;// 其 他 的 类 型 都 无 法 判别 ， 一 律 返 回 "0bject" 
return"Object",; 





} 
// 返 回 对 象 的 类 


function classof(o){ 

return Object.prototype.toString.call(o).slice(8, -1) 
};// 返 回 函 数 的 名 字 【〈 可 能 是 空 字 符 串 ) ， 不 是 函数 的 话 返回 nu]1 
Function.prototype.getName=function(){ 

if("name"in this)return this.name; 

return this.name=this.toString().match(/function\s*([^(]*)\(/)[1]; 
}; 




















这 种 使 用 构造 函数 名 字 来 识别 对 象 的 类 的 做 法 和 使 用 constructor 属 
性 一 样 有 一 个 问题 : 并 不 是 所 有 的 对 象 都 具有 constructor 属 性 。 此 外 ， 
并 不 是 所 有 的 函数 都 有 名 字 。 如 果 使 用 不 带 名 字 的 函数 定义 表达 式 馈 定 
义 一 个 构造 函数 ，getrName() 方 法 则 会 返回 空 字符 串 : 








// 这 个 构造 函数 没有 名 字 
var Complex=function(x,y)f{this.r=x;this.i=y;}// 这 个 构造 函数 有 名 字 
var Range=function Range(f,t){this.from=f;this.to=t,;} 

















9.5.4” 晃 式 辩 型 


上 文 所 描述 的 检测 对 象 的 类 的 各 种 技术 多 少 都 会 有 些 问 题 ， 至 少 在 
客户 端 JavaScript 中 是 如 此 。 解 决 办 法 就 是 规避 掉 这 些 问 题 : 不 要 关 
注 “ 对 象 的 类 是 什么 ”， 而 是 关注 “对 象 能 做 什么 ”。 这 种 思考 问题 的 方式 
在 Python 和 Ruby 中 非常 普 过 ， 称 为 “ 鸭 式 辩 型 ”〈 这 个 表述 是 由 作家 
James Whitcomb Riley 提 出 的 ) 。 


像 昌 子 一 样 走 路 、 游 泳 并 且 咀 咀 叫 的 马 就 是 鸭子 。 


对 于 JavaScript 程 序 员 来 说 ， 这 人 句 话 可 以 理解 为 “如果 一 个 对 象 可 以 
像 鸭 子 一 样 走 路 、 游 泳 并 且 咀 嘎 叫 ， 束 认为 这 个 对 象 是 鸭子 ， 哪 介 它 并 
不 是 从 鸭子 类 的 原型 对 象 继承 而 来 的 ”。 


我 们 拿 例 9-2 中 的 Range 类 来 举例 好 了 。 起 初 定 义 这 个 类 用 以 描述 数 
字 的 范围 。 但 要 注意 ，Range() 构 造 函 数 并 没有 对 实 参 进行 类 型 检查 以 
确保 实 参 是 数字 类 型 。 但 却 将 参数 使 用 “二 ”运算 符 进行 比较 运算 ， 因 为 
这 里 假定 它们 是 可 比较 的 。 同 样 ，includes() 方 法 使 用 “<==” 运 算 符 进行 
比较 ， 但 没有 对 范围 的 结束 点 进行 类 似 的 假设 。 因 为 类 并 没有 强制 使 用 
特定 的 类 型 ， 它 的 inlcudes0 〇 方法 可 以 作用 于 任何 结束 点 ， 只 要 结束 点 可 
以 用 关系 运算 符 执 行 比较 运算 。 











Var lowercase=new Range("a","z"); 


var thisYear=new Range(new Date(2009,0,1),new Date(2010,0,1)); 


Range 类 的 foreach() 方 法 中 也 没有 显 式 地 检测 表示 范围 的 结束 点 的 
类 型 ， 但 Math.ceil() 和 “++” 运 算 符 表 明 它 只 能 对 数字 结束 点 进行 操作 。 


另外 一 个 例子 ， 回 想 一 下 在 7.11 节 中 所 讨论 的 类 数组 对 象 。 在 很 多 
场景 下 ， 我 们 并 不 知道 一 个 对 象 是 否 真 的 是 Array 的 实例 ， 当 然 是 可 以 
通过 判断 是 否 包含 非 负 的 length 属 性 来 得 知 是 否 是 Array 的 实例 。 我 们 
说 “包含 一 个 值 是 非 负 整数 的 length” 是 数组 的 一 个 特征 一 一 “会 走路 ”， 
0 的 对 象 都 可 以 当做 数组 来 对 待 〈 在 很 多 情形 

Da 


然而 必须 要 了 解 的 是 ， 真 正 数 组 的 length 属 性 有 一 些 独 有 的 行为 : 
当 添 加 新 的 元 系 时 ， 数 组 的 长 度 会 自动 更 新 ， 并 且 当 给 length 属 性 设置 
一 个 更 小 的 整数 时 ， 数 组 会 被 目 动 截断 。 我 们 说 这 些 特征 是 “会 洲 
泳 ? 和 ”嘎嘎 叫 ”。 如 有 果 所 实现 的 代码 需要 “会 游泳? 且 能 “嘎嘎 叫 ”， 则 不 能 
使 用 只 “会 走路 ”的 类 似 数组 的 对 象 。 


上 文 所 讲 到 的 鸭 式 辩 型 的 例子 提 到 了 进行 对 象 的 “=” 运算 符 的 职员 
以 及 length 属 性 的 特殊 行为 。 但 当 我 们 提 到 鸭 式 办 型 时 ， 往 往 是 说 检测 
对 象 是 否 实现 了 一 个 或 多 个 方法 。 一 个 强 类 型 的 triathlon0) 函 数 所 需要 的 
参数 必须 是 TriAthlete 对 象 。 而 一 种 “ 鸭 式 辩 型 ? 式 的 做 法 是 ， 只 要 对 象 包 
含 walk()、swim() 和 bike(O) 这 三 个 方法 就 可 以 作为 参数 传 入 。 同 理 ， 可 以 
重新 设计 Range 类 ， 使 用 结束 点 对 象 的 compareTo() 和 succ() (successor) 
方法 来 代 蔡 “<” 和 “++? 运 算 符 。 


枫 式 辩 型 的 实现 方法 让 人 感觉 太 “放任 目 流 ”: 仅仅 是 假设 输入 对 象 
实现 了 必要 的 方法 ， 根 本 没有 执行 进一步 的 检查 。 如 果 输 入 对 象 没有 遵 
循 “假设 "， 那 么 当代 码 试 图 调用 那些 不 存在 的 方法 时 就 会 报错 。 男 一 种 
实现 方法 是 对 输入 对 象 进行 检查 。 但 不 是 检查 它们 的 类 ， 而 是 用 适当 的 
名 字 来 检查 它们 所 实现 的 方法 。 这 样 可 以 将 非法 输入 尺 可 能 早 地 拦截 在 
外 ， 并 可 给 出 带 有 更 多 提示 信息 的 报错 。 


例 9-5 中 按照 鸭 式 辩 型 的 理念 定义 了 quacks0 〇 函数 ( 函 数 名 
叫 "implements" 会 更 加 合适 ， 但 implements 是 保留 字 ) 。quacksO0 用 以 检 
碍 一 个 对 象 〈 第 一 个 实 参 ) 是 否 实现 了 剩 下 的 参数 所 表示 的 方法 。 对 于 
除 第 一 个 参数 外 的 每 个 参数 ， 如 果 是 字符 串 的 话 则 直接 检查 是 否 存 在 以 
它 命名 的 方法 ;如果 是 对 象 的 话 则 检查 第 一 个 对 象 中 的 方法 是 否 在 这 个 
























































对 象 中 也 具有 同名 的 方法 ， 如 果 参 数 是 函数 ， 则 假定 它 是 构造 冰 数 ， 函 
J 法 是 否 在 构造 冰 数 的 原型 对 象 中 也 具有 同 
方法 。 


例 9-5: 利用 鸭 式 辩 型 实现 的 函数 























// 如 果 o 实 现 了 除 第 一 个 参数 之 外 的 参数 所 表示 的 方法 ， 则 返回 true 
function quacks(o/*,...*/){ 

for(var i=1;i<arguments.length;i++){// 遍 历 0 之 后 的 所 有 参数 
var arg=arguments[i]; 

switch(typeof arg){// 如 果 参 数 是 : 
case'string'://string: 直 接 用 名 字 做 检查 
if(typeof of[arg]!=="function")return false; 
continue,; 
case'function'://function: 检 查 函 数 的 原型 对 象 上 的 方法 
// 如 果实 参 是 函数 , 则 使 用 它 的 原型 
arg=arg.prototype;// 进 入 下 一 个 case 
case'object'://object :检查 匹配 的 方法 
for(var m in arg){// 遍 历 对 象 的 每 个 属性 
if(typeof arg[m]!=="function")continue;// 跳 过 不 是 方法 的 属性 
if(typeof o[m]!=="function")return false 


} 
} 
// 如 果 程序 能 执行 到 这 里 ， 说 明 o 实 现 了 所 有 的 方法 


return true; 


} 
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关于 这 个 guacks() 函 数 还 有 一 些 地 方 是 需要 尤为 注意 的 。 首 先 ， 这 
里 只 是 通过 特定 的 名 称 来 检测 对 象 是 否 含有 一 个 或 多 个 值 为 函数 的 属 
性 。 我 们 无 法 得 知 这 些 已 经 存在 的 属性 的 细节 人 信息， 比如， 函数 是 干 什 
么 用 的 ? 它们 需要 多 少 参 数 ? 参数 类 型 是 什么 ?然而 这 是 鸭 式 辩 型 的 本 
质 所 在 ， 如 果 使 用 鸭 式 辩 型 而 不 是 强制 的 类 型 检测 的 方式 定义 API， 那 
么 创建 的 API 应 当 更 具有 灵活 性 才 可 以 ， 这 样 才能 确保 你 提供 给 用 户 的 
API 更 加 安全 可 靠 。 关 于 quacks0 函 数 还 有 另 一 问题 需要 注意 ， 吏 是 它 不 
能 应 用 于 内 置 类 。 比 如 ， 不 能 通过 quacks(o,Array) 来 检测 o 是 否 实现 了 
Aray 中 所 有 同名 的 方法 。 原 因 是 内 置 类 的 方法 都 是 不 可 枚 举 的 ， 
quacks0O 中 的 fovin 循 环 无 法 壳 历 到 和 它们“〈 注 意 ， 在 ECMAScript 5 中 有 一 
个 补救 办 法 ， 就 是 使 用 Ojbect.getOwnPropertyNames()) 。 


9.6 JavaScript 中 的 面 癌 对 象 技术 


到 目前 为 止 ， 我们 讨论 了 JavaScript 中 类 的 基础 知识 : 原型 对 象 的 重 
要 性 、 它 和 构造 疯 数 之 间 的 联系 、instanceof 运 算 符 如 何 工 作 等 。 本 节 将 














目光 转 问 一 些 实际 的 例子 《尽管 这 不 是 基础 知识 ) ， 包 括 如 何 利用 
JavaScript 中 的 关 进 行 编程 。 我 们 从 两 个 重要 的 例子 开始 ， 这 两 个 例子 中 
实现 的 类 非常 有 意思 ， 接 下 来 的 讨论 都 将 基于 此 作 展 开 。 


9.6.1 一 个 例子 : 集合 类 


集合 (set) 是 一 种 数据 结构 ， 用 以 表示 非 重 复 值 的 无 序 集合 。 集 合 
的 基础 方法 包括 添加 值 、 检 测 值 是 否 在 集合 中 ， 这 种 集合 需要 一 种 通用 
的 实现 ， 以 保证 操作 效率 。JavaScript 的 对 象 是 属性 名 以 及 与 之 对 应 的 值 
的 基本 和 集合。 因此 将 对 象 只 用 做 字符 串 的 集合 是 大 材 小 用 。 例 子 9-6 用 
JavaScript 实 现 了 一 个 更 加 通用 的 Set 类 ， 它 实现 了 从 JavaScript 值 到 唯一 
字符 串 的 映射 ， 然 后 将 字符 串 用 做 属 ， 对 象 和 函数 都 不 具备 如 此 简 
明 可 靠 的 唯一 字符 串 表 示 。 因 此 集合 类 必须 给 集合 中 的 每 一 个 对 象 或 函 
数 定义 一 个 唯一 的 属性 标识 。 


例 9-6: Set.js: 值 的 任意 集合 




















function Set(){// 这 是 一 个 构造 函数 

this .values={};// 集 合 数 据 保存 在 对 象 的 属性 里 
this ,n=0;// 集 合 中 值 的 个 数 
this.add.apply(this,arguments);// 把 所 有 参数 都 添加 进 这 个 集合 












































} 

// 将 每 个 参数 都 添加 至 集合 
Set.prototype.add=function( ){ 

for(var i=0;i<arguments.length, i 
var val= arguments[i]; // 待 添加 到 集合 中 的 1 
var str=Set._v2s(val); // 把 它 转换 为 字符 囊 
if(!1this.values.hasownProperty(str)){// 如 果 不 在 集合 中 
this.values[str]=val;// 将 字符 串 和 值 对 应 起 来 

this.n++;// 集 合 中 值 的 计数 加 一 

} 


} 

return this;// 支 持 链 式 方法 调用 
};// 从 集合 删除 元 素 ， 这 些 元 素 由 参数 指定 

Set .prototype.remove=function( ){ 

for(var i=0;1i<arguments.1Llength;i++){f// 遍 历 每 个 参数 
var str=Set._v2s(arguments[i]);// 将 字符 串 和 值 对 应 起 来 
if(this.values.hasOwnProperty(str)){// 如 果 它 在 集合 中 
delete this.values[str];// 删 除 它 

this.n--;// 集 合 中 值 的 计数 减 一 

} 
} 
return this;// 支 持 链 式 方法 调用 
};// 如 果 集 合 包 含 这 个 值 ， 则 返回 true; 否则 ， 返 回 false 
Set.prototype.contains=function(value)t{ 

return this.values.hasOwnProperty(Set._v2s(value)); 
};// 返 回 集合 的 大 小 
Set.prototype.size=function(){ 

return this.n; 

};// 遍 历 集 合 中 的 所 元素 ， 在 指定 的 上 下 文中 调用 ff 




































































































































































Set .prototype.foreach=function(f, context){ 
for(var s in this.values)// 遍 历 集 合 中 的 所 有 字符 串 
if(this.values.hasownProperty(s))// 忽 略 继承 的 属性 
f.call(context,this.values[s]);// 调 用 f， 传 入 value 

};// 这 是 一 个 内 部 函数 ， 用 以 将 任意 JavaScript 值 和 唯一 的 字符 串 对 应 起 来 
Set._v2s=function(val)t{ 

Switch(Vval){ 

case undefined:return'u';// 特 殊 的 原始 值 

case null:return'n';// 值 只 有 一 个 字母 

case true:return't';// 代 码 
case false:return'f',; 
default:switch(typeof val){ 

case'number' :return'#'+val;// 数 字 都 带 有 # 前 级 
case'string' :return'"'+val;// 字 符 串 都 带 有 "前 绥 
default:return'@'+objectId(val);//0bjs and funcs get@ 
} 

} 

// 对 任意 对 象 来 说 ， 都 会 返回 一 个 字符 串 
// 针 对 不 同 的 对 象 ， 这 个 函数 会 返回 不 同 的 字符 串 
// 对 于 同一 个 对 象 的 多 次 调用 ， 总 是 返回 相同 的 字符 串 
// 为 了 做 到 这 一 点 ， 它 给 o 创 建 了 一 个 属性 ， 在 ES5 中 ， 这 个 属性 是 不 可 枚 举 且 是 只 读 的 
function objectId(o){ 
var prop="|**objectid**|";// 私 有 属性 ， 用 以 存放 id 
if(!10.hasOownProperty(prop))// 如 果 对 象 没 有 id 
o[prop]=Set._v2s.next++;// 将 下 一 个 值 赋 给 它 
return o[prop];// 返 回 这 个 id 
} 












































































































































































































































}; 
Set, Vv2s,next=100;// 设 置 初始 id 的 值 








9.6.2 一 个 例子 : 枚 举 类 型 


枚 举 类 型 (enumerated type) 是 一 种 类 型 ， 它 是 值 的 有 限 集合 ， 如 
果 值 定义 为 这 个 类 型 则 该 值 是 可 列 出 (或 “可 枚 举 ”) 的 。 在 C 及 其 派生 
语言 中 ， 枚 举 类 型 是 通过 关键 字 enum 声 明 的 。Enum 是 ECMAScript 5 中 
的 保留 字 〈 还 未 使 用 ) ， 很 有 可 能 在 将 来 JavaScript 就 会 内 置 支持 榴 举 类 
型 。 到 那 时 ， 例 9-7 展 示 了 如 何在 JavaScript 中 定义 枚 举 类 型 的 数据 。 需 
要 注意 的 是 ， 这 里 用 到 了 例 6-1 中 的 ipheritO 函 数 。 


例 9-7 包 含 一 个 单独 函数 enumeration()。 但 它 不 是 构造 函数 ， 它 并 没 
有 定义 一 个 名 叫 "enumeration" 的 类 。 相 反 ， 它 是 一 个 工厂 方法 ， 每 次 调 
用 它 都 会 创建 并 返回 一 个 新 的 类 ， 比 如 : 
































// 使 用 4 个 值 创 建新 的 Coin 类 : Coin .Penny,Coin.Nickel 等 

var Coin=enumeration({Penny:1,Nickel:5,Dime:10,Quarter:25}); 
var c=Coin.Dime;// 这 是 新 类 的 实例 

c instanceof Coin//=>true:instanceof 正 常 工作 
c.constructor==Coin/V/=>true: 构 造 函 数 的 属性 正常 工作 
Coin,Quarter+3*Coin,Nickel//=>40;: 将 值 转换 为 数字 
Coin,Dime==10/V/=>true: 更 多 转换 为 数字 的 例子 
Coin,Dime> 之 Coin,NickelL//=>true: 关 系 运 算 符 正常 工作 
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String(Coin.Dime)+":"+Coin.Dime//=>"Dime:10" :强制 转换 为 字符 虽 











这 个 例子 清楚 地 展示 了 JavaScript 类 的 灵活 性 ，JavaScript 的 类 要 比 
C++ 和 Java 语 言 中 的 静态 类 要 更 加 灵活 。 


例 9-7: JavaScript 中 的 枚 举 类 型 











// 这 个 函数 创建 一 个 新 的 枚 举 类 型 ， 实 参 对 象 表示 类 的 每 个 实例 的 名 字 和 值 
// 返 回 值 是 一 个 构造 函数 ， 它 标识 这 个 新 类 
// 注 意 ， 这 个 构造 函数 也 会 抛 出 异常 : 不 能 使 用 它 来 创建 该 类 型 的 新 实例 
// 返 回 的 构造 函数 包含 名 / 值 对 的 映射 表 
// 包 括 由 值 组 成 的 数组 ， 以 及 一 个 foreach( ) 迭 代 器 函数 
function enumeration(namesToValues ){// 这 个 虚拟 的 构造 函数 是 返回 值 
var enumeration=function(){throw"Can't Instantiate Enumerations";};// 枚 举 值 继承 自 这 

个 对 象 
var proto=enumeration.prototype={ 
constructor :enumeration,// 标 识 类 型 
tostring:function(){return this.name;},// 返 回 名 字 
value0f:function()f{return this.value;},// 返 回 值 
toJSON:function(){freturn this.name;}// 转 换 为 JSON 
}; 
enumeration.values=[];// 用 以 存放 枚 举 对 象 的 数组 
// 现 在 创建 新 类 型 的 实例 
for(name in namesToValues){// 遍 历 每 个 值 
var e=inherit(proto);// 创 建 一 个 代表 它 的 对 象 
e.name=name;// 给 它 一 个 名 字 
e.value=namesToValues[name];// 给 它 一 个 值 
enumeration[name]=e;// 将 它 设置 为 构造 函数 的 属性 
enumeration.values .push(e);// 将 它 存 储 到 值 数组 中 
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} 

// 一 个 类 方法 ， 用 来 对 类 的 实例 进行 迭代 
enumeration.foreach=function(f,c){ 

for(var i=0;i<this.values.length;i++)f.call(c, this.values[i]); 
};// 返 回 标 识 这 个 新 类 型 的 构造 函数 

return enumeration; 


} 














如 果 用 这 个 枚 举 类 型 来 实现 一 个 "hello world" 小 程序 的 话 ， 就 可 以 
使 用 枚 举 类 型 来 表示 一 副 扑 元 牌 。 例 9-8 中 使 用 enumeration0 函 数 实现 了 
这 个 表示 一 副 扑 克 牌 的 类 占 。 


例 9-8: 使 用 枚 举 类 型 来 表示 一 副 扑 克 牌 











// 定 义 一 个 表示 " 玩 牌 "的 类 
function Card(suit,rank)t{ 
this,suit=suit,;// 每 张 牌 都 有 花 
this,rank=rank;// 以 及 点 数 
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} 
// 使 用 枚 举 类 型 定义 花色 和 点 数 
Card.Suit=enumeration({Clubs:1,Diamonds:2,Hearts:3,Spades:4}); 











Card.Rank=enumeration( {Two:2,Three:3,Four:4,Five:5,Six:6, 

Seven:7,Eight:8,Nine:9,Ten:10, 

Jack:11, Queen:12,King:13,Ace:14});// 定 义 用 以 描述 牌 面 的 文本 

Card.prototype.toString=function(){ 

return this.rank.toString()+"of"+this.suit.toString(); 

};// 比 较 扑克 有 牌 中 两 张 牌 的 大 小 

Card.prototype.compareTo=function(that)t{ 

if(this.rank=<=that.rank)return-1; 

if(this.rank>that.rank)return 1; 

return 0; 

};// 以 扑克 牌 的 玩法 规则 对 牌 进行 排序 的 函数 

Card.orderByRank=function(a,b)f{return a.compareTo(b);};// 以 桥牌 的 玩法 规则 对 扑 牌 进行 排 
序 的 函数 

Card.orderBySuit=function(a,b)t{ 

if(a.suit<b.suit)return-1; 

if(a.suit>b.suit)return 1; 

if(a.rank=<=b.rank)return-1; 

if(a.rank>b.rank)return 1; 

return 0©; 

};// 定 义 用 以 表示 一 副 标 准 扑克 牌 的 类 

function Deck(){ 

var cards=this.cards=[];// 一 副 牌 就 是 由 有 牌 组 成 的 数组 

Card.Suit.foreach(function(s){// 初 始 化 这 个 数组 

Card.Rank.foreach(function(r){ 

cards.push(new Card(s,r)); 

}); 

}); 


} 

// 洗 牌 的 方法 :重新 洗 牌 并 返回 洗 好 的 牌 

Deck.prototype.shuffle=function(){// 遍 历数 组 中 的 每 个 元 素 ， 随 机 找 出 牌 面 最 小 的 元 素 ， 并 与 2 
前 遍历 的 元 素 ) 交换 

var deck=this.cards, len=deck.1length; 

for(var i=len-1;i>0;i--){ 

var r=Math.floor(Math.random()*(i+1)),temp;// 随 机 数 

temp=deck[i],deck[i]=deck[r],deck[r]=temp;// 交 换 

} 
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return this; 

}; // 发 牌 的 方法 :3 返回 牌 的 数组 
Deck.prototype.deal=function(n){ 
if(this.cards.length=<=n)throw"Out of cards"; 
return this.cards.splice(this.cards.1length-n,n); 
};// 创 建 一 副 新 扑克 牌 ， 洗 牌 并 发 牌 

var deck=(new Deck()).shuffle( ); 

var hand=deck.deal(13).sort(Card.orderBySuit); 











9.6.3 ”标准 转换 方法 


3.8.3 ”和 6.10 节 讨论 了 对 象 类 型 转换 所 用 到 的 重要 方法 ， 有 一 些 方 
法 是 在 需要 做 类 型 转换 时 由 JavaScript 解 释 咒 自动 调用 的 。 不 需要 为 定义 
的 每 个 类 都 实现 这 些 方 法 ， 但 这 些 方法 的 确 非常 重要 ， 如 果 没 有 为 自 定 
~ 实现 这 些 方法 ， 也 应 当 是 有 意 为 之 ， 而 不 应 当 因 为 下 急 而 漏 掉 了 
Ts 


最 重要 的 方法 首 当 toStringO0。 这 个 方法 的 作用 是 返回 一 个 可 以 表示 














这 个 对 象 的 字符 串 。 在 希望 使 用 字符 串 的 地 方 用 到 对 象 的 话 《〈 比 如 将 对 
象 用 做 属性 名 或 使 用 “+” 运 算 符 来 进行 字符 串 连 接 运 算 ) ，JavaScript 会 
自动 调用 这 个 方法 。 如 果 没 有 实现 这 个 方法 ， 类 会 默认 从 
Object.prototype 中 继承 toString() 方 法 ， 这 个 方法 的 运算 结果 是 "[object 
Objectlj"， 这 个 字符 串 用 处 不 大 。toString() 方 法 应 当 返 回 一 个 可 读 的 字 
符 串 ， 这 样 最 终 用 户 才能 将 这 个 输出 值 利用 起 来 ， 然 而 有 时 候 并 不 一 定 
非 要 如 此 ， 不 管 怎样 ， 可 以 返回 可 读 字 符 串 的 toString() 方 法 也 会 让 程序 
调试 变 得 更 加 轻松 。 例 9-2 和 例 9-3 中 的 Range 类 和 Complex 类 都 定义 了 
toString() 方 法 ， 例 9-7 中 的 枚 举 类 型 也 定义 了 toString()。 下 面 我 们 会 给 例 
9-6 中 的 Set 类 也 定义 toString(0) 方 法 。 





toLocaleString() 和 和 toString() 极 为 类 似 ，toLocaleStri ngO 是 以 本 地 人 敏 
感性 (locale-sensitive〉 的 方式 来 将 对 象 转换 为 字符 串 。 默 认 情 况 下 ， 
对 象 所 继承 的 toLocaleString() 方 法 只 是 简单 地 调用 toString() 方 法 。 有 一 
些 内 置 类 型 包含 有 用 的 toLocaleString() 方 法 用 以 实际 上 返回 本 地 化 相关 
的 字符 串 。 如 果 需 要 为 对 象 到 字符 串 的 转换 定义 toString0) 方 法 ， 那 么 同 
样 需要 定义 toLocaleString() 方 法 用 以 处 理 本 地 化 的 对 象 到 字符 串 的 转 
换 。 下 面 的 Set 类 的 定义 中 会 有 相关 代码 。 


第 三 个 方法 是 valueOf()， 它 用 来 将 对 象 转换 为 原始 值 。 比 如 ， 当 数 
学 运算 符 ( 除 了 “+” 运 算 符 ) 和 关系 运算 符 作 用 于 数字 文本 表示 的 对 象 
时 ， 会 目 动 调用 valueOfO 方 法 。 大 多 数 对 象 都 没有 合适 的 原始 值 来 表示 
它们 ， 也 没有 定义 这 个 方法 。 但 在 例 9-7 中 的 枚 举 类 型 的 实现 则 说 明 
valueOfO 方 法 是 非常 重要 的 。 














第 四 个 方法 是 toJSONO， 这 个 方法 是 由 JSON.stringifyO 自 动 调用 
的 。JSON 格 式 用 于 序列 化 民 好 的 数据 结构 ， 而 且 可 以 处 理 JavaScript 原 
始 值 、 数 组 和 纯 对 象 。 它 和 类 无 和 关 ， 当 对 一 个 对 象 执行 序列 化 操作 时 ， 
它 会 忽略 对 象 的 原型 和 构造 函数 。 比 如 将 Range 对 象 或 Complex 对 象 作 
为 参数 传 入 JSON.stringify0， 将 会 返回 诸如 {f"form'":1 "to":3} 或 
{1,"i":-1} 这 种 字符 串 。 如 果 将 这 些 字 符 串 传 入 JSON.parse()， 则 会 得 
到 一 个 和 Range 对 象 和 Complex 对 象 具 有 相同 属性 的 纯 对 象 ， 但 这 个 对 
象 不 会 包含 从 Range 和 Complex 继 承 来 的 方法 。 


这 种 序列 化 操作 非常 适用 于 诸如 Range 和 Complex 这 种 类 ， 但 对 于 
其 他 一 些 类 则 必须 自 定义 toJSONO 方 法 来 定制 个 性 化 的 序列 化 格式 。 如 
果 一 个 对 象 有 toJSON() 方 法 ，JSON.stringify() 并 不 会 对 传 入 的 对 象 做 序 
列 化 操作 ， 而 会 调用 toJSON(O) 来 执行 序列 化 操作 (序列 化 的 值 可 能 是 原 


始 值 也 可 能 是 对 象 )。 比 如 ，Date 对 象 的 toJSON() 方 法 可 以 返回 一 个 表 
示 日 期 的 字符 串 。 例 9-7 中 的 枚 举 类 型 也 是 如 此 : 它们 的 toJSONO 方 法 和 
toString() 方 法 完全 一 样 。 如 果 要 模拟 一 个 集合 ， 最 接近 JSON 的 表示 方 

法 就 是 数组 ， 因 此 在 下 面 的 例子 中 将 定义 toJSON() 方 法 用 以 将 集合 对 象 
转换 为 值 数组 。 


例 9-6 中 的 Set 类 并 没有 定义 上 述 方法 中 的 任何 一 个 。JavaScript 中 没 
有 哪个 原始 值 可 以 表示 和 集合， 因此 也 没 必要 定义 valueOf() 方 法 ， 但 该 类 
应 当 包 含 toString()、toLocaleString() 和 toJSON0O) 方 法 。 可 以 用 如 下 代码 
来 实现 。 注 意 extendO 函 数 〈( 例 6-2〉 的 用 法 ， 这 里 使 用 extend() 来 向 
Set.prototype 来 添加 方法 : 














// 将 这 些 方法 添加 至 Set 类 的 原型 对 象 中 
extend(Set.prototype,{// 将 集合 转换 为 字符 串 
tostring: function(){ 











Var s="{", 
i=0; 
this foreach(function(v){s+=((i++>0)?",":"")+v;}); 


return s+"}"; 

} // 类 似 toString, 但 是 对 于 所 有 的 值 都 将 调用 toLocaleString() 
toLocalestring: function(){ 

Var s="{",1i=0; 

this. foreach( function(v){ 
if(i++>>0)s+=", 

if(v==nul1l)s+=v; /null 和 undefined 

else s+=v. toLocalestring( ); // 其 他 情况 

}); 

return s+"}"; 

},// 将 集 合 转换 为 值 数组 
toArray:function(){ 

var a=[]; 
this.foreach(function(v){a.push(v);}); 
































return a; 








} 
});// 对 于 要 从 JSON 转 换 为 字符 串 的 集合 都 被 当做 数组 来 对 待 
Set .prototype.toJSON=Set .prototype. toArray; 








9.6.4 ”比较 方法 


I 运算 符 比 较 对 象 时 ， 比 较 的 是 引用 而 不 是 值 。 也 就 
是 说 ， 给 定 两 个 对 象 引 用 ， 如 果 要 看 它们 是 人 否 指 癌 同一 个 对 象 ， 不 是 检 
查 这 两 个 对 象 是 否 具 有 相同 的 属性 名 和 相同 的 属性 值 ， 而 是 直接 比较 这 
两 个 单独 的 对 象 是 否 相等 ， 或 者 比较 它们 的 顺序 (就 像 <<” 和 “二 ”运算 
符 进 行 的 比较 一 样 ) 。 如 果 定 义 一 个 类 ， 并 且 和 希望 比较 类 的 实例 ， 应 该 
定义 合适 的 方法 来 执行 比较 操作 。 














Java 编 程 语言 有 很 多 用 于 对 象 比较 的 方法 ， 将 Java 中 的 这 些 方法 借 
用 到 JavaScript 中 是 一 个 不 错 的 主意 。 为 了 能 让 自 定 义 类 的 实例 具备 比较 
yt, 定义 一 个 名 叫 equals() 实 例 方法 。 这 个 方法 只 能 接收 一 个 实 

， 如 果 这 个 实 参 和 调用 此 方法 的 对 象 相 等 的 话 则 返回 true。 当 然 ， 这 
| 等 ”的 含义 是 根据 类 的 上 下 文 来 决定 的 。 对 于 简单 的 类 ， 可 
以 通过 简单 地 比较 它们 的 constructor 属 性 来 确保 两 个 对 象 是 相同 类 型 ， 
然后 比较 两 个 对 象 的 实例 属性 以 保证 它们 的 值 相 等 。 例 9-3 中 的 Complex 
9 LL 了 这 样 的 equals0 方 法， 我 们 可 以 轻 易 地 为 Range 类 也 实现 类 似 

: 方 ; 























//Range 类 重 写 它 的 constructor 属 性 ， 现 在 将 它 添加 进去 
Range.prototype,constructor=Range;// 一 个 Range 对 象 和 其 他 不 是 Range 的 对 象 均 不 相等 
// 当 且 仅 当 两 个 范围 的 端点 相等 ， 它 们 才 相 
Range.prototype.equals=function(that)t{ 
if(that==null)return false;// 处 理 null 和 undefined 
if(that.constructor!==Range)return false;// 处 理 非 Range 对 象 
// 当 且 仅 当 两 个 端点 相等 ， 才 返回 true 

return this.from==that.frome& &this.to==that.to; 
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给 Set 类 定义 equals() 方 法 稍微 有 些 复杂 。 不 能 简单 地 比较 两 个 集合 
的 values 属 性 ， 还 要 进行 更 深层 次 的 比较 : 








Set .prototype.equals=function(that)f{// 一 些 次 要 情况 的 快捷 处 理 
if(this===that)return true;// 如 果 that 对 象 不 是 一 个 集合 ， 它 和 this 不 相等 
// 我 们 用 到 了 instanceof， 使 得 这 个 方法 可 以 用 于 Set 的 任何 子 类 

// 如 果 和 希望 采用 鸭 式 辩 型 的 方法 ， 可 以 降低 检查 的 严格 程度 

// 或 者 可 以 通过 this.constructor==that.constructor 来 加 强 检查 的 严格 程度 
// 注 意 ，null 和 undefined 两 个 值 是 无 法 用 于 instanceof 运 算 的 
if(!(that instanceof Set))return false;// 如 果 两 个 集合 的 大 小 不 一 样 ， 则 它们 不 相等 
if(this.size()!=that.size())return false; // 见 在 检查 两 个 个 集合 中 的 元 素 是 否 完 全 一 样 
// 如 果 两 个 集合 不 相等 ， 则 通过 抛 出 异常 来 终止 foreach 循 环 

try{ 

this.foreach(function(v){if(!that.contains(v))throw false;}); 

return true;// 所 有 的 元 素 都 匹配 : 两 个 集合 相等 

}catch(x){ 
if(x===false)return false;// 如 果 集 合 中 有 元 素 在 另外 一 个 集合 中 不 存在 
throw x;// 重 新 殷 出 异常 

} 

}; 






































































































































































































































按照 我 们 需要 的 方式 比较 对 象 是 否 相 等 常常 是 很 有 用 的 。 人 
类 来 说 ， 往 往 需 要 比较 一 个 实例 “大 于 ”或 者 “小 于 ”为 外 一 个 示例 。 
如 ， 你 可 能 会 基于 Range 对 象 的 下 边界 来 定义 实例 的 大 小 关系 。 必 举 类 
型 可 以 根据 名 字 的 字母 表 顺 序 来 定义 实例 的 大 小 ， 也 可 以 根据 它 包 含 的 














数值 〈 假 设 它 包含 的 都 是 数字 ) 来 定义 大 小 。 忆 一 方面 ，Set 对 象 其 实 
是 无 法 排序 的 。 


如 果 将 对 象 用 于 JavaScript 的 关系 比较 运算 符 ， 比 如 <<” 和 “<<=”， 
JavaScript 会 首先 调用 对 象 的 valueOf() 方 法 ， 如 果 这 个 方法 返回 一 个 原始 
值 ， 则 直接 比较 原始 值 。 例 9-7 中 由 enumeration() 方 法 所 返回 的 枚 举 类 型 
包含 valueOfO 方 法 ， 因 此 可 以 使 用 关系 运算 符 对 它们 做 有 意义 的 比较 。 
但 大 多 数 类 并 没有 valueOf() 方 法 ， 为 了 按照 显 式 定义 的 规则 来 比较 这 些 
类 型 的 对 象 ， 可 以 定义 一 个 名 叫 compareTo() 的 方法 (同样 ， 这 里 遵照 
Java 中 的 命名 约定 ) 。 


compareTo() 方 法 应 当 只 能 接收 一 个 参数 ， 这 个 方法 将 这 个 参数 和 
调用 它 的 对 象 进行 比较 。 如 果 this 对 象 小 于 参数 对 象 ，compareTo() 应 当 
返回 比 0 小 的 值 。 如 果 this 对 象 大 于 参数 对 象 ， 应 当 返 回 比 0 大 的 值 。 如 
果 两 个 对 象 相 等 ， 应 当 返 回 0。 这 些 关 于 返回 值 的 约定 非常 重要 ， 这 样 
我 们 可 以 用 下 面 的 表达 式 蕉 换 掉 关系 比较 和 相等 性 运算 符 : 








每 替换 蔡 换 为 

a<b a.CompareTo(b)<0 
a<=b a.compareTo(b)<=0 
a>b a.CompareTo(b)>0 
a>=b a.compareTo(b)>=0 
a==b a.compareTo(b)==0 
al=b a.compareTo(b)!=0 


例 9-8 中 的 Card 类 定义 了 该 类 的 compareTo0 方 法 ， 可 以 给 Range 类 添 
加 一 个 类 似 的 方法 ， 用 以 比较 它们 的 下 边界 : 


Range.prototype.compareTo=function(that){ 
return this.from-that.from; 


}; 





需要 注意 的 是 ， 这 个 方法 中 的 减法 操作 根据 两 个 Range 对 象 的 关系 


正确 地 返回 了 小 于 0、 等 于 0 和 大 于 0 的 值 。 例 9-8 中 的 Card.Rank 枚 举 值 包 
含 valueOfO 方 法 ， 其 实 也 可 以 给 Card 类 实现 类 似 的 compareTo0) 方 法 。 


上 文 所 提 到 的 equals0) 方 法 对 其 参数 执行 了 类 型 检查 ， 如 采 参 数 关 
型 不 合法 则 返回 false。compareTo() 方 法 并 没有 返回 一 个 表示 “这 两 个 值 
不 能 比较 ”的 值 ， 由 于 compareTo0 没 有 对 参数 做 任何 闫 型 栓 碍 ， 因此 如 
果 给 compareTo(0) 方 法 传 入 错误 类 型 的 参数 ， 往 往 会 抛 出 异 钊 


注意 ， 如 果 两 个 范围 对 象 的 下 边界 相等 ， 为 Range 类 定义 的 
compareTo() 方 法 会 返回 9。 这 意味 着 就 compareTo() 而 言 ， 任 何 两 个 起 始 
点 相同 一 的 Range 对 象 都 相等 。 这 个 相等 概念 的 定义 和 equals() 方 法 定义 
的 相等 概念 是 相 背 的 ， equals() 要 求 两 个 端 点 均 相 等 才 算 相等 。 这 种 相 
等 概念 上 的 差异 性 会 造成 很 多 bug， 最 好 将 Range 类 的 equals() 和 
compareTo() 方 法 中 处 理 相 等 的 逻辑 保持 一 致 。 这 里 是 Range 类 修正 后 的 
compareTo() 方 法 ， 它 的 比较 人 逻辑 和 equals() 保 持 一 至， 但 当 传 入 不 可 比 
较 的 值 时 仍然 会 报错 : 








// 根 ne 如 果 下 边界 相等 则 比较 上 边界 
// 如 果 传 入 非 Range 值 ， 贝 
// 当 且 仅 当 this ， 0 才 返 回 9 
Range.prototype.compareTo=function(that){ 

if(!(that instanceof Range)) 

throw new Error("Can't compare a Range with"+that); 
var diff=this.from-that.from;// 比 较 下 边界 
if(diff==0)diff=this.to-that.to;// 如 果 相 等 ， 比 较 上 边界 
return diff; 


}; 









































给 类 定义 了 compareTo() 方 法 ， 这 样 就 可 以 对 类 的 实例 组 成 的 数组 
进行 排序 了 - Array.sor t0 方 法 可 以 接收 一 个 可 选 的 参数 ， 这 个 参数 是 一 
个 函数 ， 用 来 比较 两 个 值 的 大 小 ， 这 个 函数 返回 值 的 约定 和 
compareTo() 方 法 保持 一 致 。 假 定 有 了 上 文 提 到 的 compareTo0 方 法 ， 了 驶 
可 以 很 方便 地 对 Range 对 象 组 成 的 数组 进行 排序 了 : 





ranges.sort(function(a,b){return a.compareTo(b);}); 








排序 运算 非常 重要 ， 如 果 已 经 为 类 定义 了 实例 方法 compareTo()， 
还 应 当 参 照 这 个 方法 定义 一 个 可 传 入 两 个 参数 的 比较 函数 。 使 用 
compareTo() 方 法 可 以 非常 轻松 地 定义 这 个 函数 ， 比 如 : 





Range.byLowerBound=function(a,b){treturn a.compareTo(b);}; 





使 用 这 个 方法 可 以 让 数组 排序 的 操作 变 得 非常 简单 : 





ranges.sort(Range.byLowerBound); 





有 些 类 可 以 有 很 多 方法 进行 排序 。 比 如 Card 类 ， 可 以 定义 两 个 方法 
分 别 按照 花色 排序 和 按照 点 数 排序 。 


9.6.5 ”方法 借用 


JavaScript 中 的 方法 没有 什么 特别 : 无 非 是 一 些 简单 的 函数 ， 赋 值 给 
了 对 象 的 属性 ， 可 以 通过 对 象 来 调用 它 。 一 个 函数 可 以 赋值 给 两 个 属 
性 ， 然 后 作为 两 个 方法 来 调用 它 。 比 如 ， 我 们 在 Set 类 中 就 这 样 做 了 ， 
人 并 让 它 可 以 和 toJSON() 方 法 一 样 完成 
同样 的 功能 。 


多 个 类 中 的 方法 可 以 共用 一 个 单独 的 函数 。 比 如 ，Array 类 通常 定 
义 了 一 些 内 置 方法 ， 如 果 定 义 了 一 个 类 ， 它 的 实例 是 类 数组 的 对 象 ， 则 
可 以 从 Array.prototype 中 将 函数 复制 至 所 定义 的 类 的 原型 对 象 中 。 如 果 
以 经 典 的 面向 对 象 语言 的 视角 来 看 JavaScript 的 话 ， 把 一 个 类 的 方法 用 到 
其 他 的 类 中 的 做 法 也 称 做 “多 重 继 承 ”(multiple ”inheritance〉。 然 而 ， 
JavaScript 并 不 是 经 典 的 面向 对 象 语言 ， 我 更 倾 同 于 将 这 种 方法 重用 更 正 
式 地 称 为 “方法 借用 ”(borrowing)。 


不 仅 Array 的 方法 可 以 借用 ， 还 可 以 自 定义 泛 型 方法 (generic 
method) 。 例 9-9 定 义 了 泛 型 方法 toString0 和 equals0， 可 以 被 Range、 
Complex 和 Card 这 些 简单 的 类 使 用 。 如 果 Range 类 没有 定义 equals0 方 
法 ， 可 以 这 样 借用 泛 型 方法 equals(): 














Range.prototype.equals=generic.equals; 





注意 ，generic.equalsO 只 会 执行 浅 比 较 ， 因 此 这 个 方法 并 不 适用 于 
其 实例 太 复 杂 的 类 ， 它 们 的 实例 属性 通过 其 equals0) 方 法 指 代 对 象 。 同 
样 需 要 注意 ， 这 个 方法 包含 一 些 特 殊 情 况 的 程序 逻辑 ， 以 处 理 新 增殖 
Set 对 象 中 的 属性 《〈 见 例 9-6) 。 


例 9-9: 方法 借用 的 泛 型 实现 











var generic={// 返 回 一 个 字符 串 ， 这 个 字符 串 包含 构造 函数 的 名 字 (如 果 构 造 函 数 包含 名 字 ) 
// 以 及 所 有 非 继承 来 的 、 非 函数 属性 的 名 字 和 值 

tostring:function(){ 
var s='[';// 如 果 这 个 对 象 包含 构造 函数 ， 且 构造 函数 包含 名 字 

// 这 个 名 字 会 作为 返回 字符 串 的 一 部 分 

// 需 要 注意 的 是 ， 函 数 的 名 字 属 性 是 非 标 准 的 ， 并 不 是 在 所 有 的 环境 中 都 可 月 
if(this.constructor&&this,.constructor.name) 
s+=this.constructor.name+":";// 枚 举 所 有 的 非 继 承 的 、 非 函数 属性 
Var N=0; 

for(var name in this){ 
if(!1this.hasOownProperty(name))continue;// 跳 过 继承 来 的 属性 
var value=this[name]; 

if(typeof value==="function")continue;// 跳 过 方法 
if(n++)s+=", vs 

s+=name+'='+Vvalue; 
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return s+']'; 

于 // 通 过 比较 this 和 that 的 构造 函数 和 实例 属性 来 判断 它们 是 否 相 等 

// 这 种 方法 只 适合 于 那些 实例 属性 是 原始 值 的 情况 ， 原 始 值 可 以 通过 "===" 来 比较 
// 这 里 还 处 理 一 种 特殊 情况 ， 就 是 忽略 由 Set 类 添加 的 特殊 属性 
equals:function(that ){ 

if(that==null)return false; 
if(this.constructor!==that.constructor)return false,; 

for(var name in this){ 
if(name==="|**objectid**|")continue;// 跳 过 特殊 属性 
if(!this.hasownProperty(name))continue;// 跳 过 继承 来 的 属性 
if(this[name]!==that[name])return false;// 比 较 是 否 相 等 
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} 

return true;// 如 果 所 有 属性 都 匹配 ， 两 个 对 象 相等 
} 

}; 





























9.6.6 ”私有 状态 


在 经 典 的 面 和 名 对象 编 程 中 ， 经 冲 需 要 将 对 过 的 不 个 状态 封装 或 隐藏 
在 对 象 内 ， 只 有 通过 对 象 的 方法 才能 访问 这 些 状 态 ， 对 外 只 其 露 一 些 重 
要 的 状态 变量 可 以 直接 读 写 。 为 了 实现 这 个 目的 ， 类 似 Java 的 编程 语言 
允许 声明 类 的 “私有 ”实例 字段 ， 这 些 私 有 实例 字段 只 能 被 类 的 实例 方法 
访问 ， 且 在 类 的 外 部 是 不 可 见 的 。 


我 们 可 以 通过 将 变量 (或 参数 ) ER 
私有 实例 字段 ， 调 用 构造 函数 会 创建 一 个 实例 。 为 了 做 到 这 一 点 ， 需 要 
在 构造 函数 内 部 定义 一 个 函数 (因此 这 个 函数 可 以 访问 构造 函数 内 部 的 
参数 和 变量 ) ， 并 将 这 个 函数 赋值 给 新 创建 对 象 的 属性 。 例 9-10 展 示 了 
对 Range 类 的 另 一 种 封装 ， 新 版 Sati Wn pea 以 返 
回 范围 的 端点 ， 而 不 是 用 from 和 to 属性 来 获取 端点 。 这 里 的 from0 和 t o() 











方法 是 定义 在 每 个 Range 对 象 上 的 ， 而 不 是 从 原型 中 继承 来 的 。 其 他 的 
Range 方 法 还 是 和 之 前 一 样 定义 在 原型 中 ， 但 获取 端点 的 方式 从 之 前 直 
接 从 属性 读 取 变 成 了 通过 from() 和 to() 方 法 来 读 取 。 


例 9-10: 对 Range 类 的 读 取 端 反方 法 的 简单 封 疲 

















function Range(from, to){// 不 要 将 端点 保存 为 对 象 的 属性 ， 相 反 
// 定 义 存 取 器 函数 来 返回 端点 的 值 
// 这 些 值 都 保存 在 闭 包 中 


this.from=function(){return from;}; 














this.to=function(){return to;}; 











} 

// 原 型 上 的 方法 无 法 直接 操作 端点 
// 它 们 必须 调用 存 取 器 方法 
Range.prototype={ 
constructor:Range, 
includes:function(x){return this.from()<=<=x&&x<==this.to();}, 
foreach:function(f){ 

for(var x=Math.ceil(this.from()),max=this.to();x==max;x++)f(x); 









































了 
tostring:function(){return"("+this.from()+"..."+this.to()+")";} 








这 个 新 的 Range 类 定义 了 用 以 读 取 范围 问 点 的 方法 ， 但 没有 定义 设 
置 端点 的 方法 或 属性 。 这 让 类 的 实例 看 起 来 是 不 可 修改 的 ， 如 果 使 用 正 
确 的 话 ， 一 旦 创建 Range 对 象 ， 端 点 数据 就 不 可 修改 了 。 除 非 使 用 
ECMAScript 5《〈 人 参照 9.3 节 ) 中 的 某 些 特性 ， 但 from 和 to 属性 依然 是 可 写 
的 ， 并 且 Range 对 象 实际 上 并 不 是 真正 不 可 修改 的 : 

















var r=new Range(1,5);// 一 个 不 可 修改 的 范围 
r.from=function(){freturn 0;};// 通 过 方法 替换 来 修改 它 


























但 需要 注意 的 是 ， 这 种 封装 技术 造成 了 更 多 系统 开销 。 使 用 财 包 来 
封装 类 的 状态 的 类 一 定 会 比 不 使 用 封装 的 状态 变量 的 等 价 类 运行 速度 更 
慢 ， 并 占用 更 多 内 存 。 


9.6.7 构造 函数 的 重 载 和 工厂 方法 


有 了 时候， 我 们 希望 对 象 的 初始 化 有 多 种 方式 。 比 如 ， 我 们 想 通 过 半 
径 和 角度 〈 极 坐标 ) 来 初始 化 一 个 Complex 对 象 ， 而 不 是 通过 实 部 和 虚 
部 来 初始 化 ， 或 者 通过 元 系 组 成 的 数组 来 初始 化 一 个 Set 对 象 ， 而 不 是 
通过 传 入 构造 函数 的 参数 来 初始 化 它 。 


有 一 个 方法 可 以 实现 ， 通 过 重 载 (overload〉 这 个 构造 函数 让 它 根 
据 传 入 参数 的 不 同 来 执行 不 同 的 初始 化 方法 。 下 面 这 段 代 码 束 是 重 载 
Set() 构 造 函 数 的 例子 : 





function Set(){ 

this ， values={};// 用 这 个 对 象 的 属性 来 保存 这 个 集合 
this .n=0;// 集 合 中 值 的 个 
// 如 泉 传 六 个 类 数组 的 对 象 ， 将 这 个 元 素 添 加 至 集合 中 

// 否 则 ， 将 所 有 的 参数 都 添加 至 集合 中 
if(arguments.1length==1& &isArrayLike(arguments[0])) 
this.add.apply(this,arguments[0]); 

else if(arguments.1length>0) 
this.add.apply(this,arguments); 





























这 























这 段 代 码 所 定义 的 SetO0 构 造 函 数 可 以 显 式 将 一 组 元 素 作 为 参数 列表 
传 入 ， 也 可 以 传 入 元 系 组 成 的 数组 。 但 是 这 个 构造 函数 有 多 义 性 ， 如 末 
集合 的 人 菜 个 成 员 是 一 个 数组 束 无 法 通过 这 个 构造 函数 来 创建 这 个 集合 了 
RS 空 集合 ， 然 后 显 式 调用 add() 方 
法 ) 


在 使 用 极 坐 标 来 初始 化 复数 的 例子 中 ， 实 际 上 并 没有 看 到 有 函数 重 
载 。 代 表 复 数 两 个 维度 的 数字 都 是 浮 点 数 ， 除 非 给 构造 函数 传 入 第 三 个 
参数 ， 否 则 构造 函数 无 法 识别 到 底 传 入 的 是 极 坐 标 参数 还 是 直角 坐标 参 
数 。 相 反 ， 可 以 写 一 个 工厂 方法 一 一 一 个 类 的 方法 用 以 返回 类 的 一 个 实 
例 。 下 面 的 例子 即 是 使 用 工 广 方法 来 返回 一 个 使 用 极 坐标 初始 化 的 
Complex 对 象 : 





Complex.polar=function(r,theta)t 
return new Complex(r*Math.cos(theta),r*Math.sin(theta)); 


}; 





下 面 这 个 工厂 方法 用 来 通过 数组 初始 化 Set 对 象 : 





Set.fromArray=function(a)t{ 

s=new Set( );// 创 建 一 个 空 集合 

s.add.apply(s,a); // 将 数组 a 的 成 员 作为 参数 传 和 add( ) 方 法 
return s;// 返 回 这 个 新 集合 

}; 





























可 以 给 工厂 方法 定义 任意 的 名 字 ， 不 同名 字 的 工厂 方法 用 以 执行 不 





同 的 初始 化 。 但 由 于 构造 函数 是 类 的 公有 标识 ， 因 此 每 个 类 只 能 有 一 个 
构造 函数 。 但 这 并 不 是 一 个 “必须 遵守 ?的 规则 。 在 JavaScript 中 是 可 以 定 
义 多 个 构造 函数 继承 目 一 个 原型 对 象 的 ， 如 果 这 样 做 的 话 ， 由 这 些 构造 
函数 的 任意 一 个 所 创建 的 对 象 都 属于 同一 类 型 。 并 不 推荐 这 种 技术 ， 但 
下 面 的 示例 代码 使 用 这 种 技术 定义 了 该 类 型 的 一 个 辅助 构造 函数 : 








//Set 类 的 一 个 辅助 构造 函数 
function SetFromArray(a){// 通 过 以 函数 的 形式 调用 Set( ) 来 初始 化 这 个 新 对 象 


// 将 a 的 元 素 作为 参数 传 入 L381 
Set.apply(this, a); 

} 

// 设 置 原型 ， 以 便 SetFromArray 能 创建 Set 的 实例 
SetFromArray.prototype=Set .prototype; 
var s=new SetFromArray([1,2,3]); 

S instanceof Set//=>true 


7 柯 关 


在 面 癌 对 象 编程 中 ， 类 B 可 以 继承 自 另 外 一 个 类 A。 我 们 将 A 称 为 父 
类 (superclass，， 将 B 称 为 子 类 (subclass，。B 的 实例 从 A 继承 了 所 有 
的 实例 方法 。 类 B 可 以 定义 自己 的 实例 方法 ， 有 些 方法 可 以 重 载 类 A 中 
的 同名 方法 ， 如 果 B 的 方法 重 载 了 A 中 的 方法 ，B 中 的 重 载 方法 可 能 会 调 
用 A 中 的 重 载 方法 ， 这 种 做 法 称 为 “方法 链 ”(method chaining) 。 同 
样 ， 子 类 的 构造 函数 BO 有 时 需要 调用 父 类 的 构造 浮 数 A()， 这 种 做 法 称 
为 “构造 函数 链 ”(constructor chaining ) 。 子 类 还 可 以 有 子 类 ， 当 涉及 类 
的 层次 结构 时 ， 往 往 需 要 定义 抽象 类 (abstract class) 。 抽 象 类 中 定义 
"0 抽象 类 中 的 抽象 方法 是 在 抽象 类 的 具体 子 类 中 实现 


在 JavaScript 中 创建 子 类 的 关键 之 处 在 于 ， 采 用 合适 的 方法 对 原型 对 
象 进行 初始 化 。 如 果 类 B 继 承 自 类 A，B.prototype 必 须 是 A.prototype 的 后 
关 。 吾 的 实例 继承 自 B.prototype， 后 者 同样 也 继承 自 A.prototype。 本 节 
将 会 对 刚才 提 到 的 子 类 相关 的 术语 做 一 一 讲解 ， 还 会 介绍 类 继承 的 蔡 代 


方案 : “组合”(composition) 。 


我 们 从 例 9-6 中 的 Set 类 开始 讲解 ， 本 节 将 会 讨论 如 何 定义 子 类 ， 如 
何 实现 构造 函数 链 并 重 载 方法 ， 如 何 使 用 组 合 来 代 蔡 继承 ， 以 及 最 后 如 
何 通 过 抽象 类 从 实现 中 提炼 出 接口 。 本 节 以 一 个 扩展 的 例子 结束 ， 这 个 
例子 定义 了 Set 类 的 层次 结构 。 注 意 ， 本 市 开始 的 几 个 例子 着 重 讲述 了 










































































其 中 东 些 扩 术 有 着重 要 的 缺陷 ， 后 续 几 节 会 讲 
到 。 


9.7.1 是 义 子 类 


JavaScript 的 对 象 可 以 从 类 的 原型 对 象 中 继承 属性 (通常 继承 的 是 方 
法 ) 。 如 果 O 是 类 B 的 实例 ，B 是 A 的 子 类 ， 那 么 O 也 一 定 从 A 中 继承 了 
属性 。 为 此 ， 首 先 要 确保 B 的 原型 对 象 继 承 自 A 的 原型 对 象 。 通 过 
inherit() 函 数 ( 例 6-1) ， 可 以 这 样 来 实现 : 











B.prototype=inherit(A.prototype);// 子 类 派生 自 父 类 
B.prototype.constructor=B;// 重 载 继承 来 的 constructor 属 性 














这 两 行 代码 是 在 JavaScript 中 创建 子 类 的 关键 。 如 果 不 这 样 做 ， 原 型 
对 象 仅仅 是 一 个 普通 对 象 ， 它 只 继承 目 Object.prototype， 这 意味 着 你 的 
类 和 所 有 的 类 一 样 是 Object 的 子 类 。 如 有 果 将 这 两 行 代码 添加 至 
defineClassO 函 数 中 《参照 9.3 节 ) ， 可 以 将 它 变 成 例 9-11 中 的 
defineSubclass() 函 数 和 Function.prototype.extend() 方 法 : 


例 9-11: 定义 子 类 











// 用 一 个 简单 的 函数 创建 简单 的 子 类 

function defineSubclass(superclass,// 父 类 的 构造 函数 
constructor,// 新 的 子 类 的 构造 函数 

methods, // 实 例 方法 :复制 至 原型 中 
至 构造 函数 中 





























statics)// 类 属性 : 复 什 





tm, 














{ 

// 建 立 子 类 的 原型 对 象 

constructor.prototype=inherit(superclass.prototype); 

constructor .prototype.constructor=constructor;// 像 对 常规 类 一 样 复制 方法 和 类 属性 
If(methods )extend(constructor .prototype,methods ) ; 
if(statics)extend(constructor,statics);// 返 回 这 个 类 

return constructor; 




















} 

// 也 可 以 通过 父 类 构造 函数 的 方法 来 做 到 这 一 点 
Function.prototype.extend=function(constructor,methods, statics){ 
return defineSubclass(this,constructor,methods, statics)，; 





到 





x 


里 定义 了 Set 的 子 类 SingletonSet。SingletonSet 是 一 个 特殊 的 集合 ， 它 
只 读 的 ， 而 且 含 有 单独 的 常量 成 员 。 


例 9-12 展 示 了 不 使 用 defineSubclassO 函 数 如 何 “ 手 动 ” 实 现 子 类 。 这 
是 


例 9-12: SingletonSet: 一 个 简单 的 子 类 





// 构 造 函数 
function SingletonSet(member){ 
this.member=member;// 记 住 集合 中 这 个 唯一 的 成 员 


























} 
// 创 建 一 个 原型 对 象 ， 这 个 原型 对 象 继承 自 Set 的 原型 
SingletonSet.prototype=inherit(Set.prototype);// 给 原型 添加 属性 
// 如 果 有 同名 的 属性 就 覆盖 Set .prototype 中 的 同名 属性 
extend(SingletonSet .prototype,{// 设 置 合 适 的 constructor 属 性 
constructor:SingletonSet,// 这 个 集合 是 只 读 的 : 调用 add( ) 和 remove( ) 都 会 报错 
add:function(){throw"read-only set";}, 
remove:function(){throw"read-only set";},//SingletonSet 的 实例 中 永远 只 个 元 素 
size:function(){return 1;},// 这 个 方法 只 调用 一 次 ， 传 入 这 个 集合 的 唯一 成 员 
foreach:function(f, context ){f. call(context, this.member);},//contains( ) 方 法 非常 简 
单 : 只 须 检查 传 入 的 值 是 否 匹 配 这 个 集合 唯一 的 成 员 即 可 
contains:function(x){return x===this.member,;} 


}); 














广 








也 

































































































































































这 里 的 SingletonSet 类 是 一 个 比较 简单 的 实现 ， 它 包含 5 个 简单 的 方 
法 定义 。 它 实现 了 5 个 核心 的 Set 方 法 ， 但 从 它 的 父 类 中 继承 了 
toString()、toArray() 和 equals() 方 法 。 定 义 子 类 就 是 为 了 继承 这 些 方法 。 
比如 ，Set 类 的 equals(0) 方 法 (在 9.4 节 中 定义 〉 用 来 对 Set 实 例 进行 比较 ， 
只 要 Set 的 实例 包含 含 size() 和 foreach() 方 法 ， 就 可 以 通过 equals0 比 较 。 因 
de th ， 所 以 它 目 动 继承 了 equals() 的 实现 ， 不 用 再 
实现 一 次 。 当 然 ， 如 果 想 要 最 简单 的 实现 方式 ， 那么 给 SingletonSet 类 定 
尺 僻 卓 己 的 equals0 版 本 会 更 高 宫 效 一 些 . 














SingletonSset.prototype.equals=function(that){ 
return that instanceof Set&&that.size()==1&&that.contains(this.member); 


}; 








需要 注意 的 是 ，SingletonSet 不 是 将 Set 中 的 方法 列表 静态 地 借用 过 
来 ， 而 是 动态 地 从 Set 类 继承 方法 。 如 果 给 Set.prototype 添 加 新 的 方法 ， 
Set 和 SingletonSet 的 所 有 实例 就 会 立即 拥有 这 个 方法 (假定 SingletonSet 
没有 定义 与 之 同名 的 方法 ) 。 


9.7.2 ”构造 函数 和 方法 链 


最 后 一 节 的 SingletonSet 类 定义 了 全 新 的 集合 实现 ， 而 且 将 它 继承 上 自 

其 父 类 的 核心 方法 全 部 蔡 换 。 然 而 定义 子 类 时 ， | 

行为 进行 修改 或 充 ， 而 不 是 元 本科 信 全 它们 。 为 了 做 到 这 一 点 ， 构 造 
函数 和 子 类 的 方法 需要 调用 或 链接 到 父 类 构造 函数 和 父 类 方法 。 











例 9-13 对 此 做 了 展示 。 它 定义 了 Set 的 子 类 NonNullSet， 它 不 允许 
nul 和 undefined 作 为 它 的 成 员 。 为 了 使 用 这 种 方式 对 成 员 做 限制 ， 
NonNullSet 需 要 在 其 add() 方 法 中 对 null 和 undefined 值 做 检测 。 但 它 需 要 
完全 重新 实现 一 个 add0) 方 法 ， 因 此 它 调用 了 父 类 中 的 这 个 方法 。 注 意 ， 
NonNullSetO 构 造 函 数 同样 不 需要 重新 实现 ， 它 只 须 将 它 的 参数 传 入 父 
类 构造 函数 〈 作 为 函数 来 调用 它 ， 而 不 是 通过 构造 函数 来 调用 ) ， 通 过 
父 类 的 构造 函数 来 初始 化 新 创建 的 对 象 。 


例 9-13: 在 子 类 中 调用 父 类 的 构造 函数 和 方法 














J/* 
*NonNullSet 是 Set 的 子 类 ， 它 的 成 员 不 能 是 null 和 undefined 
Sf 


function NonNullSet(){// 仅 链接 到 父 类 
// 作 为 普通 函数 调用 父 类 的 构造 函数 来 初始 化 通过 该 构造 函数 调用 创建 的 对 象 
Set .apply(this,arguments ) ， 






























































} 

// 将 NonNullSet 设 置 为 Set 的 子 类 

NonNullSet .prototype=inherit(Set.prototype); 

NonNullSet .prototype.constructor=NonNullSet;// 为 了 将 null 和 undefined 排 除 在 外 ， 只 须 重 
add( ) 方 法 

NonNullSet .prototype.add=function( ){// 检 查 参 数 是 不 是 null 或 undefined 

for(var i=0;i<arguments.length;i++) 

if(arguments[i]==null) 

throw new Error("Can't add null or undefined to a NonNullSet");// 调 用 父 类 的 add() 方 
法 以 执行 实际 插入 操作 

return Set.prototype.add.apply(this,arguments); 

}; 








时 
册 



































让 我 们 将 这 个 非 null 集 合 的 概念 推 而 广 之 ， 称 为 “过 小 后 的 集合 ”， 
这 个 集合 中 的 成 员 必 须 首先 传 入 一 个 过 滤 函 数 再 执行 添加 操作 。 为 此 ， 
定义 一 个 类 工厂 函数 (类 似 例 9-7 中 的 enumeration0 函 数 ) ， 传 入 一 个 过 
小 函数 ， 返 回 一 个 新 的 Set 子 类 。 实 际 上 ， 可 以 对 此 做 进一步 的 通用 化 
的 处 理 ， 定 义 一 个 可 以 接收 两 个 参数 的 类 工厂 : 子 类 和 用 于 add() 方 法 的 
0 这 个 工厂 方法 称 为 filteredsetSubclass()， 并 通过 这 样 的 代码 来 
用 它 : 




















// 定 义 一 个 只 能 保存 字符 串 的 "集合 "类 











var StringSet=filteredSetSubclass(Set,function(x){return typeof 
Xx==="string";});// 这 个 集合 类 的 成 员 不 能 是 null1、undefined 或 函数 

var MySet=filteredSetSubclass(NonNullSet,function(x){return typeof 
x!=="function";}); 





例 9-14 是 这 个 类 工厂 函数 的 实现 代码 。 注 意 ， 这 个 例子 中 的 方法 链 


和 构造 函数 链 和 NonNullset 中 的 实现 是 一 样 的 。 
例 9-14: 类 工厂 和 方法 链 





/* 

* 这 个 函数 返回 具体 Set 类 的 子 类 

* 并 重 写 该 类 的 add( ) 方 法 用 以 对 添加 的 元 素 做 特殊 的 过 滤 

XY 

function filteredSetSubclass(superclass,filter)t{ 
var constructor=function(){// 子 类 构造 函数 
superclass.apply(this,arguments);// 调 用 父 类 构造 函数 










































































了 
var proto=constructor.prototype=inherit(superclass.prototype); 
proto.constructor=constructor,; 
proto.add=function( ){// 在 添加 任何 成 员 之 前 首先 使 用 过 滤器 将 所 有 参数 进行 过 滤 
for(var i=0;i<arguments.Jlength;i++){ 
var v=arguments[i]; 
if(!filter(v))throw("value"+v+"rejected by filter"); 
} 
























































// 调 用 父 类 的 add( ) 方 法 
superclass.prototype.add.apply(this,arguments); 
}; 


return constructor; 








例 9-14 中 一 个 比较 有 趣 的 事情 是 ， 用 一 个 函数 将 创建 子 类 的 代码 包 
闭 起 来 ， 这 样 瓯 可 以 在 构造 函数 和 方法 链 中 使 用 父 类 的 参数 ， 而 不 是 通 
过 写 死 某 个 父 类 的 名 字 来 使 用 它 的 参数 。 也 就 是 说 如 果 想 修改 父 类 ， 只 
须 修 改 一 处 代码 即 可 ， 而 不 必 对 每 个 用 到 父 类 类 名 的 地 方 都 做 修改 。 已 
经 有 充足 的 理由 证 明 这 种 技术 的 可 行 性 ， 即 使 在 不 是 定义 类 工厂 的 场景 
中 ， 这 种 技术 也 是 值得 提倡 使 用 的 。 比 如 ， 可 以 这 样 使 用 包装 函数 和 例 
9-11 的 Function.prototype.extend() 方 法 来 重 写 NonNullSet: 
































var NonNullSet=(function(){// 定 义 并 立即 调用 这 个 函数 

var superclass=Set;// 仅 指定 父 类 

return superclass.extend( 
function()f{superclass.apply(this,arguments);},// 构 造 函数 
{// 方 法 
add:function( ){// 检 查 参 数 是 否 是 null 或 undefined 

for(var i=0;i<arguments.length;i++) 

if(arguments[i]==null) 

throw new Error("Can't add null or undefined");// 调 用 父 类 的 add( ) 方 法 以 执行 实际 插入 操作 
return superclass.prototype.add.apply(this,arguments); 









































}); 
}()); 





最 后 ， 值 得 强调 的 是 ， 类 似 这 种 创建 类 工厂 的 能 力 是 JavaScript 语 言 


动态 特性 内 一 个 体现 ， 类 工厂 是 一 种 非常 强大 和 有 用 的 特性 ， 这 在 Java 
和 C++ 等 语言 中 是 没有 的 。 


9.7.3 组 合 ve 天 


在 前 一 节 中 ， 定 义 的 集合 可 以 根据 特定 的 标准 对 集合 成 员 做 限制 ， 
而 且 使 用 了 子 类 的 技术 来 实现 这 种 功能 ， 所 创建 的 自 定义 子 类 使 用 了 特 
定 的 过 滤 函 数 来 对 集合 中 的 成 员 做 限制 。 父 类 和 过 滤 函 数 的 每 个 组 合 都 
需要 创建 一 个 新 的 类 。 


然而 还 有 男 一 种 更 好 的 方法 来 完成 这 种 需求 ， 即 面 加 对 象 编程 中 一 
条 广为人知 的 设计 原则 : “组合 优 于 继承 ”时 。 这 样 ， 可 以 利用 组 合 的 原 
理 定义 一 个 新 的 集合 实现 ， 它 "包装 ”了 妃 外 一 个 集合 对 象 ， 在 将 受 限 制 
> 过 滤 掉 之 后 会 用 到 这 个 (包装 的 ) 集合 对 象 。 例 9-15 展 示 了 其 工 
原理 : 


例 9-15: 使 用 组 合 代 做 继承 的 集合 的 实现 

















/* 
* 实 现 一 个 FilteredSet， 它 包装 某 个 指定 的 "集合 "对 象 ， 

































































* 并 对 ts 用 了 某 种 指定 的 过 滤器 
* "范围 " 其 他 所 有 的 核心 方法 延续 到 包装 后 的 实例 中 
* 


var FilteredSet=Set ,extend ( 

function FilteredSet(set,filter){// 构 造 函 数 
this,Set=Sset， 

this.filter=filter; 


}, 

{// 实 例 方法 

add:function( ){// 如 果 己 有 过 滤器 ， 直 接 使 用 它 

if(this.filter){ 

for(var i=0;i<arguments.length;i++){ 

var v=arguments[i]; 

if(!this.filter(v)) 

throw new Error("FilteredSet:value"+v+"rejected by filter"); 










































































} 

// 调 用 set 中 的 add( ) 方 法 
this,.set.add.apply(this. set,arguments); 

return this,; 

},// 剩 下 的 方法 都 保持 不 变 

remove:function(){ 

this.set.remove.apply(this. set,arguments); 

return this; 

}, 

contains:function(v)t{return this.set.contains(v);}, 
size:function(){return this.set.size();}, 
foreach:function(f,c){this.set.foreach(f,c);} 


}); 





在 这 个 例子 中 使 用 组 合 的 一 个 好 处 是 ， 只 须 创建 一 个 单独 的 
FilteredSet 子 类 即 可 。 可 以 利用 这 个 类 的 实例 来 创建 任意 带 有 成 员 限 制 
的 集合 实例 。 比 如 ， 不 用 上 文中 定义 的 NonNullSet 类 ， 可 以 这 样 做 : 








var s=new FilteredSet(new Set(),function(x){return x!==null;}); 








甚至 还 可 以 对 已 经 过 滤 后 的 集合 进行 过 小 : 





var t=new FilteredSet(s, {function(x){return!(x instanceof Set);}}; 











9.7.4 ”类 的 层次 结构 和 抽象 类 


在 上 一 节 中 给 出 了 “组 合 优 于 继承 ”的 原则 ， 但 为 了 将 这 条 原则 阐述 
清楚 ， 创 建 了 Set 的 子 类 。 这 样 做 的 原因 是 最 终 得 到 的 类 是 Set 的 实例 
H4， 它 会 从 Set 继 承 有 用 的 辅助 方法 ， 比 如 toString0 和 equals0。 尽 管 这 
是 一 个 很 实际 的 原因 ， 但 不 用 创建 类 似 Set 类 这 种 具体 类 的 子 类 也 可 以 
很 好 的 用 组 合 来 实现 “范围 >。 例 9-12 中 的 SingletonSet 类 可 以 有 另外 一 种 
类 似 的 实现 ， 这 个 类 还 是 继承 自 Set， 因 此 它 可 以 继承 很 多 辅助 方法 ， 
但 它 的 实现 和 其 父 类 的 实现 完全 不 一 样 。SingletonSet 并 不 是 Set 类 的 专 
用 版 本 ， 而 是 完全 不 同 的 另 一 种 Set。 在 类 层次 结构 中 SingletonSet 和 Set 
应 当 是 兄弟 的 关系 ， 而 非 父 子 关 系 。 


不 管 是 在 经 典 的 面 癌 对 象 编程 语言 中 还 是 在 JavaScript 中 ， 通 行 的 解 
决 办 法 是 上 “从 实现 中 抽 离 出 接口 ?。 假 定 定 义 了 一 个 AbstractSet 类 ， 其 
中 定义 了 一 些 辅 助 方法 比如 toString()， 但 并 没有 实现 诸如 foreach() 的 核 
心 方法 。 这 样 ， 实 现 的 Set、SingletonSet 和 FilteredSet 都 是 这 个 抽象 类 的 
子 类 ，FilteredSet 和 SingletonSet 都 不 必 再 实现 为 某 个 不 相关 的 类 的 子 类 
本 


例 9-16 在 这 个 思路 上 更 进一步 ， 定 义 了 一 个 层次 结构 的 抽象 的 集合 
类 。AbstractSet 只 定义 了 一 个 抽象 方法 : contains()。 任 何 类 只 要 “ 疡 
称 ” 自 己 是 一 个 表示 范围 的 类 ， 就 必须 至 少 定义 这 个 contains(0) 方 法 。 然 
后 ， 定 义 AbstractSet 的 子 类 AbstractEnumerableSet。 这 个 类 增加 了 抽象 的 
size() 和 foreach() 方 法 ， 而 且 定 义 了 一 些 有 用 的 非 抽 象 方法 (toString()、 
toArray()、equals() 等 ) ，AbstractEnumerableSet 并 没有 定义 add0 和 



































remove() 方 法 ， 它 只 代表 只 读 集 合 。SingletonSet 可 以 实现 为 非 抽象 子 
类 。 最 后 ， 定 义 了 AbstractEnumerableSet 的 子 类 AbstractWritableSet。 这 
个 final 抽 象 集合 定义 了 抽象 方法 add0 和 remove0， 并 实现 了 诸如 union0) 
和 intersection0) 等 非 具体 方法 ， 这 两 个 方法 调用 了 add0 和 remove0)。 
AbstractWritableSet 是 Set 和 FilteredSet 类 相应 的 父 类 。 但 这 个 例子 中 并 没 
有 实现 它 ， 而 是 实现 了 一 个 新 的 名 叫 ArraySet 的 非 抽 象 类 。 


例 9-16 中 的 代码 很 长 ， 但 还 是 应 当 完 整地 阅读 一 过。 注意 这 里 用 到 
了 Function.prototype.extend() 作 为 创建 子 类 的 快捷 方式 。 


例 9-16: 抽象 类 和 非 抽 象 Set 类 的 层次 结构 























// 这 个 函数 可 以 用 做 任何 抽象 方法 ， 非 常 方便 
function abstractmethod(){throw new Error("abstract method");}/* 
*AbstractSet 类 定义 了 一 个 抽象 方法 : contains() 

*/ 

function AbstractSet(){throw new Error("Can't instantiate abstract classes"),;} 
AbstractSet .prototype.contains=abstractmethod;/* 

*NotSet 是 AbstractSet 的 一 个 非 抽 象 子 类 
* 所 有 不 在 其 他 集合 中 的 成 员 都 在 这 个 集合 
* 因 为 它 是 在 其 他 集合 是 不 可 写 的 条 件 下 定义 的 
* 同 时 由 于 它 的 成 员 是 无 限 个 ， 因 此 它 是 不 可 枚 举 的 
* 我 们 只 能 用 它 来 检测 元 素 成 员 的 归属 情况 

* 注 意 ， 我 们 使 用 了 Function.prototype.extend() 方 法 来 定义 这 个 子 类 
Eh 

var NotSet=AbstractSet ,extend ( 

function NotSet(set){this.set=set;}, 

{ 

contains:function(x){return!this.set.contains(x);}, 
tostring:function(x){return"~"+this.set.toSstring();}, 
equals:function(that ){ 

return that instanceof NotSet&&this.set.equals(that. set),; 
} 


} 

);/* 

*AbstractEnumerableSet 是 AbstractSet 的 一 个 抽象 子 类 

* 它 定义 了 抽象 方法 size( ) 和 foreach() 

* 然 后 实现 了 非 抽 象 方法 ijsEmpty()、toArray()、to[Locale]String() 和 equals() 方 法 
* 子 类 实现 了 contains()、size() 和 foreach()， 这 三 个 方法 可 以 很 轻易 地 调用 这 5 个 非 抽象 方法 
Eh 

var AbstractEnumerableSet=AbstractSet.extend( 

function(){throw new Error("Can't instantiate abstract classes");}, 
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size:abstractmethod, 
foreach:abstractmethod, 
isEmpty:function(){return this.size( )==0;}, 
tostring:function(){ 

Var s="{",1i=0; 

this.foreach(function(v){ 

if(i++>>0)st+=","; 

S+=V; 

}); 


return s+"}"; 


}, 

toLocaleSstring:function(){ 

Var s="{",1i=0; 
this.foreach(function(v){ 
if(i++>0)st+t=","; 
if(v==null)s+=v;//null 和 undefined 

else s+=V.toLocaleString();// 其 他 的 情况 
}); 

return s+"}"; 

外 

toArray':function( ){ 

var a=[]; 
this.foreach(function(v){a.push(v);}); 
return a; 

外 

equals:function(that ){ 

if(!(that instanceof AbstractEnumerableSet))return false;// 如 果 它 们 的 大 小 不 同 ， 则 它们 























if(this.size()!=that.size())return false;// 检 查 每 一 个 元 素 是 否 也 在 that 中 
tryt{ 

this.foreach(function(v){if(!that.contains(v))throw false;}); 
return true;// 所 有 的 元 素 都 匹配 :集合 相等 

}catch(x){ 
if(x===false)return false;// 集 合 不 相等 

throw Xx;// 发 生 了 其 他 的 异常 ， 重新 抛 出 异常 

} 

} 

});/* 

*SingletonSet 是 AbstractEnumerableSet 的 非 抽 象 子 类 
*Ssingleton 集 合 是 只 读 的 ， 它 只 包含 一 个 成 员 

*/ 

var SingletonSset=AbstractEnumerableSet .extend( 

function SingletonSet(member){this.member=member,;}, 

{ 

contains:function(x){return x===this.member;}, 
size:function(){return 1;}, 
foreach:function(f,ctx){f.call(ctx,this.member);} 

} 

);/* 

*AbstractwritableSet 是 AbstractEnumerableSet 的 抽象 子 类 

* 它 定义 了 抽象 方法 add( ) 和 remove() 

* 然 后 实现 了 非 抽象 方法 union()、intersection() 和 difference() 

*/ 

var AbstractwritableSet=AbstractEnumerableSet .extend( 
function(){throw new Error("Can't instantiate abstract classes");}, 



























































add:abstractmethod, 

remove:abstractmethod ， 
union:function(that){ 

Var self=this; 
that.foreach(function(v){self.add(v);}); 
return this,; 

}, 

intersection:function(that)t{ 

Var self=this; 
this.foreach(function(v){if(!that.contains(v))self.remove(v);}); 
return this,; 

}, 

difference:function(that)t{ 

Var self=this; 
that.foreach(function(v){self.remove(v);}); 


return this,; 


} 

});/* 

*ArraySet 是 AbstractwritableSet 的 非 抽 象 子 类 
* 它 以 数组 的 形式 表示 集合 中 的 元 素 
* 对 于 它 的 contains( ) 方 法 使 用 了 数组 的 线性 查找 

* 因 为 contains() 方 法 的 算法 复杂 度 是 0(n ) 而 不 是 0(1) 

* 它 非常 适用 于 相对 小 型 的 集合 ， 注 意 ， 这 里 的 实现 用 到 了 ES5 的 数组 方法 indexof() 和 forEach( ) 
*/ 

var ArraySet=AbstractwritableSet ,extend ( 

function ArraySet(){ 

this.values=[]; 

this.add.apply(this,arguments); 


}, 


contains:function(v){return this.values,.indexof(Vv)!=-1;}, 
size:function(){return this.values.length,;}, 
foreach:function(f,c){this,.values.forEach(f,c);}, 
add:function(){ 

for(var i=0;i<arguments.Jlength;i++){ 

var arg=arguments[i]; 
if(!this.contains(arg))this.values.push(arg); 


























































































































return this; 

A 

remove:function(){ 

for(var i=0;i<arguments.Jlength;i++){ 
var p=this.values.indexof(arguments[i]); 
if(p==-1)continue; 
this.values.splice(p,1); 


} 
return this,; 


} 
) 


六 





9.8 ”ECMAScript 5 中 的 类 


ECMAScript 5 给 属性 特性 增加 了 方法 支持 (getter、setter、 可 枚 举 
性 、 可 写 性 和 可 配置 性 ) ， 而 且 增 加 了 对 象 可 扩展 性 的 限制 。 这 些 方法 
在 6.6 节 、6.7 节 和 6.8.3 节 都 有 详细 的 讨论 ， 然 而 这 些 方 法 非常 适合 用 于 
0 义 。 下 面 几 节 讲 述 了 如 何 使 用 ECMAScript 5 的 特性 来 使 类 更 加 健 


9.8.1 让 属性 不 可 枚 举 


例 9-6 中 的 Set 类 使 用 了 一 个 小 技巧 ， 将 对 象 存 储 为 “集合 ”的 成 员 : 
它 给 添加 至 这 个 “集合 ”的 任何 对 象 定 义 了 “对 象 id” 属 性 。 之 后 如 果 在 
for/in 循 环 中 对 这 个 对 象 做 遍历 ， 这 个 新 添加 的 属性 也 会 遍历 到 。 
ECMAScript 5 可 以 通过 设置 属性 为 “不 可 枚 举 ”(Cnonenumerable) 来 让 属 











I 衣 历 到 。 例 9- i ed defineProperty0) 来 做 到 这 
点 ， 同 时 也 展示 了 如 何 定 义 一 个 getter 函 数 以 及 检测 对 象 是 否 是 可 扩 
展 的 〈extensible) 。 


例 9-17: 定义 不 可 枚 举 的 属性 




















// 将 代码 包装 在 一 个 匿名 函数 中 ， 这 样 定 义 的 变量 就 在 这 个 函数 作用 域内 
(function( ){// 定 义 一 个 不 可 枚 举 的 属性 objectId， 它 可 以 被 所 有 对 象 继承 
// 当 读 取 这 个 属性 时 调用 getter 函 数 
// 它 没有 定义 setter， 因 此 它 是 只 读 的 
// 它 是 不 可 配置 的 ， 因 此 它 是 不 能 删除 的 
Object.defineProperty(Object.prototype,"objectId",{ 
get :idGetter,// 取 值 器 
enumerable:false, // 不 可 枚 举 的 
configurable: false// 不 可 册 除 的 
}) ;// 当 读 取 objectId 的 时 候 直接 调用 这 个 getter 函 数 

function idGetter(){f//getter 函 数 返 回 该 id 

if(!(idprop in this)){// 如 果 对 象 中 不 存在 id 
if(!10bject.isExtensible(this))// 并 且 可 以 增加 属性 

throw Error("Can't define id for nonextensible objects"); 
Object. defineproperty( this, idprop, {// 给 它 一 个 值 
value:nextid++, // 就 是 这 个 值 

writable:false,// 只 读 的 
enumerable:falSe, // 不 可 枚 举 的 
configurable:false// 不 可 删除 的 
}); 


} 

return this[idprop];// 返 回 己 有 的 或 新 的 值 
};//idGetter() 用 到 了 这 些 变量 ， 这 些 都 属于 私有 变量 
var idprop="|**objectId**|";// 假 设 这 个 属性 没有 用 到 
var nextid=1;// 给 它 设置 初始 值 

}() ) ;// 立 即 执行 这 个 包装 函数 


























































































































































































































9.8.2 定义 不 可 变 的 类 


除了 可 以 设置 属性 为 不 可 枚 举 的 ，ECMAScript 5 还 可 以 设置 属性 为 
只 读 的 ， 当 我 们 希望 类 的 实例 都 是 不 可 变 的 ， 这 个 特性 非常 有 帮助 。 例 
9- 9-18 使 用 Object.defineProperties() 和 Object.create() 定 义 不 可 变 的 Range 
类 。 它 同样 使 用 Object.defineProperties0) 来 为 类 创建 原型 对 象 ， 并 将 “〈 原 
型 对 象 的 ) 实例 方法 设置 为 不 可 枚 举 的 ， 就 像 内 置 尖 的 万 法 一 样 。 不 仅 
如 此 ， 它 还 将 这 些 实例 方法 设置 为 "只 读 ” 和 “不 可 删除 ”， 这 样 就 可 以 防 
止 对 类 做 任何 修改 (monkey-patching) HI。 最 后 ， 例 9-18 展 示 了 一 个 有 
趣 的 技巧 ， 其 中 实现 的 构造 函数 也 可 以 用 做 工厂 函数 ， 这 样 不 论调 用 也 
数 之 前 是 人 否 ; 带 有 new 关 键 字 ， 都 可 以 正确 地 创建 实例 。 


例 9-18: 创建 一 个 不 可 变 的 类 ， 它 的 属性 和 方法 都 是 只 读 的 









































// 这 个 方法 可 以 使 用 new 调 用 ， 也 可 以 省 略 new， 它 可 以 用 做 构造 函数 也 可 以 用 做 工厂 函数 
function Range(from, to){// 这 些 是 对 from 和 to 只 读 属 性 的 描述 符 

var props={ 

from: {value:from,enumerable:true,writable:false,configurable:false}, 
to:{value:to,enumerable:true,writable:false,configurable:false} 

}; 

if(this instanceof Range)// 如 果 作 为 构造 函数 来 调用 
Object.defineProperties(this,props);// 定 义 属性 
else// 否 则 ， 作 为 工厂 方法 来 调 | 
return Object . create(Range.prototype,// 创 建 并 返 


props);// 属 性 由 props 指 定 
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这 个 新 Range 对 象 ， 





















































} 

// 如 果 同样 的 方法 给 Range , prototype 对 象 添加 属性 
/7 那么 我 们 需要 给 这 些 属 性 设置 它们 的 特性 
// 因 为 我 们 无 法 识别 出 它们 的 可 枚 举 性 、 可 写 性 或 可 配置 性 ， 这 些 属性 特性 默认 都 是 false 
Object.defineProperties(Range.prototype,t{ 

includes:{ 

value:function(x){return this.from<=x&&x<==this.to,;} 

}, 

foreach:{ 

value:function(f){ 

for(var x=Math.ceil(this.from);x==this.to;x++)f(x); 

} 

}, 

tostring:{ 

value:function(){return"("+this.from+",..."+this.to+")";} 

} 

}); 





节 













































































例 9-18 用 到 了 Object.defineProperties() 和 Object.create() 来 定义 不 可 变 
的 和 不 可 枚 举 的 属性 。 这 两 个 方法 非常 强大 ， 但 属性 描述 符 对 象 让 代码 
的 可 读 性 变 得 更 差 。 男 一 种 改进 的 做 法 是 将 修改 这 个 已 定义 属性 的 特性 
的 操作 定义 为 一 个 工具 函数 ， 例 9-19 展 示 了 两 个 这 样 的 工具 函数 : 


例 9-19: 属性 捅 述 符 工具 函数 











// 将 o 的 指定 名 字 【或 所 有 ) 的 属性 设置 为 不 可 写 的 和 不 可 配置 的 
function freezeProps(o){ 
var props=(arguments.length==1)// 如 果 只 有 一 个 参数 
?0bject .getownPropertyNames(0o)// 使 用 所 有 的 属性 
:Array.prototype.splice.call(arguments,1);// 否 则 传 入 了 指定 名 字 的 属性 
props.forEach(function(n){// 将 它们 都 设置 为 只 读 的 和 不 可 变 的 

// 忽 略 不 可 配置 的 属性 
if(!0Object.getOwnPropertyDescriptor(o,n).configurable)return,; 
Object.defineProperty(o,n, {writable:false,configurable:false}); 


















































































































































}); 

return 0;// 所 以 我 们 可 以 继续 使 用 它 
} 

// 将 o 的 指定 名 字 (或 所 有 ) 的 属性 设置 为 不 可 枚 举 的 和 可 配置 的 


function hideprops(o){ 
var props=(arguments.length==1)// 如 果 只 有 一 个 参数 
?0bject .getownPropertyNames(o)// 使 用 所 有 的 属性 
:Array.prototype.splice.call(arguments,1);// 否 则 传 入 了 指定 名 字 的 属性 
props.forEach(function(n){// 将 它们 设置 为 不 可 枚 举 的 

// 忽 略 不 可 配置 的 属性 

































































































































































If(!object.getownPropertyDescriptor(o,n).configurable)return， 
Object.defineProperty(o,n, {enumerable:false}); 


}); 


return o; 





Object.defineProperty() 和 Object.defineProperties() 可 以 用 来 创建 新 属 
性 ， 也 可 以 修改 已 有 属性 的 特性 。 当 用 它们 创建 新 属性 时 ， 默 认 的 属性 
特性 的 值 都 是 false。 但 当 用 它们 修改 已 经 存在 的 属性 时 ， 默 认 的 属性 特 
性 依然 保持 不 变 。 比 如 ， 在 上 面 的 hidePropsO 函 数 中 ， 只 指定 了 
enumerable 特 性 ， 因 为 我 们 只 想 修 改 enumerable 特 性 。 


使 用 这 些 工 具 函 数 ， 就 可 以 充分 利用 ECMAScript 5 的 特性 来 实现 一 
个 不 可 变 的 类 ， 而 且 不 用 动态 地 修改 这 个 类 。 例 9-20 中 不 可 变 的 Range 
类 就 用 到 了 刚才 定义 的 工具 函数 。 


例 9-20: 一 个 简单 的 不 可 变 的 类 








function Range(from, to){// 不 可 变 的 类 Range 的 构造 函数 
this.from=from; 

this.to=to; 

freezeProps(this ) ;// 将 属性 设置 为 不 可 变 的 















































} 

Range.prototype=hideProps({// 使 用 不 可 枚 举 的 属性 来 定义 原型 
constructor:Range, 

includes:function(x){return this.from<=x&&x==this.to;}, 
foreach:function(f){for(var x=Math.ceil(this.from);x==this.to;x++)f(x);}, 
tostring:function(){return"("+this.from+"..."+this.to+")";} 


}); 








9.8.3 ”封装 对 象 状态 


如 9.6.6 节 和 例 9-10 所 示 ， 构 造 函 数 中 的 变量 和 参数 可 以 用 做 它 创 建 
的 对 象 的 私有 状态 。 该 方法 在 ECMAScript 3 中 的 一 个 缺点 是 ， 访 问 这 些 
私有 状态 的 存 取 器 方法 是 可 以 替换 的 。 在 ECMAScript 5 中 可 以 通过 定义 
属性 getter 和 setter 方 法 将 状态 变量 更 健壮 地 封装 起 来 ， 这 两 个 方法 是 无 
法 删除 的 ， 如 例 9-21 所 示 。 


例 9-21: 将 Range 类 的 端点 严格 封装 起 来 

















// 这 个 版 本 的 Range 类 是 可 变 的 ， 但 将 端点 变量 进行 了 良好 的 封装 
// 但 端点 的 大 小 顺序 还 是 固定 的 : from<=to 
function Range(from, to){// 如 果 from 大 于 to 





























if(from>to)throw new Error("Range:from must be<=to");// 定 义 存 取 器 方法 以 维持 不 变 
function getFrom(){return from;} 

function getTo(){return to,;} 

function setFrom(f){// 设 置 from 的 值 时 ， 不 允许 from 大 于 to 

if(f==to)from=f; 

else throw new Error("Range:from must be==to"); 

















function setTo(t){// 设 置 to 的 值 时 ， 不 允许 to 小 于 from 
if(t>=from)to=t; 
else throw new Error("Range:to must be>=from"); 


} 

// 将 使 用 取 值 器 的 属性 设置 为 可 枚 举 的 、 不 可 配置 的 
Object.defineProperties(this,t{ 

from: {get:getFrom,set:setFrom,enumerable:true,configurable:false}, 
to:{get:getTo, set:setTo,enumerable:true,configurable:false} 


}); 
} 


// 和 前 面 的 例子 相 比 ， 原 型 对 象 没有 做 任何 修改 

// 实 例 方法 可 以 像 读 取 普通 的 属性 一 样 读 取 from 和 to 

Range.prototype=hideProps({ 

constructor:Range, 

includes:function(x){return this.from<=x&&x<==this.to;}, 
foreach:function(f){for(var x=Math.ceil(this.from);x==this.to;x++)f(x);}, 
tostring:function(){return"("+this.from+"..."+this.to+")";} 


}); 

















































































































9.8.4 ”防止 类 的 扩展 


通常 认为 ， 通 过 给 原型 对 象 添加 方法 可 以 动态 地 对 类 进行 扩展 ， 

是 JavaScript 本 身 的 特性 。ECMAScript ”5 可 以 根据 需要 对 此 特 ' 性 加 以 了 
制 。Object.preventExtensionsO 可 以 将 对 象 设置 为 不 可 扩展 的 〈 见 6.8.3 
节 ) ， 也 就 是 说 不 能 给 对 象 酉 加 任何 新 属性 。Object,seal0 则 更 加 强大 ， 
它 除 了 能 阻止 用 户 给 对 象 添加 新 属性 ， 还 能 将 当前 已 有 的 属性 设置 为 不 
可 配置 的 ， 这 样 就 不 能 删除 这 些 属性 了 (但 不 可 配置 的 属性 可 以 是 可 写 
的 ， 也 可 以 转换 为 只 读 属 性 ) 。 可 以 通过 这 样 一 句 简单 的 代码 来 阻止 对 
Object.prorotype 的 扩展 : 

















Object ,Seal(0bject.prototype ) ， 





JavaScript 的 另外 一 个 动态 特性 是 “对 象 的 方法 可 以 随时 蔡 换 ”( 或 称 
为 "monkey-patch") : 





var original_ sort_method=Array.prototype.sort,; 
Array.prototype.sort=function(){ 

var Start=new Date(); 

original_ sort_method.apply(this,arguments); 

var end=new Date( ); 

console.log("Array sort took"+(end-start)+"milliseconds."); 


}; 


可 以 通过 将 实例 方法 设置 为 只 读 来 防止 这 类 修改 ， 一 种 方法 就 是 使 
用 上 面 代码 所 定义 的 freezeProps() 工 具 函 数 。 另 外 一 种 方法 是 使 用 
Object.freeze()， 它 的 功能 和 Object.seal() 完 全 一 样 ， 它 同样 会 把 所 有 属性 
都 设置 为 只 读 的 和 不 可 配置 的 。 


理解 类 的 只 读 属性 的 特性 至 关 重 要 。 如 果 对 象 o 继 承 了 只 读 属 性 p， 
那么 给 o.p 的 赋值 操作 将 会 失败 ， 就 不 会 给 o 创 建新 属性 。 如 果 你 想 重 写 
一 个 继承 来 的 只 读 属 性 ， 束 必须 使 用 Object.definePropertiyO)、 
Object.defineProperties0) 或 Object.create() 来 创建 这 个 新 属性 。 也 就 是 说 ， 
ee 该 的 ， 那 么 重 写 它 的 子 类 的 这 些 方法 的 难 
度 会 更 大 。 


这 种 锁定 原型 对 象 的 做 法 往往 没有 必要 ， 但 的 确 有 一 些 场景 是 需要 
阻止 对 象 的 扩展 的 。 回 想 一 下 例 9-7 中 的 enumeration()， 这 是 一 个 类 工厂 
函数 。 这 个 函数 将 枚 举 类 型 的 每 个 实例 都 保存 在 构造 函数 对 象 的 属性 
里 ， 以 及 构造 函数 的 values 数 组 中 。 这 些 属性 和 数组 是 表示 枚 举 类 型 实 
例 的 正式 实例 列表 ， 是 可 以 执行 蒜 结 ”(freezing〉 操作 的 ， 这 样 就 不 能 
给 它 添加 新 的 实例 ， 已 有 的 实例 也 无 法 删除 或 修改 。 可 以 给 
enumeration0 函 数 添 加 几 行 简单 的 代码 : 





Object .freeze(enumeration.values); 
Object ,freeze(enumeration ) ， 


需要 注意 的 是 ， 通 过 在 枚 举 类 型 中 调用 Objectfreeze0， 例 9-17 中 定 
义 的 objectId 属 性 之 后 也 无 法 使 用 了 。 这 个 问题 的 解决 办 法 是 ， 在 枚 举 
类 型 被 “冻结 "之 前 读 取 一 次 它 的 objectId 属 性 调用 潜在 的 存 取 器 方法 并 
设置 内 部 属性 ) 。 


9.8.5” 子 类 和 ECMAScript 5 


例 9-22 使 用 ECMAScript ”5 的 特性 实现 子 类 。 这 里 使 用 例 9-16 中 的 
AbstractWritableSet 类 来 做 进一步 说 明 ， 来 定义 这 个 类 的 子 类 StringSet。 
下 面 这 个 例子 的 最 大 特点 是 使 用 Object.createO) 创 建 原型 对 象 ， 这 个 原型 
对 象 继承 上 自 父 类 的 原型 ， 同 时 给 新 创建 的 对 象 定义 属性 。 这 种 实现 方法 
的 困难 之 处 在 于 ， 正 如 上 文 所 提 到 的 ， 它 需要 使 用 难看 的 属性 描述 符 。 














这 个 例子 中 另外 一 个 有 趣 之 处 在 于 ， 使 用 Object.create(O) 创 建 对 象 时 
传 入 了 参数 null， 这 个 创建 的 对 象 没 有 任何 继承 任何 成 员 。 这 个 对 象 用 
来 存储 集合 的 成 员 ， 同 时 ， 这 个 对 象 没 有 原型 ， 这 样 我 们 就 能 对 它 直 接 
使 用 in 运 算 符 当 ， 而 不 须 使 用 hasOwnProperty0 方 法 。 


例 9-22: StringSet: 利用 ECMAScript 5 的 特性 定义 的 子 类 

















function StringSet(){ 

this.set=0bject .create(null);// 创 建 一 个 不 包含 原型 的 对 象 
this.n=0; 

this.add.apply(this,arguments); 


























} 

// 注 意 ， 使 用 0bject .create() 可 以 继承 父 类 的 原型 
// 而 且 可 以 定义 单独 调用 的 方法 ， 因 为 我 们 没有 指定 属性 的 可 写 性 、 可 枚 举 性 和 可 配置 性 
// 因 此 这 些 属性 特性 的 默认 值 都 是 false 
// 只 读 方 法 让 这 个 类 难于 子 类 化 被 继承 ) 
StringSet.prototype=0bject.create(AbstractwWritableSet.prototype,t{ 
constructor:{value:StringsSet}, 

contains:{value:function(x){return x in this.set;}}, 
size:{value:function(x){return this.n;}}, 

foreach: {value:function(f,c){0bject.keys(this.set).forEach(f,c);}}, 
add:{ 

value:function(){ 

for(var i=0;i<arguments.length;i++){ 

if(!(arguments[i]in this.set))t{ 

this.set[arguments[i]]=true; 

this ,n++， 


} 


return this; 

























































































外 

remove:{ 

value:function(){ 

for(var i=0;i<arguments.Jlength;i++){ 
if(arguments[i]in this,set){ 

delete this.set[arguments[i]]; 
this.n--,; 


} 


return this,; 
} 

} 

}); 





9.8.6 属性 描述 符 


6.7” 节 讨论 了 ECMAScript 5 中 的 属性 描述 符 ， 但 没有 给 出 它们 的 
示例 代码 。 本 节 给 出 一 个 例子 ， 用 来 讲述 基于 ECMAScript 5 如 何 对 属性 
进行 各 种 操作 。 在 例 9-23 中 给 Object.prototype 添 加 了 properties(0) 方 法 
(这 个 方法 是 不 可 枚 举 的 ) 。 这 个 方法 的 返回 值 是 一 个 对 象 ， 用 以 表示 


属性 的 列表 ， 并 定义 了 有 用 的 方法 用 来 输出 属性 和 属性 特性 (对 于 调试 
非常 有 用 ) ， 用 来 获得 属性 描述 符 《〈 当 复制 属性 同时 复制 属性 特性 时 非 
钊 有 用 ) 以 及 用 来 设置 属性 的 特性 《是 上 文 定 义 的 hidePropsO0 和 
freezeProps(O) 函 数 不 错 的 蔡 代 方案 ) 。 这 个 例子 展示 了 ECMAScript 5 的 
大 多 数 属性 相关 的 特性 ， 同 时 使 用 了 一 种 模块 编程 技术 ， 这 将 在 下 一 


讨论 ， 





例 9-23: ECMAScript 5 属性 操作 





/St 

* 给 0bject ,prototype 定 义 properties( ) 方 法 ， 
i 个 表示 调用 它 的 对 象 上 的 属性 名 列表 的 对 象 
* 《如 果 不 带 参数 调用 它 ， 就 表示 该 对 象 的 所 有 属性 ) 
* 返 回 的 对 象 定义 了 4 个 有 用 的 方法 : tostring()、descriptors()、hide() 和 show() 
4 
(function namespace( ){// 将 所 有 逻辑 闭 包 在 一 个 私有 函数 作用 域 中 
// 这 个 函数 成 为 所 有 对 象 的 方法 
function properties(){ 
var names;// 属 性 名 组 成 的 数组 
if(arguments.length==0)// 所 有 的 自 有 属性 
names=object .getOwnPropertyNames(this); 

else if(arguments.1length==1& &Array.isArray(arguments[0])) 

names=arguments[0];// 名 字 组 成 的 数组 

else// 参 数列 表 本 身 就 是 名 字 
names=Array.prototype.splice.call(arguments,0);// 返 回 一 个 新 的 Properties 对 象 ， 用 以 表示 


return new Properties(this,names); 




























































































































































































eal 
这 











} 
0 设置 为 0bject .prototpye 的 新 的 不 可 枚 举 的 属性 

这 是 从 私有 函数 作用 域 导 出 的 唯一 一 个 值 
0 ect,.defineProperty(Object.prototype, "properties",{ 
value:properties, 
enumerable:false,writable:true,configurable:true 
} ) ; // 这 个 构造 函数 是 由 上 面 的 properties( ) 函 数 所 调 的 
//Properties 类 表示 一 个 对 象 的 属性 集合 
function Properties(o,names){ 
this.o=0;// 属 性 所 属 的 对 象 
this.names=names;// 属 性 的 名 字 























































































































} 

// 将 代表 这 些 属性 的 对 象 设置 为 不 可 枚 举 的 
Properties.prototype.hide=function(){ 

var o=this.o,hidden={enumerable:false}; 
this.names.forEach(function(n)t{ 

if(o.hasownProperty(n)) 
Object.defineProperty(o,n,hidden); 

}); 

return this; 

};// 将 这 些 属性 设置 为 只 读 的 和 不 可 配置 的 
Properties.prototype.freeze=function(){ 

var o=this.o,frozen={writable:false,configurable:false}; 
this.names.forEach(function(n)t{ 

if(o.hasownProperty(n)) 
Object.defineProperty(o,n,frozen); 

}); 


return this,; 


















































双 


};// 返 回 一 个 对 象 ， 这 个 对 象 是 名 字 到 属性 描述 符 的 映射 表 
// 使 用 它 来 复制 属性 ， 连 同属 性 特性 一 起 复制 
//Object.definePproperties(dest,src.properties().descriptors()); 
Properties.prototype.descriptors=function(){ 

Var o=this.o,desc={}; 

this.names.forEach(function(n)t{ 

if(!0.hasOwnProperty(n))return; 
desc[n]=0bject.getOwnPropertyDescriptor(o,n); 
























































了 
return desc 
};// 返 回 一 个 格式 化 良好 的 属性 列表 
// 列 表 中 包含 名 字 、 值 和 属性 特性 ， 使 用 "permanent" 表 示 不 可 配置 
// 使 用 "readonly" 表 示 不 可 写 ， 使 用 "hidden" 表 示 不 可 枚 举 
// 普 通 的 可 枚 举 、 可 写 和 可 配置 属性 不 包含 特性 列表 
Properties.prototype.toString=function(){ 
var 0=this.o;// 在 下 面 嵌 套 的 函数 中 使 用 
var lines=this.names.map(nameToString); 
return"{\n"+lines.join("™,\n")+"\n}"; 
function nameToString(n){ 
var s="",desc=0bject.getOwnPropertyDescriptor(o,n); 
if(!desc)return"nonexistent"+n+":undefined"; 
if(!desc.configurable)s+="permanent"; 
if((desc.get&&!desc,.set)||!desc.writable)s+="readonly"; 
if(!desc.enumerable)s+="hidden"; 
if(desc.get||desc.set)s+="accessor"+n 
else s+=n+":"+((typeof desc.value==="function")?"function":desc.value); 
return s; 










































































| 了 




























































































} 

};// 最 后 ， 将 原型 对 象 中 的 实例 方法 设置 为 不 可 枚 举 的 
// 这 里 用 到 了 刚 定义 的 方法 
Properties.prototype.properties().hide(); 
}() ) ;7// 立 即 执行 这 个 匿名 函数 


9.9 ”模块 


将 代码 组 织 到 类 中 的 一 个 重要 原因 是 ， 让 代码 更 加 “模块 化 >， 可 以 
在 很 多 不 同 场景 中 实现 代码 的 重用 。 但 类 不 是 唯一 的 模块 化 代码 的 方 
式 。 一 般 来 讲 ， 模 块 是 一 个 独立 的 JavaScript 文 件 。 模 块 文件 可 以 包含 一 
个 类 定义 、 一 组 相关 的 类 、 一 个 实用 函数 库 或 者 是 一 些 待 执行 的 代码 。 
只 要 以 模块 的 形式 编写 代码 ， 任 何 JavaScript 代 码 段 束 可 以 当做 一 个 模 
块 器 。JavaScript 中 并 没有 定义 用 以 支持 模块 的 语言 结构 (但 imports 和 
exports 的 确 是 JavaScript 保 留 的 关键 字 ， 因 此 JavaScript 的 未 来 版 本 可 能 
| 写 模块 化 的 代码 更 多 的 是 遵循 某 
一 种 编码 约定 。 


很 多 JavaScript 库 和 客户 六 首 编程 框架 都 包含 一 些 模块 系统 。 比 如 ， 
Dojo 工 具 包 和 Google 的 Closure 库 定义 了 provide() 和 require() 函 数 ， 用 以 
声明 和 加 载 模块 。 并 且 ，CommonJS 服 务 器 端 JavaScript 标 准 规范 (参照 
http:/commonjs.org) 创建 了 一 个 模块 规范 ， 后 者 同样 使 用 reduire() 函 





















































数 。 这 种 模块 系统 通常 用 来 处 理 模块 加 载 和 依赖 性 管理 ， 这 些 内 容 已 经 
超出 本 书 的 讨论 范围 。 如 果 使 用 这 些 框架 ， 则 必须 按照 框架 提供 的 模块 
编写 约定 来 定义 模块 。 本 节 仪 对 模块 约定 做 一 些 简单 的 讨论 。 


模块 化 的 目标 是 支持 大 规模 的 程序 开发 ， 处 理 分 散 源 中 代码 的 组 
装 ， 并 且 能 让 代码 正确 运行 ， 哪 介 包 含 了 作者 所 不 期 望 出 现 的 模块 代 
码 ， 也 可 以 正确 执行 代码 。 为 了 做 到 这 一 点 ， 不 同 的 模块 必须 避免 修改 
全 局 执行 上 下 文 ， 因 此 后 续 模 块 应 当 在 它们 所 期 望 运行 的 原始 (或 接近 
原始 ) 上 下 文中 执行 8。 这 实际 上 意味 着 模块 应 当 尽 可 能 少 地 定义 全 
局 标识 ， 理 想 状 况 是 ， 所 有 模块 都 不 应 当 定 义 超过 一 个 (全 局 标识 ) 。 
接 下 来 我 们 给 出 的 一 种 简单 的 方法 可 以 做 到 这 一 点 。 你 会 发 现在 
JavaScript 中 实现 一 个 模块 代码 并 不 困难 : 在 本 书 中 很 多 示例 代码 都 用 到 
了 这 种 技术 。 


9.9.1 用 做 命名 空间 的 对 象 


在 模块 创建 过 程 中 避免 污染 全 局 变量 的 一 种 方法 是 使 用 一 个 对 象 作 
为 命名 空间 。 它 将 函数 和 值 作 为 命名 空间 对 象 属性 存储 起 来 〈 可 以 通过 
全 局 变量 引用 ) ， 而 不 是 定义 全 局 函数 和 变量 。 拿 例 9-6 的 Set 类 来 说 ， 
它 定 义 了 一 个 全 局 构造 函数 Set()。 然 后 给 这 个 类 定义 了 很 多 实例 方法 ， 
但 将 这 些 实例 方法 存储 为 Set.prototype 的 属性 ， 因 此 这 些 方法 不 是 全 局 
的 。 示 例 代 码 也 包含 一 个 _v2s0 工 具 函 数 ， 但 也 没有 定义 它 为 全 局 函 
数 ， 而 是 把 它 存 储 为 Set 的 属性 。 


接 下 来 看 一 下 例 9-16， 这 个 例子 定义 了 很 多 抽象 类 和 非 抽象 类 。 
个 类 都 只 包含 一 个 全 局 标识 ， 但 整个 模块 〈 这 个 JavaScript 文 件 ) 定义 了 
很 少 的 全 局 变量 。 基 于 这 种 “保持 干净 的 全 局 命名 空间 ”的 观点 ， 一 种 更 
好 的 做 法 是 将 “集合 ”类 定义 为 一 个 单独 的 全 局 对 象 : 



































Var sets={}; 


这 个 sets 对 象 是 模块 的 命名 空间 ， 并 且 将 每 个 “集合 ”类 都 定义 为 这 
个 对 象 的 属性 : 


Sets,SingJletonSet=sets,AbstractEnumerabJeSet .extend(...); 


如 果 想 使 用 这 样 定义 的 类 ， 需 要 通过 命名 空间 来 调用 所 需 的 构造 函 





Var s=new sets.Singletonset(1); 





模块 的 作者 并 不 知道 他 的 模块 会 和 哪些 其 他 模块 一 起 工作 ， 因 此 尤 
为 注意 这 种 命名 空间 的 用 法 市 来 的 命名 冲突 。 然 而 ， 使 用 这 个 模块 的 开 
发 者 是 知道 它 用 了 哪些 模块 、 用 到 了 哪些 名 字 的 。 程 序 员 并 不 一 定 要 严 
格 这 守 命 名 空间 的 写法 ， 只 需 将 常用 的 值 “ 导 入 ”到 全 局 命名 空间 中 。 程 
序 员 如 果 要 经 常 使 用 sets 命 名 空间 中 的 Set 类 ， 可 以 这 样 将 它 导 入 : 





var Set=sets.Set;// 将 Set 导 入 到 全 局 命名 空间 中 
var s=new Set(1,2,3);// 这 样 每 次 使 用 它 就 不 必 加 set 前 级 了 





























有 时 模块 作者 会 使 用 更 深层 骸 套 的 命名 空间 。 如 果 sets 模 块 是 另外 
一 组 更 大 的 模块 集合 的 话 ， 它 的 命名 空间 可 能 会 是 collections.sets， 模 块 
代码 的 开始 会 这 样 写 : 

















var collections;// 声 明 ( 或 重新 声明 ) 这 个 全 局 变量 
if(!collections)// 如 果 它 原本 不 存在 
collections={};// 创 建 一 个 顶层 的 命名 空间 对 象 
collections.sets={}// 将 sets 命 名 空间 创建 在 它 的 内 部 
// 在 collections.sets 内 定义 set 类 
collections.sets.AbstractSet=function(){...} 























最 顶层 的 命名 空间 往往 用 来 标识 创建 模块 的 作者 或 组 织 ， 并 避免 命 
名 空间 的 命名 冲突 。 比 如 ，Google 的 Closure 库 在 它 的 命名 空间 
goog.structs 中 定义 了 Set 类 。 每 个 开发 者 都 反 转 互联 网 域名 的 组 成 部 分 ， 
这 样 创建 的 命名 空间 前 级 是 全 局 唯一 的 ， 一 般 不 会 被 其 他 模块 作者 采 
用 。 比 如 我 的 网 站 是 davidflanagan.com， 我 可 以 通过 这 个 命名 空间 来 发 
布 我 的 sets 模 块 : com.davidflanagan.clooectinos.sets 。 


使 用 很 长 的 命名 空间 来 导入 模块 的 方式 非常 重要 ， 然 而 程序 员 往 往 
将 整个 模块 导入 全 局 命名 空间 ， 而 不 是 导入 命名 空间 中 的 条 个 ) 单独 


的 类 。 











var sets=com,.davidflanagan.collections.sets; 





按照 约定 ， 模 块 的 文件 名 应 当 和 命名 空间 匹配 。sets 模 块 应 当 保 存 
在 文件 sets.js 中 。 如 果 这 个 模块 使 用 命名 空间 es .Sets， 那么 这 个 
文件 应 当 保存 在 目录 collections/ 下 〈 这 个 目录 还 应 当 另 一 个 文件 
maps.js) 。 并 且 使 用 命名 空间 ii 的 模块 应 
当 在 文件 com/davidflanagan/collections/sets.js 中 。 


9.9.2 ”作为 私有 命名 空间 的 函数 


模块 对 外 导出 一 一 公用 API，1 这 些 API 是 提供 给 其 他 程序 员 使 用 
的 ， 它 包括 函数 、 类 、 属 性 和 方法 。 但 模块 的 实现 往往 需要 一 些 额外 的 
辅助 函数 和 方法 ， 这 送 攀 数 和 方法 并 不 需要 竹简 块 外 他 可 见 ， 比如 ， 例 
9-6 中 的 Set._v2s() 函 数 ， 模 块 作者 不 希望 Set 类 的 用 户 在 人 条 时 刻 调用 这 个 
函数 ， 因 此 这 个 方法 最 好 在 类 的 外 部 是 不 可 访问 的 。 


可 以 通过 将 模块 (本 例 中 的 Set 类 ) 定义 在 茶 个 函数 的 内 部 来 实 
现 。 正 如 8.5 节 所 描述 的 一 样 ， 在 一 个 函数 中 定义 的 变量 和 函数 都 属于 
函数 的 局 部 成 员 ， 在 函数 的 外 部 是 不 可 见 的 。 实 际 上 ， 可 以 将 这 个 函数 
作用 域 用 做 模块 的 私有 命名 空间 (有 时 称 为 “模块 函数 ”) 。 例 9-24 展 示 
了 如 何 使 用 “模块 函 数 ” 来 实现 Set 类 : 


例 9-24: 模块 函数 中 的 Set 类 












































// 声 明 全 局 变量 Set， 使 用 一 个 函数 的 返回 值 给 它 赋值 

// 函 数 结束 时 紧 跟 的 一 对 圆 括号 说 明 这 个 函数 定义 后 立即 执行 

// 它 的 返回 值 将 赋值 给 Set， 而 不 是 将 这 个 函数 赋值 给 Set 

// 注 意 它 是 一 个 函数 表达 式 ， 不 是 一 条 语句 ， 因 此 函数 "invocation" 并 没有 创建 全 局 变量 
var Set=(function invocation(){ 
function Set(){// 这 个 构造 函数 是 局 部 变量 
this ,values={};// 这 个 对 象 的 属性 用 来 保存 这 个 集合 
this.n=0;// 集 合 中 值 的 个 数 
this.add.apply(this,arguments);// 将 所 有 的 参数 都 添加 至 集合 中 
































































































































} 

// 给 Set .prototype 定 义 实例 方法 

// 这 里 省 略 了 详细 代码 

Set .prototype.contains=function(value){// 注 意 我 们 调用 了 v2s( )， 而 不 是 调用 带 有 笨重 的 前 绥 的 
set._v2s() 

return this.values.hasOwnProperty(v2s(value)); 

}; 

Set.prototype.size=function(){return this.n,;}; 

Set.prototype.add=function(){/*...*/}; 

Set.prototype.remove=function(){/*...*/}; 

Set .prototype.foreach=function(f,context){/*...*/};// 这 里 是 上 面 的 方法 用 到 的 一 些 辅 助 函 
数 和 变量 

// 它 们 不 属于 模块 的 共有 API， 但 它们 都 隐藏 在 这 个 函数 作用 域内 

// 因 此 我 们 不 必 将 它们 定义 为 Set 的 属 性 或 使 用 下 划 线 作为 其 前 绥 

function v2s(val){/*...*/ 

function objectId(0){/*. 四 




























































































































































































var nextId=1;// 这 个 模块 的 共有 API 是 Set ( ) 构 造 函 数 

// 我 们 需 3 要 把 这 个 数 从 和 有 命名 空间 中 导出 来 

// 以 便 在 外 部 也 可 以 使 用 它 ， 在 这 种 情况 下 ， 我 们 通过 返回 这 个 构造 函数 来 丑 
// 它 变 成 第 一 行 代码 所 指 的 家 达 式 的 值 

return Set; 


}() ) ; /7 定义 函数 后 立即 执行 
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注意 ， ee 数 ， 这 在 JavaScript 中 是 一 种 惯 
用 法 。 如 果 想 让 代码 在 一 个 私有 命名 空间 中 运行 ， 只 须 给 这 段 代 码 加 上 
前 级 "(function0{" 和 后 级"}())"。 开始 的 友 圆 括号 确保 这 是 一 个 函数 表达 
式 ， 而 不 是 函数 定义 语句 ， 因 此 可 以 给 该 前 级 添加 一 个 函数 名 来 让 代码 
变 得 更 加 清晰 。 在 例 9-24 中 使 用 了 名 字 "invocation"， 用 以 强调 这 个 函数 
UV 名 字 "namespace" 也 可 以 用 来 强调 这 个 函数 
有 空间 。 


一 旦 将 模块 代码 封装 进 一 个 函数 ， 就 需要 一 些 方法 导出 其 公用 
API， 以 便 在 模块 函数 的 外 部 调用 它们 。 在 例 9-24 中 ， 模 块 函数 返回 构 
造 函 数 ， 这 个 构造 函数 随后 赋值 给 一 个 全 局 变量 。 将 值 返 回 已 经 清楚 地 
表明 API 已 经 导出 在 函数 作用 域 之 外 。 如 果 模 块 API 包 含 多 个 单元 ， 则 
它 可 以 返回 命名 空间 对 象 。 对 于 sets 模 块 来 说 ， 可 以 将 代码 写成 这 样 : 






































// 创 建 一 个 全 局 变量 用 来 存放 集合 相关 的 模块 

Var collections; 
if(!collections)collections={};// 定 义 Sets 模 块 
collections.sets=(function namespace( ){// 在 这 里 定义 多 种 "集合 "类 ， 使 用 局 部 变量 和 函数 
//… 这 里 省 上 略 很 多 代码 .… 
// 通 过 返回 命名 空间 对 象 将 API 导 出 
return{// 导 出 的 属性 名 : 局 部 变量 名 字 

AbstractSet : RD ee 

NotSet :NotSet， 

AbstractEnumerableset :AbstractEnumerableSet, 
Singletonset:Singletonset, 
AbstractwritableSet:AbstractwritableSset, 
ArraySet :ArraySet 


























































































































}; 
}()); 





男 外 一 种 类 似 的 技术 是 将 模块 函数 当做 构造 函数 ， 通 过 new 来 调 
用 ， 通 过 将 它们 册 赋 值 给 this 来 将 其 导出 并 





Var collections,; 

if(!collections)collections={}; 

collections.sets=(new function namespace(){//…. 这 里 省 略 很 多 代码 .…. 
// 将 API 导 出 至 this 对 象 

this.AbstractSet=AbstractSet,; 

this,.NotSet=NotSet;//...... 




















// 注 意 ， 这 里 
}()); 





有 有 返回 值 





ey 




















作为 一 种 丛 代 方 采 ， 如 果 已 经 定义 了 全 局 命名 空间 对 象 ， 这 个 模块 
函数 可 以 直接 设置 那个 对 象 的 属性 ， 不 用 返回 任何 内 容 : 











Var collections; 
if(!collections)collections={}; 
collections. sets={}; 

(function namespace( ){// a 这 里 省 略 很 多 代码 .…. 
// 将 共用 API 导 出 到 上 上 面包 建交 命名 空 间 对 象 上 
collections. Sets， AbstractSet=AbstractSet 
collections,.sets.NotSet=NotSet;//..... 

// 导 出 的 操作 已 经 执行 了 ， 这 里 不 需要 再 写 return 语 句 了 
}()); 








































































































有 些 框架 实现 了 模块 加 载 功 能 ， 其 中 包括 其 他 一 些 导 出 模块 API 的 
方法 。 比 如 ， 使 用 provides0O 函 数 来 注册 其 API， 提 供 exports 对 象 岂 用 以 
存储 模块 API。 由 于 JavaScript 目 前 还 不 具备 模块 管理 的 能 力 ， 因 此 应 当 
根据 所 使 用 的 框架 和 工具 包 来 选择 合适 的 模块 创建 和 导出 API 的 方式 。 


[ 册 强 / 弱 类 型 是 指 类 型 检查 的 严格 程度 ， 为 所 有 变量 指定 数据 类 型 称 

为 “ 强 类 型 ”。 

2 比如 传统 类 的 封装 、 继 承 和 多 态 。 

[3] 参 照 ，http://zh.wikipedia.org/zh/ 工 厂 方法 。 

呈 ] 两 个 实 部 相等 ， 虚 部 互 为 相反 数 的 复数 互 为 共 恩 复数 。 

[5] 参 照 4.3 节 。 

[6] 这 个 例子 的 作者 是 Joshua Bloch， 最 初 是 基于 Java 写 的 ， 可 以 在 这 里 
查看 到 : http://jcp.org/aboutJava/communityprocess/jsr/tiger/enum.html。 

[7 这 里 所 说 的 起 始点 相同 就 是 下 边界 相同 。 
[8]apply0 的 第 二 个 参数 是 一 个 数组 ， 数 组 成 员 就 是 参数 列表 。 

[9] 可 参照 Erich Gamma et al 所 著 《Design Patterns》 和 Joshua Bloch 所 著 
《Effective Java》 。 

[10] 作 者 这 里 的 表述 稍 有 含混 ， 作 者 的 意思 应 该 是 “Set 子 类 的 实例 也 是 
Set 的 实例 ”， 而 不 是 “ 子 类 是 Set 的 实例 ”。 

LT 这 里 指 的 是 实现 类 的 不 同 的 定制 版 本 的 解决 办 法 ， 更 直接 地 讲 就 是 
实现 多 态 的 方法 。 

L121 这 里 指 的 是 “对 象 id” 属 性 。 

[1L31]Monkey-patching 是 指 修改 现 有 对 象 的 原型 ， 在 JavaScript 中 ， 修 改 对 
象 的 原型 就 相当 于 修改 了 实例 化 它 的 类 。 
































4 使 用 in 运 算 符 可 以 对 对 象 成 员 进行 珊 历 ， 包 括 对 原型 对 象 中 的 非 内 
置 成 员 进 行 表 历 。 

[15] 作 者 这 里 的 表述 是 围绕 “模块 是 一 个 可 重用 的 代码 片段 ”这 一 观念 
的 ， 不 论 是 从 代码 语法 结构 上 解 契 ， 还 是 将 代码 拆 分 至 不 同 的 文件 中 ， 
只 要 用 某 种 方法 将 代码 “分 离 ”， 就 认为 是 一 个 模块 ， 因 此 作者 说 任何 代 
码 都 可 以 处 理 为 一 个 模块 。 

[16] 这 里 的 “原始 上 下 文 ”是 指 调用 模块 时 所 在 的 上 下 文 ， 可 能 处 在 一 个 
很 深 的 团 包 当中 ， 但 这 个 模块 的 逻辑 不 应 该 影响 到 其 他 的 上 下 文 特别 是 
全 局 上 下 文 。 

L7] 这 里 作者 所 说 的 “它们 ?是 指 构造 函数 创建 的 新 实例 。 

[8] 使 用 构造 函数 和 模块 函数 来 实现 私有 成 员 的 原理 是 一 模 一 样 的 ， 只 
是 调用 的 方式 不 一 样 。 

[191] 可 以 参照 CommonJS 规 范 http://commonjs.org。 

















第 10 章 ”正则 表达 式 的 模式 匹配 


正则 表达 式 (regular ”expression) 是 一 个 描述 字符 模式 的 对 象 。 
JavaScript 的 RegExp 类 表示 正则 表达 式 ，String 和 RegExp 都 定义 了 方法 ， 
后 者 使 用 正则 表达 式 进 行 强 大 的 模式 匹配 和 文本 检索 与 蔡 换 功 能 。 
JavaScript 的 正则 表达 式 语 法 是 Perl5 的 正则 表达 式 语 法 的 大 型 子 集 ， 所 
以 对 于 有 Pen 编程 经 验 的 程序 员 来 说 ， 学 习 JavaScript 中 的 正则 表达 式 凯 


征 小 某 一 砍 。 


本 章 首 先 介绍 用 以 描述 “文本 模式 ”的 正则 表达 式 语法 。 随 后 讲解 了 
使 用 正则 表达 式 的 String 和 RegExp 方 法 。 


10.1 ”正则 表达 式 的 定义 


JavaScript 中 的 正则 表达 式 用 RegExp 对 象 表示 ， 可 以 使 用 RegExp0 
构造 函数 来 创建 RegExp 对 象 ， 不 过 RegExp 对 象 更 多 的 是 通过 一 种 特殊 
的 直接 量 语法 来 创建 。 就 像 通过 引号 包 囊 字符 的 方式 来 定义 字符 串 直接 
es 正则 表达 式 直接 量 定义 为 包含 在 一 对 和 斜 村 (/) 之 间 的 字符 ， 

列 如 ; 




















var pattern=/s$/; 


运行 这 段 代 码 创建 一 个 新 的 RegExp 对 象 ， 并 将 它 赋 值 给 变量 
pattern。 这 个 特殊 的 RegExp 对 和 象 用 来 匹配 所 有 以 字母 "s" 结 尾 的 字符 串 。 
用 构造 函数 RegExp0) 也 可 以 定义 个 与 之 等 价 的 正则 表达 式 ， 代 码 如 下 : 


Var pattern=new RegExp("s$"); 
RegExp 直 接 量 和 对 象 的 创建 
就 像 字 符 串 和 数字 一 样 ， 程 序 中 每 个 取 值 相同 的 原始 类 型 直接 量 均 
表示 相同 的 值 ， 这 是 显而易见 的 。 程 序 运 行 时 每 次 遇 到 对 象 直接 量 《〈 初 


始 化 表达 了 式 ) 诸如 { 和 口 的 时 候 都 会 创建 新 对 象 。 比 如 ， 如 果 在 循环 体 
中 写 var a=[]， 则 每 次 过 历 都 会 创建 一 个 新 的 空 数组 。 





正则 表达 式 直 接 量 则 与 此 不 同 ，ECMAScript 3 规范 规定 ， 一 个 正则 
表达 式 直 接 量 会 在 执行 到 它 时 转换 为 一 个 RegExp 对 象 ， 同 一 段 代 码 所 
表示 正则 表达 式 直 接 量 的 每 次 运算 都 返回 同一 个 对 象 。ECMAScript 5 规 
范 则 做 了 相反 的 规定 ， 同 一 段 代 码 所 表示 的 正则 表达 式 直 接 量 的 每 次 运 
算 都 返回 新 对 象 。 正 一 直 都 是 按照 EFCMAScript 5 规范 实现 的 ， 多 数 最 新 
版 本 的 浏览 器 也 开始 遵循 ECMAScript 5， 尽 管 目前 该 标准 并 未 全 面 广泛 
推行 外。 


正则 表达 式 的 模式 规则 是 由 一 个 字符 序列 组 成 的 。 包 括 所 有 字母 和 
数字 在 内 ， 大 多 数 的 字符 都 是 按照 直接 量 仅 描述 待 匹 配 的 字符 的 。 如 此 
次 来 ， 正 则 表达 却 /iava/ 可 以 匹配 任何 包含 "java" 子 串 的 字符 串 。 除 此 之 
外 ， 正 则 表达 陈 中 还 有 其 他 具有 特殊 语义 的 字符 ， 这 些 字符 并 不 按照 字 
面 含 义 进行 匹配 。 比 如 ， 正 则 表达 陈 /s$/ 包 含 两 个 字符 ， 第 一 个 字 
符 "s" 按 照 字面 含义 匹配 ， 第 二 个 字符 $ 是 一 个 具有 特殊 语义 的 元 字符 ， 
i 因此 这 个 正则 表达 式 可 以 匹配 任何 以 "s" 结 束 
I 字符 串 。 


接 下 来 的 几 节 会 进一步 讲解 JavaScript 正 则 表达 式 中 使 用 的 各 种 字符 
和 元 字符 。 























10.1.1 直接 量 字 符 


正如 上 文 提 到 的 ， 正 则 表达 式 中 的 所 有 字母 和 数字 都 是 按照 字面 含 
义 进行 匹配 的 。JavaScript 正 则 表达 式 语 法 也 支持 非 字 母 的 字符 匹配 ， 这 
些 字符 需要 通过 反 和 斜 线 (\) 作为 前 缀 进行 转 义 。 比 如 ， 转 义 字 符 \n 用 以 
匹配 换行 符 。 表 10-1 中 列 出 了 这 些 转 义 字符 。 








表 10-1， 正则 表达 式 中 的 直接 量 字符 


字符 匹配 

字母 和 数字 字符 。 自身 

W NUL 字符 (w0000) 

Mt 制 表 符 (wu0009) 

换行 符 (000A) 

W 重 直 制 表 香 (\u000B) 

tf 换 页 符 (\n000C) 

vr 回 车 符 (\u000D) 

Wn 由 十 六 进 制 数 nn 指 定 的 拉丁 字符 ， 例 如 ，Wx0A 等 价 于 \n 
WU 由 十 六 进 制 数 xxxx 指 定 的 Unicode 字 符 ， 例 如 \u0009 等 价 于 \t 
\cX 控制 字符 AX， 例 如 \cJ 等 价 于 换行 符 w 


在 正则 表达 式 中 ， 许 多 标点 符号 上 共有 特殊 含义 ， 它 们 是 : 
‘8.*+9=1:1\ OL 


在 接 下 来 的 几 市 里 ， 我 们 将 学 习 这 些 符号 的 含义 。 菏 些 符 写 只 有 在 
正则 表达 式 的 茶 些 上 下 文中 才 具 有 茶 种 特殊 含义 ， 在 其 他 上 下 文中 则 被 
当成 直接 量 处 理 。 然 而 ， 如 果 想 在 正则 表达 式 中 使 用 这 些 字符 的 直接 量 
进行 匹配 ， 则 必须 使 用 前 级 \， 这 是 一 条 通行 规则 。 其 他 标点 符号 〈 比 
如 @ 和 引号 ) 没有 特殊 含义 ， 在 正则 表达 式 中 按照 字面 含义 进行 匹配 。 


如 果 不 记 得 哪些 标点 符 吕 需要 反 斜 线 转 义 ， 可 以 在 每 个 标点 符号 前 
都 加 上 反 和 斜 线 。 忆 外 需要 注意 ， 许 多 字母 和 数字 在 有 上 反 和 斜 线 做 前 绥 时 也 
有 特殊 含义 ， 所 以 对 于 想 按照 直接 量 进行 匹配 的 字母 和 数字 ， 尽 量 不 要 


























用 反 斜 线 对 其 转 义 。 当 然 ， 要 想 在 正则 表达 式 中 按照 直接 量 匹 配 反 斜 线 
本 身 ， 则 必须 使 用 反 斜 线 将 其 转 义 。 比 如 ， 正 则 表达 式 “AV” 用 以 匹配 任 
何 包含 反 斜 线 的 字符 串 。 


1 条 下放 


将 直接 量 字符 单独 放 进 方 括号 内 就 组 成 了 字符 类 (character 
dlass) 。 一 个 字符 类 可 以 匹配 它 所 包含 的 任意 字符 。 因 此 ， 正 则 表达 
式 /[abc]/ 就 和 字母 "a"、"b"、"e" 中 的 任意 一 个 都 匹配 。 另 外 ， 可 以 通 
过 “w 符 号 来 定义 否定 字符 类 ， 它 匹配 所 有 不 包含 在 方 括号 内 的 字符 。 
定义 否定 字符 类 时 ， 将 一 个 ”符号 作为 左 方 括号 内 的 第 一 个 字符 。 正 
则 表达 式 /[Aabc]/ 匹 配 的 是 "a"、"b"、"c" 之 外 的 所 有 字符 。 字 符 类 可 以 使 
用 连 字符 来 表示 字符 范围 。 要 匹配 拉丁 字母 表 中 的 小 写字 母 ， 可 以 使 
用 /[a-z]/， 要 匹配 拉丁 字母 表 中 任何 字母 和 数字 ， 则 使 用 /[a-zA-20-9]/。 


由 于 某 些 字 符 类 非常 党 用， 因此 在 JavaScript 的 正则 表达 式 语法 中 ， 
使 用 了 这 些 特殊 字符 的 转 义 字符 来 表示 它们 。 例 如 ，\s 匹 配 的 是 空格 
符 、 制 表 符 和 其 他 Unicode 空 白 符 ，\S 匹 配 的 是 非 Unicode 空 白 符 的 字 
符 。 表 10-2 列 出 了 这 些 字 符 ， 并 且 总 结 了 字符 类 的 语法 (注意 ， 有 些 字 
符 类 转 义 字符 只 能 匹配 ASCII 字 符 ， 还 没有 扩展 到 可 以 处 理 Unicode 字 
符 ， 但 可 以 通过 十 六 进 制 表示 方法 来 显 式 定义 Unicode 字 符 类 ， 例 
如 ，/[vu0400-u04FF]/ 用 以 匹配 所 有 的 Cyrillic 字 符 乌 ) 。 
































表 10-2; 正则 表达 式 的 字符 类 


字符 匹配 
[.,,] 方 括号 内 的 任意 字符 
[^,,,] 不 在 方 括号 内 的 任意 字符 


除 换行 符 和 其 他 Unicode 行 终止 符 之 外 的 任意 字符 
W ”任何 ASCII 字 符 组 成 的 单词 ， 等 价 于 [a-zA-70-9] 
\W 任何 不 是 ASCII 字 符 组 成 的 单词 ， 等 价 于 [^a-zA-70-9] 
\s 任何 Unicode 空 白 符 
\$ 任何 非 Unicode 空 白 符 的 字符 ， 注 意 \w 和 \5 不 同 
\d ”任何 ASCII 数 字 ， 等 价 于 [0-9] 
\D 除了 ASCII 数 字 之 外 的 任何 字符 ， 等 价 于 [^0-9] 
[\b] ” 进 格 直接 量 (特例 ) 
注意 ， 在 方 括号 之 内 也 可 以 写 这 些 特殊 转 义 字符 。 比 如 ， 由 于 \s 匹 
配 所 有 的 空白 字符 ，\d 匹 配 的 是 所 有 数字 ， 因 此 /fs\d]/ 就 匹配 任意 空 
符 或 者 数字 。 注 意 ， 这 里 有 一 个 特例 。 下 面 我 们 将 会 看 到 转 义 符 \b 具 有 
的 特殊 含义 ， 当 用 在 字符 类 中 时 ， 它 表示 的 是 退 格 符 ， 所 以 要 在 正则 表 


达 式 中 按照 直接 量 表示 一 个 退 格 符 ， 只 需要 使 用 具有 一 个 元 素 的 字符 
类 /[\b]/。 


10.1.3 ”重复 

用 刚刚 学 过 的 正则 表达 式 的 语法 ， 可 以 把 两 位 数 摘 述 成 AdAd/， 四 位 
数 描 述 成 Addd\d/。 但 到 目前 为 止 ， 还 没有 一 种 方法 可 以 用 来 描述 任意 
多 位 的 数字 ， 或 者 描述 由 三 个 字母 和 一 个 数字 构成 的 字符 串 。 这 些 正 则 
表达 式 语 法 中 较为 复杂 的 模式 都 提 到 了 正则 表达 式 中 某 元 素 的 “重复 出 











现 次 数 ”。 


我 们 在 正则 模式 之 后 跟随 用 以 指定 字符 重复 的 标记 。 由 于 茶 些 重复 
种 类 非常 钟 用 ， 因 此 就 有 一 些 专门 用 于 表示 这 种 情况 的 特殊 字符 。 例 
如 , “+? 用 以 匹配 前 一 个 模式 的 一 个 或 多 个 副本 。 表 10-3 总 结 了 这 些 表 
示 重 复 的 正则 语法 。 





表 10-3， 正则 表达 式 的 重复 字符 语法 

字符 含义 

{n,m} ”匹配 前 一 项 至 少 n 次 ， 但 不 能 超过 m 次 

{n,} 匹配 前 一 项 m 次 或 者 更 多 次 

{ 人 匹配 前 一 项 mp 次 

? 匹配 前 一 项 0 次 或 者 1 次 ， 也 就 是 说 前 一 项 是 可 选 的 ， 等 价 于 {0,1} 
+ 匹配 前 一 项 1 次 或 多 次 ， 等 价 于 {1,} 

* 区 配 前 一 项 0 次 或 多 次 ， 等 价 于 {0, } 


这 里 有 一 些 例子 : 





A\Nd{2,4}/// 匹 配 2~4 个 数字 

/A\w{3}\d?/// 精 确 匹 配 三 个 单词 和 一 个 可 选 的 数字 

八 stjava\s+/// 匹 配 前 后 带 有 一 个 或 多 个 空格 的 字符 串 "java" 
/[^(]*/// 匹 配 一 个 或 多 个 非 左 括号 的 字符 
































在 使 用 “*” 和 “?” 时 要 注意 ， 由 于 这 些 字符 可 能 匹配 0 个 字符 ， 因 此 
它们 允许 什么 都 不 匹配 。 例 如 ， 正 则 表达 式 /a*/ 实 际 上 与 字符 
串 "bbbb" 匹 配 ， 因 为 这 个 字符 串 含 有 0 个 a。 


非 贫 区 的 重复 


表 10-3 中 列 出 的 匹配 重复 字符 是 尽 可 能 多 地 匹配 ， 而 且 人 允许 后 续 的 
正则 表达 式 继续 匹配 。 因 此 ， 我 们 称 之 为 “ 贪 禁 的 ?匹配 。 我 们 同样 可 以 








使 用 正则 表达 式 进行 非 仿 林 匹配。 只 须 在 待 匹 配 的 字符 后 跟随 一 个 问号 
即 可 : “?2”、“+?”、“*?” 或 “{1,5}?”。 比 如 ， 正 则 表达 式 /a+/ 可 以 匹配 一 
个 或 多 个 连续 的 字母 8。 当 使 用 "aaa" 作 为 匹配 字符 串 时 ， 正 则 表达 式 会 
匹配 它 的 三 个 字符 。 但 是 /a+?/ 也 可 以 匹配 一 个 或 多 个 连续 字母 9， 但 它 
是 尽 可 能 少 地 匹配。 我 们 同样 将 "aaa" 作 为 匹配 字符 串 ， 但 后 一 个 模式 只 
能 匹配 第 二 个 as 


使 用 非 贫 焚 的 匹配 模式 所 得 到 的 结果 可 能 和 期 望 并 不 一 致 。 考 虑 以 
下 正则 表达 式 /atb/， 它 可 以 匹配 一 个 或 多 个 a， 以 及 一 个 b。 当 使 
用 "aaab" 作 为 匹配 字符 串 时 ， 它 会 匹配 整个 字符 串 。 现 在 再 试 一 下 非 贪 
焚 史 配 的 版 本 /a+?b/， 它 死 配 尽 可 能 少 的 a 和 一 个 b。 当 用 它 来 匹 
配 "aaab" 时 ， 你 期 望 它 能 匹配 一 个 a 和 最 后 一 个 b。 但 实际 上 ， 这 个 模式 
却 匹配 了 整个 字符 串 ， 和 该 模式 的 仿 禁 匹配 一 模 一 样 。 这 是 因为 正则 表 
达 式 的 模式 匹配 总 是 会 寻找 字符 串 中 第 一 个 可 能 匹配 的 位 置 。 由 于 该 匹 
ee. 上 字符 开始 的 ， 因 此 在 这 里 不 考虑 它 的 子囊 中 更 短 
匹配 。 


10.1.4 选择 、 分 组 和 引用 


正则 表达 式 的 语法 还 包括 指定 选择 项 、 子 表达 式 分 组 和 引用 前 一 子 
表达 式 的 特殊 字符 。 字 符 “" 用 于 分 隔 供 选 择 的 字符 。 例 如 ，/ablcdlef/ 可 
以 匹配 字符 串 "ab"， 也 可 以 匹配 字符 串 "cd"， 还 可 以 匹配 字符 
串 "ef"。Ad{3}|[a-z]{43 匹 配 的 是 三 位 数字 或 者 四 个 小 写字 母 。 


注意 ， 选 择 项 的 答 试 匹配 次 序 是 从 左 到 右 ， 直 到 发 现 了 匹配 项 。 如 
果 左 边 的 选择 项 匹配 ， 就 忽略 右边 的 匹配 项 ， 即 使 它 产 生 更 好 的 匹配 。 
因此 ， 当 正则 表达 式 /alab/ 匹 配 字 符 串 "ab" 时 ， 它 只 能 匹配 第 一 个 字符 。 


正则 表达 式 中 的 圆 括号 有 多 种 作用 。 一 个 作用 是 把 单独 的 项 组 合成 
子 表 达 式 ， 以 便 可 以 像 处 理 一 个 独立 的 单元 那样 用 “”、“*”、“+? 或 
者 “?” 等 来 对 单元 内 的 项 进行 处 理 。 例 如 ，/java(script)?/ 可 以 匹配 字符 
串 "java"， 其 后 可 以 有 "script" 也 可 以 没有 。/(ablcd)+lef/ 可 以 下 配 字符 
串 "ef"， 也 可 以 匹配 字符 串 "ab" 或 "cd" 的 一 次 或 多 次 重复 。 


在 正则 表达 式 中 ， 贺 括号 的 为 一 个 作用 是 在 完整 的 模式 中 定义 子 模 
式 。 当 一 个 正则 表达 式 成 功 地 和 目标 字符 串 相 匹配 时 ， 可 以 从 目标 串 中 
抽出 和 圆 括 号 中 的 子 模式 相 匹 配 的 部 分 《我 们 将 在 本 章 随 后 的 部 分 中 看 
到 如 何 取得 这 些 匹 配 的 子囊 ) 。 例 如 ， 假 定 我 们 正在 检索 的 模式 是 一 个 


























或 多 个 小 写字 母后 面 跟随 了 一 位 或 多 位 数字 ， 则 可 以 使 用 模式 /[a- 
Zz]+\d+/。 但 假定 我 们 真正 关心 的 是 每 个 匹配 尾部 的 数字 ， 那 么 如 果 将 模 
式 的 数字 部 分 放 在 括号 中 W[a-z]+(Cd+))， 就 可 以 从 检索 到 的 匹配 中 抽取 
数字 了 ， 之 后 我 们 会 有 详尽 的 解释 。 


带 圆 括号 的 表达 式 的 另 一 个 用 途 是 允许 在 同一 正则 表达 式 的 后 部 引 
用 前 面 的 子 表达 式 。 这 是 通过 在 字符 只" 后 加 一 位 或 多 位 数字 来 实现 的 。 
这 个 数字 指定 了 和 带 圆 括号 的 子 表达 式 在 正则 表达 式 中 的 位 置 。 例 如 ，\1 
引用 的 是 第 一 个 囊 圆 括号 的 子 表达 式 ，\3 引 用 的 是 第 三 个 融 圆 括号 的 子 
表达 式 。 注 意 ， 因 为 子 表达 式 可 以 能 套 另 一 个 子 表达 式 ， 所 以 它 的 位 置 
是 参与 计数 的 左 括号 的 位 置 。 例 如 ， 在 下 面 的 正则 表达 式 中 ， 磐 套 的 子 
表达 式 ([Ss]cripbD 可 以 用 \2 来 指 代 : 





























/([Jjjava([Ss]lcript)?)\sis\s(fun\w*)/ 





对 正则 表达 式 中 前 一 个 子 表 达 式 的 引用 ， 并 不 是 指 对 子 表达 式 模 式 
的 引用 ， 而 指 的 是 与 那个 模式 相 匹 配 的 文本 的 引用 。 这 样 ， 引 用 可 以 用 
于 实施 一 条 约束 ， 即 一 个 字符 串 各 个 单独 部 分 包含 的 是 完全 相同 的 字 
符 。 例 如 ， 下 面 的 正则 表达 式 匹配 的 就 是 位 于 单 引 号 或 双 引 号 之 内 的 0 
个 或 多 个 字符 。 但 是 ， 它 并 不 要 求 左 侧 和 右 侧 的 引号 匹配 ( 即 ， 加 入 的 
两 个 引号 都 是 单 引 号 或 都 是 双 引 号 ) : 











/A[L'"][^'"]*['"]/ 


如 果 要 匹配 左 侧 和 右 侧 的 引号 ， 可 以 使 用 如 下 的 引用 : 


/A(['"])[^'"]*\1/ 





\I 匹 配 的 是 第 一 个 带 圆 括号 的 子 表 达 式 所 匹配 的 模式 。 在 这 个 例子 
中 ， 存 在 这 样 一 条 约束 ， 2 
正则 表达 式 不 允许 用 双 引 号 括 起 的 内 容 中 有 单 引 号 ， 反 之 亦 然 。 不 能 

字符 类 中 使 用 这 种 引用 ， 所 以 下 面 的 写法 是 非法 的 : 





A(['"])[^\1]*\1/ 








在 本 章 随 后 几 节 中 ， 我 们 会 看 到 一 种 对 带 圆 括号 的 子 表达 式 的 引 
用 ， 这 是 正则 表达 式 的 检索 和 蔡 换 操作 的 强大 特性 之 一 。 


同样 ， 在 正则 表达 式 中 不 用 创建 带 数 字 编 码 的 引用 ， 也 可 以 对 子 表 
达 式 进行 分 组 。 它 不 是 以 <* 和 中 "进行 分 组 ， 而 是 以 “GQ?:" 和 中 "来 进行 分 
组 ， 比 如 ， 考 虑 下 面 这 个 模式 : 





/([JjJjava(?:[Ss]lcript)?)\sis\s(fun\w*)/ 





这 里 ， 子 表达 式 (?:[Ss]cripb 仅 仅 用 于 分 组 ， 因 此 复制 符号 "?" 可 以 应 
用 到 各 个 分 组 。 这 种 改进 的 圆 括号 并 不 生成 引用 ， 所 以 在 这 个 正则 表达 
式 中 ，\2 引 用 了 与 (fun\W*) 匹 配 的 文本 。 


表 10-4 对 正则 表达 式 的 选择 、 分 组 和 引用 运算 符 做 了 总 结 。 


表 10.4, 正则 表达 式 的 选择 、 分 组 和 引用 字符 

字符 含义 

| 玩 择 ， 匹 配 的 是 该 符号 左边 的 子 表达 式 或 右边 的 子 表达 式 

(,,,) 组 合 ， 将 几 个 项 组 合 为 一 个 单元 ， 这 个 单元 可 通过 “* 、 + 、 2? 和 人 
等 符号 加 以 修饰 ， 而 且 可 以 记 住 和 这 个 组 合 相 匹配 的 字符 串 以 供 此 后 的 引用 使 用 

(3;,,,) 只 组 合 ， 把 项 组 合 到 一 个 单元 ， 但 不 记忆 与 该 组 相 匹配 的 字符 

\n 和 第 /个 分 组 第 一 次 匹配 的 字符 相 匹配 ， 组 是 圆 括 号 中 的 子 表达 式 (也 有 可 能 是 柑 
套 的 ) ， 组 索引 是 从 左 到 右 的 左 括号 数 ，“(?:” 形 式 的 分 组 不 编码 


10.1.5 ”指定 罗 配 位 置 


正如 前 面 所 介绍 的 ， 正 则 表达 式 中 的 多 个 元 素 才 能 够 匹配 字符 串 的 
一 个 字符 。 例 如 ，\s 匹 配 的 只 是 一 个 空白 符 。 还 有 一 些 正则 表达 式 的 元 
素 匹 配 的 是 字符 之 间 的 位 置 ， 而 不 是 实际 的 字符 。 例 如 ，\b 匹 配 一 个 单 
词 的 边界 ， 即 位 于 \w (ASCII 单 词 ) 字符 和 \W ( 非 ASCII 单 词 ) 之 间 的 





边界 ， 或 位 于 一 个 ASCII 单 词 与 字符 串 的 开始 或 结尾 之 间 的 边界 得 。 像 
Y 这 样 的 元 系 不 匹配 菜 个 可 见 的 字符 ， 它 们 指定 匹配 发 生 的 合法 位 置 。 
有 时 我 们 称 这 些 元 素 为 正则 表达 式 的 锚 ， 因 为 它们 将 模式 定位 在 搜索 字 
符 捉 的 特定 位 置 上 。 最 常用 的 销 元 素 是 和 ， 它 用 来 匹配 字符 串 的 开始 ， 

苗 元 素 $ 用 以 匹配 字符 串 的 结 


例如 ， 要 [匹配 单词 "JavaScript"， 可 以 使 用 正则 表达 
式 /\JavaScript$g/。 如 果 想 匹配 "Java" 这 个 单词 本 号 〈 不 像 
在 "JavaScript" 中 作为 单词 的 前 组) ， 可 以 使 用 正则 表达 式 AsWavas/， 可 
以 匹配 前 后 都 有 空格 的 单词 "Java"。 但 是 这 样 做 有 两 个 问题 ， 第 一 ， 如 
果 "Java" 出 现在 字符 串 的 开始 或 者 结尾 ， 束 匹配 不 成 功 ， 除 非 开 始 和 结 
尾 处 各 有 一 个 空格 。 第 二 个 问题 是 ， 当 找到 了 与 之 匹配 的 字符 串 时 ， 它 
返回 的 匹配 字符 串 的 前 端 和 后 端 都 有 空格 ， 这 并 不 是 我 们 想 要 的 。 因 此 
我 们 使 用 单词 的 边界 \b 来 代 蔡 真正 的 空格 符 \s 进 行政 配 (或 定位 )。 这 
样 正则 表达 式 就 写成 了 人 bJava\bb/。 元 素 \B 将 把 匹配 的 销 点 定位 在 不 是 单 
词 的 边界 之 处 。 因 此 ， 正 则 表达 式 AB[Ssjcript/ 
与 "JavaScript" 和 "postscript" 史 配 ， 但 不 与 "Script 和 "Scripting" 匹 配 。 


任意 正则 表达 式 都 可 以 作为 销 点 条 件 。 如 果 在 符号 “(?=” 和 ?)" 之 间 
加 入 一 个 表达 式 ， 它 就 是 一 个 先行 断言 ， 用 以 说 明 圆 括号 内 的 表达 式 必 
须 正 确 匹 配 印 ， 但 并 不 是 真正 意义 上 的 匹配 。 比 如 ， 要 匹配 一 种 常用 的 
程序 设计 语言 的 名 字 ， 但 只 在 其 后 有 冒号 时 才 匹 配 ， 可 以 使 
用 /DJj]ava([Ssjcripb?(?=\:)/。 这 个 正则 表达 式 可 以 匹配 "JavaScript:The 
Definitive Guide" 中 的 "JavaScript"， 但 是 不 能 匹配 "Java in a Nutshell" 中 
的 "Java"， 因 为 它 后 面 没 有 冒号 。 


带 有 “(?2 的 断言 是 负 回 先行 断言 ， 用 以 指定 接 下 来 的 字符 都 不 必 兄 
配 。 例 如 ，/Java(?!Scripb([A-ZNws*y/ 可 以 匹配 "Java" 后 跟随 一 个 大 写字 
母 和 任意 多 个 ASCII 单 词 ， 但 Java 后 面 不 能 跟随 "Script"。 它 可 以 匹 
配 "JavaBeans"， 但 不 能 匹配 "Javanese"; 它 可 以 匹配 "JavaScript"， 但 不 
能 匹配 "JavaScripter" 。 


表 10-5 总 结 了 正则 表达 式 中 的 销 。 












































表 10"5， 正则 表达 式 中 的 销 字 符 

字符 含义 

， 区 配 字 符 串 的 开头 ， 在 多 行 检索 中 ， 匹 配 一 行 的 开关 

$ 匹配 字符 串 的 结尾 ， 在 多 行 检索 中 ， 匹 配 一 行 的 结尾 

\b 匹配 一 个 单词 的 边界 ， 向 言 之 ， 就 是 位 于 字符 Ww 和 NM 之 间 的 位 置 ， 或 位 于 字符 W 
和 字符 串 的 开头 或 者 结尾 之 间 的 位 置 〈 但 需要 注意 ，[\b] 匹 配 的 是 退 格 符 ) 

\B 匹配 非 单词 边界 的 位 置 

(?=p) 和 零 宽 正门 先行 断言 ， 要 求 接 下 来 的 字符 都 与 p 匹 配 ， 但 不 能 包括 匹配 5 的 那些 字符 

(?1p) 和 零 宽 负 四 先行 断言 ， 要 求 接 下 来 的 字符 不 与 p 匹 配 


10.1.6 ”修饰 符 


正则 表达 式 中 的 语法 还 有 最 后 一 个 知识 点 ， 即 正则 表达 式 的 修饰 
符 ， 用 以 说 明 高 级 匹配 模式 的 规则 。 和 之 前 讨论 的 正则 表达 式 语 法 不 
同 ， 修 饰 符 是 放 在 “符号 之 外 的 ， 也 就 是 说 ， 它 们 不 是 出 现在 两 条 斜 线 
之 间 ， 而 是 第 二 条 斜 线 之 后 。JavaScript 支 持 三 个 修饰 符 ， 修 饰 符 "i" 用 
以 说 明 模 式 匹 配 是 不 区 分 大 小 写 的 。 修 饰 符 "g" 说 明 模式 匹配 应 该 是 全 
局 的 ， 也 束 是 说 ， 应 该 找 出 被 检索 字符 串 中 所 有 的 匹配 。 修 饰 符 "'m" 用 
以 在 多 行 模式 中 执行 匹配 ， 在 这 种 模式 下 ， 如 采 符 检索 的 字符 串 包 含 多 
行 ， 那 么 和 ^ 和 $ 销 字符 除了 [匹配 整个 字符 串 的 开始 和 结尾 之 外 ， 还 能 匹配 
每 行 的 开始 和 结尾 。 比 如 正则 表达 式 /iava$iim 可 以 匹配 "java" 也 可 以 匹 


配 "JavaNis fun"。 


这 些 修饰 符 可 以 任意 组 合 ， 比 如 ， 要 想 不 区 分 大 小 写 匹配 字符 串 中 
的 第 一 个 单词 "java" ("Java" 或 "JAVA" 等 ) ， 可 以 使 用 不 区 分 大 小 写 的 
修饰 符 来 定义 正则 表达 式 Abjava\b/i。 要 想 匹 配 字符 串 中 所 有 的 单词 ， 则 
需要 添加 修饰 符 g: Abjavab/gi。 


表 10-6 对 正则 表达 式 的 修饰 符 做 了 总 结 ， 注 意 ， 在 本 章 的 后 续 内 容 
中 还 会 介绍 在 String 和 RegExp 的 方法 中 使 用 修饰 符 g 的 示例 。 








表 10-6， 正则 表达 式 修饰 符 

字符 含义 

i 执行 不 区 分 大 小 写 的 匹配 

g 执行 一 个 多 局 匹配 ， 向 言 之 ， 即 找到 所 有 的 匹 瑟 ， 而 不 是 在 找到 第 一 个 之 后 就 停止 
Wm 多 行 匹配 模式 ，^ 匹 配 一 行 的 开头 和 字符 串 的 开头 ，$ 匹 配 行 的 结束 和 字符 串 的 结束 


10.2 ”用 于 模式 匹配 的 String 方 法 


到 目前 为 止 ， 尽管 本 章 已 经 讨论 过 创建 正则 表达 式 的 语法 ， 但 还 没 
有 尝试 过 如 何在 JavaScript 代 人 码 中 使 用 这 些 正则 表达 式 。 本 市 将 讨论 
String 对 象 的 一 些 用 以 执行 正则 表达 式 模 式 匹 配 和 检索 蔡 换 操作 的 方 
法 ， 后 续 几 节 还 会 继续 讨论 如 何 使 用 JavaScript 正 则 表达 式 的 模式 匹配 ， 
不 过 将 侧重 于 RegExp 对 象 和 它 的 方法 及 属性 。 注 意 ， 下 面 的 讨论 只 是 
与 正则 表达 式 相 关 的 方法 和 属性 的 概述 。 同 样 ， 可 以 在 本 书 第 三 部 分 中 
查找 到 完整 的 介绍 。 


String 支 持 4 种 使 用 正则 表达 式 的 方法 。 最 简单 的 是 search()。 它 的 参 
数 是 一 个 正则 表达 式 ， 返 回 第 一 个 与 之 匹配 的 子 串 的 起 始 位 置 ， 如 果 找 
不 到 匹配 的 子囊， 它 将 返回 -1。 比 如 ， 下 面 的 调用 返回 值 为 4: 


"Javascript".search(/script/i); 


如 果 searchO 的 参数 不 是 正则 表达 式 ， 则 首先 会 通过 RegExp 构 造 函 
数 将 它 转换 成 正则 表达 式 ，search() 方 法 不 支持 全 局 检索 ， 因 为 它 忽略 
正则 表达 式 参 数 中 的 修饰 符 g。 


replace() 方 法 用 以 执行 检索 与 蔡 换 操作 。 其 中 第 一 个 参数 是 一 个 正 
则 表达 式 ， 第 二 个 参数 是 要 进行 蔡 换 的 字符 串 。 这 个 方法 会 对 调用 它 的 
字符 串 进 行 检索 ， 使 用 指定 的 模式 来 匹配 。 如 果 正 则 表达 式 中 设置 了 修 
饰 符 g， 那 么 源 字 符 串 中 所 有 与 模式 匹配 的 子囊 都 将 蔡 换 成 第 二 个 参数 
指定 的 字符 串 ; 如 果 不 带 修饰 符 g， 则 只 蔡 换 所 匹配 的 第 一 个 子 串 。 如 
果 replace() 的 第 一 个 参数 是 字符 串 而 不 是 正则 表达 式 ， 则 replace() 将 直接 





搜索 这 个 字符 串 ， 而 不 是 像 search() 一 样 首 先 通 过 RegExp() 将 它 转 换 为 正 
则 表达 式 。 比 如 ， 可 以 使 用 下 面 的 方法 ， 利 用 replace() 将 文本 中 的 所 有 
javascript〈 不 区 分 大 小 写 ) 统一 蔡 换 为 "JavaScript": 


// 将 所 有 不 区 分 大 小 写 的 javascript 都 替换 成 大 小 写 正 确 的 JavaScript 
text.replace(/javascript/gi,"Javascript"); 




















但 replace() 的 功能 远 不 止 这 些 。 回 忆 一 下 前 文 所 提 到 的 ， 正 则 表达 
式 中 使 用 圆 括 写 括 起 来 的 子 表 达 式 是 高 有 从 左 到 右 的 索引 编写 的 ， 而 且 
正则 表达 式 会 记忆 与 每 个 子 表达 式 罗 配 的 文本 。 如 果 在 丛 换 字符 串 中 出 
现 了 $ 加 数字 ， 那 么 replace() 将 用 与 指定 的 子 表 达 式 相 匹 配 的 文本 来 蔡 换 
这 两 个 字符 。 这 是 一 个 非常 有 用 的 特性 。 比 如 ， 可 以 用 它 将 一 个 字符 哩 
中 的 贡 文 引号 答 换 为 中 广 半 用 引 写 : 



































// 一 段 引用 文本 起 始 于 引号 ， 结 束 于 引号 

// 中 间 的 内 容 区 域 不 能 包含 引号 

var quote=/"([^"]*)"/g;// 用 中 文 半角 引号 蔡 换 英文 引号 ， 同 时 要 保持 引号 之 间 的 内 容 〈 存 储 在 $1 中 ) 
没有 被 修改 

text, replace(quote，“$1”' ) ， 












































replace() 方 法 还 有 一 些 其 他 重要 特性 ， 这 些 特性 将 在 本 书 第 三 部 分 
天 于 String.replace() 的 主题 页 中 进行 介绍 。 最 值得 注意 的 是 ，replace() 方 
法 的 第 二 个 参数 可 以 是 函数 ， 该 函数 能 够 动态 地 计算 蔡 换 字 符 串 。 


match() 方 法 是 最 常用 的 String 正 则 表达 式 方法 。 它 的 唯一 参数 束 是 
一 个 正则 表达 式 (或 通过 RegExp0 〇 构造 函数 将 其 转换 为 正则 表达 式 》， 
返回 的 是 一 个 由 匹配 结果 组 成 的 数组 。 如 果 该 正则 表达 式 设置 了 修饰 符 
g， 则 该 方法 返回 的 数组 包含 字符 串 中 的 所 有 匹配 结果 。 例 如 : 














"1 plus 2 equals 3".match(A/\d+/g)// 返 回 ["1","2","3"] 








如 果 这 个 正则 表达 式 没有 设置 修饰 符 g，match() 就 不 会 进行 全 局 检 
索 ， 它 只 检索 第 一 个 匹配 。 但 即使 match0 执 行 的 不 是 全 局 检索 ， 它 也 返 
回 一 个 数组 。 在 这 种 情况 下 ， 数 组 的 第 一 个 元 素 就 是 匹配 的 字符 串 ， 余 
下 的 元 素 则 是 正则 表达 式 中 用 圆 括 号 括 起 来 的 子 表达 式 。 因 此 ， 如 果 
match() 返 回 一 个 数组 a， 那 么 a[0] 存 放 的 是 完整 的 匹配 ，a[1] 存 放 的 则 是 
与 第 一 个 用 圆 括号 括 起 来 的 表达 式 相 匹配 的 子 串 ， 以 此 类 推 。 为 了 和 方 




















法 replace0O 保 持 一 致 ，a[n] 存 放 的 是 $ 的 内 容 。 
例如 ， 使 用 如 下 的 代码 来 解析 一 个 URL: 





Var url=/(\w+):\/\/([\Ww.]+)\/(\S*)/; 

Var text="Visit my blog at http://www.example.com/~david"; 
Var result=text.match(ur]l); 

if(result!=null1){ 

var fullurl=result[0];// 包 含 "http://www.example.com/~david" 
var protocol=result[1];// 包 含 "http" 

var host=result[2];// 包 含 "www.example.com" 

var path=result[3];// 包 含 "~david" 


} 














值得 注意 的 是 ， 给 字符 串 的 match() 方 法 传 入 一 个 非 全 局 的 正则 表达 
式 ， 实 际 上 和 给 这 个 正则 表达 式 的 exec() 方 法 传 入 的 字符 串 是 一 模 一 样 
的 ， 它 返回 的 数组 带 有 两 个 属性 : index 和 input， 接 下 来 对 exec() 方 法 的 
讨论 中 会 提 到 ; 


String 对 象 的 最 后 一 个 和 正则 表达 式 相 关 的 方法 是 split()。 这 个 方法 
用 以 将 调用 它 的 字符 串 拆 分 为 一 个 子 串 组 成 的 数组 ， 使 用 的 分 隔 符 是 
split() 的 参数 ， 例 如 : 














"123,456, 789" ,split(",");// 返 回 ["123","456", "789"] 














split0) 方 法 的 参数 也 可 以 是 一 个 正则 表达 式 ， 这 使 得 split() 方 法 异常 
强大 。 例 如 ， 可 以 指定 分 隔 符 ， 允 许 两 边 可 以 留 有 任意 多 的 空白 符 : 




















“和 2 3,4, 57 .Split(/\s*, \s*/);// 返 口 [Ls 2 we a "5"] 





split() 方 法 还 有 其 他 一 些 特性 ， 本 书 第 三 部 分 有 关于 String.split0 更 
详尽 的 说 明 。 


10.3 ”RegExp 对 象 
正如 本 章 开始 所 讲 到 的 ， 正 则 表达 式 是 通过 RegExp 对 象 来 表示 


的 。 除 了 RegExp0 构 造 函数 之 外 ，RegExp 对 象 还 文 持 三 个 方法 和 一 些 属 
性 。 接 下 来 的 两 节 会 对 RegExp 模 式 匹 配方 法 和 属性 展开 讲述 。 


RegExp() 构 造 函 数 市 有 两 个 字符 串 参 数 ， 其 中 第 二 个 参数 是 可 选 
的 ，RegExpO 用 以 创建 新 的 RegExp 对 象 。 第 一 个 参数 包含 正则 表达 式 的 
主体 部 分 ， 也 就 是 正则 表达 式 直 接 量 中 两 条 和 斜 线 之 间 的 文本 。 需 要 注意 
的 是 ， 不 论 是 字符 串 下 接 量 还 是 正则 表达 式 ， 痢 使 用 “字符 作为 转 义 字 
符 的 前 级 ， 因 此 当 给 RegExp() 传 入 一 个 字符 串 表 述 的 正则 表达 式 时 ， 必 
须 将 “”* 蔡 换 成 “A”"。RegExp() 的 第 二 个 参数 是 可 选 的 ， 如 果 提 供 第 二 个 
参数 ， 它 束 指 定 正则 表达 式 的 修饰 符 。 不 过 只 能 传 入 修饰 符 g、i、m 或 
者 它们 的 组 合 。 比 如 : 



































// 全 局 匹配 字符 串 中 的 5 个 数字 ， 注 意 这 里 使 用 了 "\\"， 而 不 是 "\" 
var zipcode=new RegExp("\\d{5}","g"); 
































RegExp() 构 造 函 数 非常 有 用 ， 特 别 是 在 需要 动态 创建 正则 表达 式 的 
时 候 ， 这 种 情况 往往 没 办 法 通过 写 死 在 代码 中 的 正则 表达 式 直 接 量 来 实 
现 。 例 如 ， 如 果 等 检索 的 字符 串 是 由 用 户 输入 的 ， 就 必须 使 用 RegExp() 
构造 函数 ， 在 程序 运行 时 创建 正则 表达 式 叶 。 


10.3.1 RegExp 的 属性 


每 个 RegExp 对 象 都 包含 5 个 属性 。 属 性 source 是 一 个 只 读 的 字符 
串 ， 包 含 正则 表达 式 的 文本 。 属 性 global 是 一 个 只 读 的 布尔 值 ， 用 以 说 
明 这 个 正则 表达 式 是 否 市 有 修饰 从 g。 属 性 jgnoreCase 也 是 一 个 只 读 的 布 
尔 值 ， 用 以 说 明正 则 表达 式 是 否 带 有 修饰 符 i。 属 性 multiline 是 一 个 只 读 
的 布尔 值 ， 用 以 说 明正 则 表达 式 是 否 带 有 修饰 符 m。 最 后 一 个 属性 
lastIndex， 它 是 一 个 可 读 / 写 的 整数 。 如 果 [ 匹 配 模式 带 有 g 修 饰 符 ， 这 个 
属性 存储 在 整个 字符 串 中 下 一 次 检索 的 开始 位 置 ， 这 个 属性 会 被 exec() 
和 test() 方 法 用 到 ， 下 面 会 讲 到 。 


10.3.2 ”RegExp 的 方法 


RegExp 对 象 定义 了 两 个 用 于 执行 模式 匹配 操作 的 方法 。 它 们 的 行 
为 和 上 文 介绍 过 的 String 方 法 很 类 似 。RegExp 最 主要 的 执行 模式 匹配 的 
方法 是 exec0， 它 与 10.2 节 介绍 过 的 String 方 法 matchO0 相 似 ， 只 是 RegExp 
方法 的 参数 是 一 个 字符 串 ， 而 String 方 法 的 参数 是 一 个 RegExp 对 象 。 
exec() 方 法 对 一 个 指定 的 字符 串 执行 一 个 正则 表达 式 ， 简 言 之 ， 就 是 在 
一 个 字符 串 中 执行 匹配 检索 。 如 果 它 没有 找到 任何 匹配 ， 它 就 返回 
null， 但 如 果 它 找到 了 一 个 匹配 ， 它 将 返回 一 个 数组 ， 就 像 match() 方 法 








为 非 全 局 检索 返回 的 数组 一 样 。 这 个 数组 的 第 一 个 元 素 包含 的 是 与 正则 
表达 式 相 匹配 的 字符 串 ， 余 下 的 元 素 是 与 圆 括号 内 的 子 表达 式 相 匹配 的 
子 串 。 属 性 mndex 包 含 了 发 生 匹配 的 字符 位 置 ， 属 性 input 引 用 的 是 正在 
检索 的 字符 串 。 


和 match(0 方 法 不 同 ， 不 管 正则 表达 式 是 否 具有 全 局 修饰 符 g，exec0) 
都 会 返回 一 样 的 数组 。 回 忆 一 下 ， 当 match() 的 参数 是 一 个 全 局 正则 表达 
式 时 ， 它 返回 由 匹配 结果 组 成 的 数组 。 相 比 之 下 ，e xe c0 总 是 返回 一 个 
匹配 结果 ， 并 提供 关于 本 次 匹配 的 完整 信息 。 当 调用 exec(0 的 正则 表达 
式 对 象 具有 修饰 符 g 时 ， 它 将 把 当前 正则 表达 式 对 象 的 lastIndex 属 性 设置 
为 紧 挨 着 匹配 子 串 的 字符 位 置 。 当 同一 个 正则 表达 式 第 二 次 调用 exe c0O 
时 ， 它 将 从 lastIndex 属 性 所 指示 的 字符 处 开始 检索 。 如 果 exec0 没 有 发 现 
任何 匹配 结果 ， 它 会 将 lastIndex 重 置 为 0〈 在 任何 时 候 都 可 以 将 lastIndex 
属性 设置 为 0， 每 当 在 字符 串 中 找 最 后 一 个 匹配 项 后 ， 在 使 用 这 个 
RegExp 对 象 开始 新 的 字符 串 查 找 之 前 ， 都 应 当 将 lastIndex 设 置 为 0) 。 
J nt 以 在 用 正则 表达 式 匹 配 字 符 串 的 过 程 中 反复 调 

exXec()， 0D: 




















var pattern=/Java/g,; 
var text="JavaScript is more fun than Java!"; 
Var result,; 
while( (result= patterm: ep te =nNUl11){ 
alert( 'Matched'"+result[0]+"" 

"at position"+result.index+ 

";next Search begins at"+pattern.lastIindex); 


} 


男 外 一 个 RegExp 方 法 是 test()， 它 比 exec0) 更 简单 一 些 。 它 的 参数 是 
一 个 字符 串 ， 人 如 果 包 含 正则 表达 式 的 一 
个 匹配 结果 ， 则 返回 true: 


var pattern=/java/i,; 
pattern.test("JavaSscript");// 返 回 true 














调用 test() 和 调用 exec() 等 价 ， 当 exec() 的 返回 结果 不 是 null 时 ，test() 
返回 true。 由 于 这 种 等 价 性 ， 当 一 个 全 局 正则 表达 式 调用 方法 testO 时 ， 
它 的 行为 和 exec() 相 同 ， 因 为 它 从 lastIndex 指 定 的 位 置 处 开始 检索 某 个 字 
符 串 ， 如 果 它 找到 了 一 个 匹配 结果 ， 那 么 它 就 立即 设置 lastIndex 为 当前 
匹配 子 串 的 结束 位 置 。 这 样 一 来 ， 束 可 以 使 用 test(0) 来 壳 历 字符 串 ， 就 像 


用 exec(0) 方 法 一 样 。 


与 exec() 和 test() 不 同 ，String 方 法 search()、replace() 和 match() 并 不 会 
用 到 lastIndex 属 性 。 实 际 上 ，String 方 法 只 是 简单 地 将 lastIndex 属 性 值 重 
置 为 0。 如 果 让 一 个 带 有 修饰 人 符 g 的 正则 表达 式 对 多 个 字符 串 执行 exec() 
或 test()， 要 么 在 每 个 字符 串 中 找 出 所 有 的 思 配 以 便 将 lastIndex 自 动 重 置 
为 零 ， 要 么 显 式 将 lastIndex 手 动 设置 为 0( 当 最 后 一 次 检索 失败 时 需要 手 
动 设置 lastIndex) 。 如 果 忘 了 手动 设置 lastIndex 的 值 ， 那 么 下 一 次 对 新 
字符 串 进 行 检 索 时 ， 执 行 检索 的 起 始 位 置 可 能 就 不 是 字符 串 的 开始 位 
置 ， 而 可 能 是 任意 位 置 站 。 当 然 ， 如 果 RegExp 不 带 有 修饰 符 g， 则 不 必 
担心 会 发 生 这 种 情况 。 同 样 要 记 住 ， 在 ECMAScript 5 中 ， 正 则 表达 式 直 
接 量 的 每 次 计算 都 会 创建 一 个 新 的 RegExp 对 象 ， 每 个 新 RegExp 对 象 具 
有 各 自 的 lastIndex 属 性 ， 这 势必 会 大 大 减少 “残留 ”lastIndex 对 程序 造成 
的 意外 影 啊 。 


[有 一 些 Perl 正 则 表达 式 语法 特性 并 不 被 ECMAScript 支 持 ， 这 些 特性 包 
括 : s (单行 模式 ) 和 x (扩展 语法 ) 标记 ; \a、\e、\、\u、\L、\U、 
YE、\Q、\A、\、 和 \G 转 义 字 符 ;“(? 达 =” 正 向 后 行 断 言 和 “(3 过 1* 负 癌 
后 行 断言 ;“(?#” 注 释 和 扩展 “(?” 的 语法 。 

[2] 作 者 在 这 里 揭示 了 一 种 非常 容易 忽略 的 情况 ， 比 如 ， 这 段 代 码 在 
Firefox 3.6 和 Firefox 4+ 中 的 运行 结果 不 一 致 : 

function getRE(){ 

Var Te=/[a-Z]/; 

re.foo="bar ; 

return re; 














} 

Var reg=getRE(), 

re2=getRE(); 

console.log(reg===re2);// 在 Firefox ”3.6 中 返回 true， 在 Firefox 4+ 中 返回 
false 

reg.foo="baz"; 

console.log(re2.foo);// 在 Firefox 3.6 中 返回 "baz"， 在 Firefox 4+ 中 返回 "bar" 
原因 可 以 在 ECMAScript 5 规范 第 24 页 和 第 247 页 找到 ， 也 就 是 说 在 
ECMAScript 3 规范 中 ， 用 正则 表达 式 创 建 的 RegExp 对 象 会 共享 同一 个 
实例 ， 而 在 ECMAScript 5 中 则 是 两 个 独立 的 实例 。 而 最 新 的 Firefox 4、 

Chrome 和 Safari 5 都 遵循 ECMAScript 5 标准 ， 以 至 于 正 6 一 下 8 都 没有 很 
好 地 遵循 ECMAScript 3 标准 ， 不 过 在 这 个 问题 上 反而 处 理 对 了 。 很 明显 


ECMAScript 5 的 规范 更 符合 开发 者 的 期 望 。 
[31Cyrillic 字 符 是 一 种 斯 拉夫 语 字 母 ， 请 参照 : 
http://en.wikipedia.org/wiki/Cyrillic_alphabet。 

[4 除了 在 字符 类 ( 方 插 号) 中 ，\b 匹 配 退 格 符 。 

[5] 原 书 此 处 有 误 ,， “(3=” 和 “)” 之 间 的 表达 式 只 用 于 指定 一 个 位 置 ， 它 是 
零 宽 的 ， 这 里 提 到 的 “断言 ?通常 也 称 为 “ 零 宽 断言 。 

[6] 其 实 通过 eval0 也 可 以 实现 运行 时 动态 创建 正则 表达 式 ， 但 不 推荐 使 
用 eval0。 

[7 这 里 所 说 的 任意 位 置 实际 上 是 由 lastIndex 的 值 决定 的 ， 如 果 lastIndex 
a 必定 会 对 新 开始 的 正则 表达 式 匹 配 检索 造成 不 确定 的 影 
Hg] 。 








第 11 章 ” JavaScript 的 子 集 和 扩展 


到 目前 为 止 ， 本 书 参 照 ECMAScript 3 和 ECMAScript 5 中 的 标准 规范 
完整 地 讨论 了 JavaScript 这 门 官 方 语言 。 从 现在 起 ， 本 章 将 开始 讨论 
JavaScript 的 子 集 和 超 集 。 其 中 子 集 的 定义 大 部 分 都 是 出 于 安全 考虑 ， 只 
有 使 用 这 门 语言 的 一 个 安全 的 子 集 编写 脚本 ， 才 能 让 代码 执行 得 更 安 
全 、 更 稳定 ， 比 如 如 何 更 安全 地 执行 一 段 由 不 可 信 第 三 方 提供 的 广告 代 
人 码 。11.1 节 会 对 这 个 子 集 做 简要 介绍 。 


ECMAScript 3 标准 是 1999 年 颁布 的 ， 十 年 后 ， 也 就 是 2009 年 才 更 新 
到 了 ECMAScript 5。JavaScript 的 作者 Brendan Eich 在 这 十 年 间 不 断 地 改 
进 这 门 语言 (ECMAScript 标 准 规范 是 允许 对 其 做 任何 扩充 的 ) ， 同 
时 ， 伴 随 着 Mozilla 项 目的 推进 ， 在 Firefox 1.0、1.5、2、3 和 3.5 版 本 中 分 
别 发 布 了 JavaScript 1.5、1.6、1.7、1.8 和 1.8.1 版 本 。 这 些 JavaScript 的 扩 
展 版 本 中 的 很 多 新 特性 已 经 融入 到 ECMAScript 5 中 ， 还 有 很 多 特性 依然 
I 但 这 些 特性 将 有 很 大 一 部 分 会 融入 到 ECMAScript 的 将 来 
反 本 中 。 


由 于 Firefox 是 基于 一 个 名 叫 Spidermonkey 的 JavaScript 引 擎 出 ， 因 此 
Firefox 浏 览 器 也 可 以 文 持 这 些 扩展 特性 。 由 Mozilla 开 发 的 另 一 个 基于 
Java 的 JavaScript 引 擎 Rhino〈 见 12.1 节 ) 也 文 持 大 部 分 扩展 特性 。 但 由 于 
这 些 语言 特性 是 非 标 准 的 ， 本 章 内 容 对 于 那些 需要 调试 浏览 器 兼容 性 的 
ee 我 们 在 本 章 对 它们 作 必 要 的 讲述 是 基于 几 点 


:它们 的 确 很 强大 。 
:它们 有 可 能 在 未 来 成 为 标准 。 
:它们 可 用 来 写 Firefox 扩 展 插件 。 


:它们 可 用 在 服务 器 端的 JavaScript 编 程 ， 只 要 运行 环境 是 基于 
Spidermonkey 或 者 Rhino 的 JavaScript 引 擎 即 可 己 。 


在 简单 介绍 JavaScript 语 言 的 子 集 之 后 ， 本 章 后 面 会 开始 介绍 语言 的 


扩展 部 分 。 由 于 这 些 扩展 毕竟 不 是 标准 ， 因 此 这 里 只 是 一 个 指南 形式 的 
描述 ， 并 不 像 本 书 其 他 章节 那样 系统 完整 地 介绍 语言 特性 。 














11.1 _ JavaScript 的 子 集 


大 多 数 语言 都 会 定义 它们 的 子 集 ， 用 以 更 安全 地 执行 不 可 信 的 第 三 
方 代码 。 这 里 有 一 个 很 有 趣 的 子 集 ， 定 义 这 个 子 集 的 原因 有 些 特殊 。 我 
们 首先 来 看 这 个 有 趣 的 子 集 ， 然 后 再 讨论 安全 的 语言 子 集 。 


11.1.1 精华 


Douglas ”Crockford 曾 经 写 过 一 本 很 注 的 书 《JavaScript:The Good 
Parts》 (O'Reilly 出 版 社 ) ， 专 门 介绍 JavaScript 中 值得 发 扬 光 大 的 精华 
部 分 。 这 个 语言 子 集 的 目标 是 简化 这 门 语言 ， 规 避 掉 语言 中 的 怪 辛 、 馈 
陷 部 分 ， 最 终 使 编程 更 轻松 、 程 序 更 健壮 。Douglas Crockford 是 这 样 介 
绍 它 的 动机 的 : 


大 多 数 编 程 语言 部 有 精华 部 分 和 鸡肋 部 分 ， 我 发 现 如 果 只 使 用 精华 
部 分 而 避免 使 用 鸡肋 部 分 ， 我 可 以 成 为 一 名 更 好 的 程序 员 。 


Crockford 提 人 炼 出 的 子 集 部 分 不 包含 with 和 continue 语 句 以 及 eval0 孔 
数 。 他 提倡 使 用 函数 定义 表达 式 而 不 是 函数 定义 语句 来 定义 函数 。 该 子 
集 要 求 : 循环 体 和 条 件 分 文 都 使 用 花 括 号 括 起 来 ， 它 不 允许 在 循环 体 和 
条 件 分 文中 只 包含 一 条 语句 时 省 略 花 括号 ， 任 何 语句 只 要 不 是 以 花 括 号 
结束 都 应 当 使 用 分 号 做 结尾 。 


这 个 子 集中 并 未 包含 去 号 运算 符 、 位 运算 符 以 及 c++ 和 “--”。 也 不 
含 c==* 和 “=-”， 因 为 用 这 两 个 运算 符 进 行 比较 时 会 涉及 类 型 转换 ， 这 














由 于 JavaScript 并 不 包含 块 级 作用 域 ，Crockford 为 我 们 提 炬 出 的 子 
集 部 分 对 var 语 句 做 了 限制 ，var 语 句 只 能 出 现在 函数 体 的 顶部 ， 并 要 求 
程序 员 将 函数 内 所 有 的 变量 声明 写 在 一 条 单独 的 var 语 句 中 ， 作 为 函数 
体 的 第 一 条 语句 。 在 子 集中 禁止 使 用 全 局 变量 ， 但 这 个 限制 只 是 编程 约 
定 ， 并 不 是 真正 的 语言 上 的 限制 。 


Crockford 写 过 一 个 在 线 代码 质量 检测 工具 JSLint， 可 以 通过 
http:Vjslint.com 访 问 这 个 工具 。 这 个 工具 提供 了 很 多 选项 用 来 增强 代码 
的 一 致 性 检查 。 除 了 能 确保 代码 使 用 了 子 集 推荐 的 特性 之 外 ，JSLint 工 
有 具 还 对 编码 风格 做 了 一 些 强 制约 定 ， 比 如 合理 的 缩 进 等 。 

















Crockford 的 那 本 书 出 版 时 ，ECMAScript 5 的 严格 模式 还 没有 出 来 ， 
然而 Crockford 所 提取 出 的 JavaScript“ 鸡 肋 部 分 ”中 有 很 大 一 部 分 在 严格 模 
式 中 同样 做 了 限制 。 随 着 ECMAScript 5 标准 的 广泛 采用 ，JSLint 工 具 要 
求 在 选中 "The Good Parts" 选 项 时 程序 中 必须 包含 一 条 "use strict" 指 令 。 


11,1.2 子 集 的 安全 性 


利用 “精华 部 分 ?的 一 个 语言 子 集 可 以 设计 出 更 具 业 感 的 程序 并 提升 
程序 员 的 开发 效率 。 这 里 将 要 讨论 的 是 一 个 更 大 的 子 集 ， 这 个 大 子 集 的 
设计 目的 是 能 在 一 个 容器 或 “ 沙 箱 ?中 更 安全 地 运行 不 可 信 的 第 三 方 
JavaScript 人 代码。 所 有 能 破坏 这 个 沙 箱 并 影响 全 局 执行 环境 的 语言 特性 和 
API 在 这 个 安全 子 集中 都 是 禁止 的 。 每 个 子 集 都 带 有 一 个 静态 的 检查 
荐 ， 可 以 对 代码 进行 解析 检查 以 确保 代码 是 符合 子 集 规 范 的 。 由 于 这 个 
检查 器 的 检验 规则 比较 严格 ， 因 此 有 一 些 沙 箱 系统 定义 了 范围 更 广 、 校 
验 更 松散 的 子 集 ， 并 增加 了 一 个 代码 转换 的 步骤 ， 用 以 将 针对 更 大 子 集 
的 代码 检验 转换 为 针对 更 小 子 集 的 代码 检验 ， 同 时 在 对 代码 的 静态 分 析 
不 能 确保 代码 安全 性 的 情况 下 增加 了 运行 时 的 检查 。 


为 了 让 JavaScript 代 码 静 态 地 通过 安全 检查 ， 必 须 移 除 一 些 
JavaScript 特 性 : 


eval0 和 Function0 构 造 函数 在 任何 安全 子 集 里 都 是 禁止 使 用 的 ， 
为 它们 可 以 执行 任意 代码 ， 而 且 JavaScript 无 法 对 这 些 代 码 做 静态 分 析 。 


禁止 使 用 this 关 键 字 ， 因 为 函数 〈 在 非 严格 模式 中 ) 可 以 通过 this 
访问 全 局 对 象 。 而 沙 箱 系统 的 一 个 重要 目的 就 是 阻止 对 全 局 对 象 的 访 
问 。 


禁止 使 用 with 语 句 ， 因 为 with 语 句 增加 了 静态 代码 检查 的 难度 。 


:禁止 使 用 某 些 全 局 变量 。 在 客户 端 JavaScript 中 ， 浏 览 器 窗口 对 象 
可 以 当做 全 局 对 象 ， 但 也 具有 双重 身份 名， 因此 代码 中 不 能 有 对 window 
对 象 的 引用 。 同 样 地 ， 客 户 端 document 对 象 定义 了 可 以 用 来 操控 整个 页 
面 内 容 的 方法 。 将 对 document 的 控制 权 交 给 一 段 不 受信 任 的 代码 会 有 很 
多 隐患 。 安 全 子 集 提 供 了 两 种 不 同 的 方法 来 处 理 类 似 document 这 类 全 局 
对 象 。 第 一 种 方法 是 ， 沙 箱 完 全 禁 挥 它们 ， 并 定义 一 组 上 自 定义 API 用 以 
对 分 配给 它 的 Web 页 面 做 有 限制 的 访问 。 第 三 种 方法 ， 在 沙 箱 代 码 所 运 
行 的 “容器 ”内 定义 一 个 只 对 外 提供 安全 的 标准 DOM API 的 “外 观 面 


























板 ”(facade) 或 “document 代 理 对 象 ”(proxy) 乌 。 


:禁止 使 用 某 些 属性 和 方法 ， 以 免 在 沙 箱 中 的 代码 拥有 过 多 的 权 
限 。 这 些 属性 和 方法 包括 arguments 对 象 的 两 个 属性 caller 和 callee (其 至 
在 某 些 子 集中 干脆 禁止 使 用 arguments 对 象 ) 、 函 数 的 cal0 和 apply0) 方 
法 ， 以 及 constructor 和 prototype 两 个 属性 。 非 标准 的 属性 也 被 禁止 挥 
了 ， 比 如 _proto”。 一 些 子 集 将 这 些 不 安全 的 属性 和 全 局 对 象 列 进 黑 名 
还 有 一 些 子 集 提供 了 白 名 单 ， 给 出 了 推荐 使 用 的 安全 的 属性 和 方 
0 


静态 分 析 可 以 有 效 地 防止 带 有 点 〈.〉 运算 符 的 属性 存 取 表达 式 去 
读 写 特殊 属性 。 但 使 用 方 括号 [] 来 访问 属性 则 与 此 不 同 ， 因 为 我 们 无 法 
对 方 括 写 内 的 字符 串 表 达 式 做 静态 分 析 。 基 于 这 个 原因 ， 安 全 子 集 遂 和 
茶 止 使 用 方 括号 ， 除 非 方 括号 内 是 一 个 数字 或 字符 串 直 接 量 。 安 全 子 集 
将 口 答 换 为 全 局 函数 ， 通 过 调用 全 局 函数 来 得 询 和 设置 对 象 属性 ， 这 些 
函数 会 执行 运行 时 检查 以 确保 它们 不 会 读 与 那些 茶 止 访问 的 属性 。 


有 一 些 限制 ， 比 如 禁止 使 用 eval0 和 with 语 句 ， 并 不 会 给 程序 员 禹 来 
额外 人 负担， 毕竟 这 些 特性 本 来 就 很 少 在 JavaScript 编 程 中 用 到 。 男 外 一 些 
限制 规划 ， 比 如 使 用 方 括号 对 属性 进行 存 取 的 限制 则 对 开发 造成 诸多 不 
便 ， 这 时 就 有 代码 转换 器 的 用 武之 地 了 。 比 如 ， 转 换 器 会 自动 将 使 用 方 
括号 的 代码 转换 为 函数 调用 的 代码 ， 以 便 能 够 对 它 执 行 运行 时 检查 。 有 
了 这 种 代码 转换 ， 可 以 安全 地 使 用 this 关 键 字 。 当 然 ， 沙 箱 代 码 的 运行 
时 安全 性 检查 和 执行 速度 之 间 是 一 对 矛盾 ， 这 里 的 代码 转换 只 是 一 种 权 
衡 后 的 折 中 方案 。 


有 一 些 安全 子 集 已 经 实现 了 ， 对 这 个 子 集 更 详尽 地 介绍 超出 了 本 书 
的 范围 ， 这 里 我 们 只 是 简要 地 介绍 一 些 比 较 重 要 的 实现 : 


ADsafe 


ADsafe (http://adsafe.org)〉 是 第 一 个 正式 提出 的 安全 子 集 。 它 的 提 
出 者 是 Douglas Crockford〈 他 也 定义 了 The Good Parts 子 集 ) 。ADsafe 只 
JI 含 静态 检查 ， 它 使 用 JSLint (http:Vjslintorg ) 作为 检验 器 。 这 个 工具 
禁止 访问 大 部 分 的 全 局 变量 ， 并 定义 了 一 个 ADSAFE 变 量 ， 它 提供 了 一 
组 可 以 安全 使 用 的 API， 包 括 一 些 特殊 的 DOM 方 法 。ADsafe 并 未 广泛 使 
0 
Do] 。 
































dojox.secure 


受 ADsafe 的 启发 ，Dojo 工 具 包 (http://dojotoolkit.org) 发 布 了 一 个 
名 为 dojox.secure 的 子 集 扩 展 馈 ) 。 和 ADsafe 一 样 ，dojox.secure 也 是 基于 
静态 检查 ， 静 态 检 查 受 限于 语言 子 集 范 围 内 。 但 它 和 ADsafe 义 不 尽 相 
同 ， 它 允许 使 用 标准 DOM API。 同 时 ， 它 包含 一 个 用 JavaScript 实 现 的 
i 因此 我 们 可 以 用 它 对 不 可 信 的 第 三 方 代码 执行 运行 时 前 的 动态 
以 朋 o 





Caja 


Caja 包 是 Google 发 布 的 开源 安全 子 集 。Caja 定 义 了 两 个 语言 子 集 。 
Cajita 〈“ 小 沙 盒 ”) 是 一 个 与 ADsafe 和 dojox.secure 类 似 的 严格 子 集 。 
Vvalija〈“ 手 提 箱 ?或 “行李 箱 ”) 则 是 一 个 范围 更 广 的 语言 子 集 ， 更 接近 
于 ECMAScript 5 的 严格 模式 〈 不 包含 eval0) 。Caja 本 身 也 是 一 个 编译 器 
的 名 字 ， 这 个 编译 器 可 以 将 一 段 网 页 内 容 (HTML、CSS 和 JavaScript 代 
码 ) 转换 为 一 个 安全 的 模块 ， 这 个 模块 可 以 放心 地 驻 留 在 页 面 中 而 不 会 
对 整个 页 面 或 页 面 上 的 其 他 模块 产生 影响 。 


Caja 是 OpenSocial API 的 一 部 分 (关于 OpenSocial API 的 更 多 内 容 请 
参照 : http:/Wcode.google.comyapis/opensocial/) 。 比 如 ， 在 门户 页 面 
http:/my.yahoo.com 中 就 可 以 看 到 ， 所 有 的 模块 都 遵照 Caja 规 范 。 


FBJS 





FBJS 是 JavaScript 语 言 的 变种 ， 这 种 语言 被 
Facebook (http://facebook.com) 玉 用 ， 用 以 在 用 户 个 人 资料 页 舱 入 不 可 
信 的 第 三 方 代码 。FBJS 依 赖 代码 转换 来 保证 代码 的 安全 性 ， 转 换 器 同样 
提供 运行 时 检查 ， 以 避免 通过 this 关 键 字 去 访问 全 局 对 象 ， 并 且 对 所 有 
的 顶层 标识 符 进 行 重 命名 ， 给 它们 增加 了 一 个 标识 模块 的 前 组， 正 是 因 
为 这 种 重 命 名 ， 任 何 对 全 局 变量 以 及 其 他 模块 的 成 员 变 量 的 设置 或 者 查 
询 操 作 都 无 法 正常 进行 了 。 此 外 ， 任 何 对 eval0 的 调用 也 会 因为 eval 函 数 
I FBJS 模 拟 实现 了 DOM “API 的 一 个 安全 子 





Microsoft Web Sandbox 


微软 的 Web Sandbox (http://websandbox.livelabs.com/) 定义 了 


JavaScript 的 一 个 更 宽泛 的 子 集 ， 包 含 HIML 和 CSS， 它 的 代码 重 写 规则 
非常 激进 ， 有 效 地 重新 实现 了 一 个 安全 的 JavaScript 虚 拟 机 ， 针 对 不 安全 
的 JavaScript 顶 层 代码 进行 处 理 。 


11.2 常量 和 局 部 变量 


对 语言 子 集 的 讨论 暂 告 一 段落 ， 下 面 开 始 讨论 语言 的 扩展 。 在 
JavaScript 1.5 及 后 续 版 本 中 可 以 使 用 const 关 键 字 来 定义 常量 。 nr. 
看 成 不 可 重复 赋值 的 变量 〈 对 第 量 重 新 赋值 会 失败 但 不 报错 ) ， 对 常 
的 重复 声明 会 报错 。 























const pi=3.14;// 定 义 一 个 常量 并 赋值 
pi=4; // 任 何 对 这 个 常量 的 重新 赋值 都 被 忽略 
const pi=4;// 重 新 声明 常量 会 报错 

var pi=4; // 这 里 也 会 报错 
































关键 字 const 和 关键 字 var 的 行为 非常 类 似 ， 由 于 JavaScript 中 没有 块 
级 作用 域 ， 因 此 和 常量 会 被 提前 至 函数 定义 的 顶部 〈 参 照 3.10.1 节 ) 。 


一 直 以 来 ，JavaScript 中 的 变量 缺少 块 级 作用 域 的 支持 被 普 裔 认为 是 
JavaScript 的 短 板 ，JavaScript 1.7 针 对 这 个 缺陷 增加 了 关键 字 let。 关 键 字 
const 一 直 都 是 JavaScript 的 保留 字 〈 没 有 使 用 ) ， 因 此 现 有 的 代码 不 必 
作 任 何 改动 就 可 以 增加 和 常量， 关键 字 let 并 不 是 保留 字 ，JavaScript 1.7 及 
以 后 的 版 本 才能 识别 ， 需 要 手动 加 入 版 本 号 才 可 以 。 


JavaScript 版 本 号 


本 章 所 有 提 到 JavaScript 版 本 写 的 地 方 ， 都 专 指 Mozilla 的 语言 版 
本 ， 在 Spidermonkey 和 Rhino 解 析 器 和 Firefox Web 浏 览 器 中 实现 了 这 些 
语言 版 本 


有 一 些 语言 的 扩展 定义 了 新 的 关键 字 〔 比 如 let) ， 为 了 让 现 有 代码 
不 破坏 原 有 结构 就 能 使 用 这 些 关 键 字 ， 则 需要 显 式 指明 新 的 语言 版 本 以 
便 使 用 新 版 本 的 语言 扩展 。 如 果 你 正在 使 用 Spidermonkey 或 Rhino 作 为 
单独 的 解析 器 ， 就 可 以 通过 命令 行 选项 指定 语言 版 本 ， 或 者 通过 调用 一 
个 内 置 函 数 version() 来 指定 版 本 ( 显 式 指定 的 版 本 号 是 实际 版 本 号 乘 以 
100 乌 的 数值 ， 要 想 激 活 JavaScript 1.7 版 本 则 需要 传 入 170 并 启用 let 关 键 
字 ) 。 在 Firefox 中 ， 则 可 以 在 script 标 签 中 指定 语言 的 扩展 版 本 ， 就 像 这 

















<script type="application/javascript;version=1.8"> 





关键 字 let 有 4 种 使 用 方式 : 

可 以 作为 变量 声明 ， 和 var 一 样 ; 

在 for 或 fovin 循 环 中 ， 作 为 var 的 蔡 代 方案 ; 

:在 语句 块 中 定义 一 个 新 变量 并 显 式 指定 它 的 作用 域 ; 


| 定义 “个 在 表达 式 内 部 作用 域 中 的 变量 ， 这 个 变量 只 ! 在 表达 式 内 
可 用 。 


使 用 let 最 简单 的 方式 就 是 批量 蔡 换 程序 中 的 var。 通 过 var 声 明 的 变 
量 在 函数 内 都 是 可 用 的 ， 而 通过 let 声 明 的 变量 则 只 属于 就 近 的 花 括 号 括 
起 来 的 语句 块 〈 当 然 包 括 它 所 藤 套 的 语句 块 ) 。 比 如 ， 如 有 果 在 循环 体内 
使 用 let 声 明 变 量 ， 那 么 这 个 变量 在 循环 体 之 外 是 不 可 用 的 ， 示 例 代码 如 
下 : 














function oddsums(n){ 

let total=0,result=[];// 在 函数 内 都 是 有 定义 的 
for(let x=1;x<==n;x++){//x 只 在 循环 体内 有 定义 
let odd=2*x-1;//odd 只 在 循环 体内 有 定义 
total+=odd; 

result .push(total); 

} 

// 这 里 使 用 x 或 odd 会 导致 一 个 引用 错误 

return result,; 































































































} 
oddsums(5);// 返 回 [1,4,9,16,25] 





我 们 注意 到 ， 在 这 上 段 代 码 中 let 还 蔡 代 了 for 循 坏 中 的 var。 这 时 通过 
let 创 建 的 变量 的 作用 域 仪 限于 循环 体 、 循 环 条 件 判 断 逻 辑 和 自 增 操作 表 
达 式 。 同 样 ， 可 以 这 样 在 fovi n (以 及 for each， 参 照 11.4.1 节 ) 循环 中 
使 用 let: 





0={X:1,y:2}; 

for(let p in o)console.1og(p);// 输 出 x 和 y 

for each(let v in oD oe. log(V);// 输 出 1 和 2 
console .log(p)// 引 用 错误 : p 没 有 定义 





























在 声明 语句 中 使 用 let 和 在 循环 初始 化 右 中 使 用 let， 两 者 有 着 有 趣 的 
区 别 。 对 于 前 者 来 说 ， 变 量 初始 化 表达 式 是 在 变量 的 作用 域内 计算 的 。 
但 对 于 后 者 来 说 ， 变 量 的 初始 化 表达 式 则 是 在 变量 的 作用 域 之 外 计算 
的 。 当 出 现 两 个 变量 同名 的 情况 时 需要 尤为 注意 : 








Jet x=1; 
for(let X=Xx+1;X<5;X++) 
console.1og(x);// 输 出 2 一 4 


























{ 

// 开 始 一 个 新 的 语句 块 ， 创建 新 的 变量 和 作用 域 
let x=x+1;//x 没 有 定义 ,因此 x+1 是 NaN 
console. 10g(x); // 输 出 NaN 

} 





















































通过 var 声 明 的 变量 在 它们 所 声明 的 函数 内 始终 是 存在 的 ， 但 直到 
代码 执行 到 var 语 句 时 才 初 始 化 变量 。 也 就 是 说 ， 变 量 是 存在 的 (不 会 
抛 出 引用 错误 异常 )， 但 在 var 语 句 执 行 之 前 它 的 值 是 undefined。 通 过 
let 声 明 变 量 的 情况 与 之 类 似 ， 如 果 在 let 语 句 之 前 使 用 这 个 变量 (与 let 语 
句 在 同一 个 块 作 用 域内 ) ， 变 量 是 存在 的 ， 但 值 是 undefined。 


再 要 注意 的 是 ， 在 用 let 声 明 循环 变量 时 这 个 问题 是 不 存在 的 ， 语 法 
上 有 是 不 允许 在 初始 化 之 前 就 使 用 这 个 变量 的 。 还 有 一 种 方法 可 以 在 let 声 
明 语 句 之 前 使 用 变量 时 避免 出 错 ， 就 是 在 一 条 单独 的 let 语 句 〈《 和 上 文 所 
示 的 let 声 明 ; 吾 句 不 同 ) 的 代码 块 中 既 包 含 一 组 变量 的 声明 也 包含 这 些 变 
量 的 初始 化 表达 式 。 语 句 里 的 变量 和 初始 化 表达 式 都 放 在 一 对 圆 括号 
内 ， 随 后 跟随 一 对 花 括号 括 起 来 的 在 句 块 : 














let x=1,y=2; 
let (x=x+1, y=x+2){// 注 意 这 里 的 写法 
console.1og(x+y);V/ 输 出 5 





























}; 
console.1og(x+y);V// 输 出 3 





let 语 句 中 的 变量 初始 化 表达 式 并 不 是 这 个 语句 块 的 一 部 分 ， 并 且 是 
在 作用 域外 部 解析 的 ， 理 解 这 一 点 至 关 重 要 。 在 这 段 代 码 中 ， 我 们 新 建 
了 一 个 新 的 变量 x 并 赋值 给 它 一 个 更 大 的 值 。 


let 关 键 字 的 最 后 一 种 用 法 是 let 语 句 块 的 一 个 变 体 ， 其 中 有 一 对 圆 括 
写 括 起 来 的 变量 列表 和 初始 化 表达 式 ， 紧 跟着 是 一 个 表达 式 而 不 古 一 个 





语句 块 。 我 们 把 这 种 写法 叫做 let 表 达 式 ， 上 面 的 代码 可 以 写成 这 样 : 





let x=1,y=2; 
console.1log(let (x=x+1,y=x+2)x+ty);// 输 出 5 








某 些 const 和 let 的 用 法 (不 必 是 这 里 描述 的 4 种 形式 ) 在 将 来 很 有 可 
能 被 纳入 ECMAScript 标 准 规范 中 。 


11.3 解构 赋值 


Spidermonkey 1.7 实 现 了 一 种 混合 式 赋值 ， 我 们 称 之 为 "解构 赋 
值 ”(destructuring assignment) 。 例 如 ， 你 可 能 在 Python 或 Ruby 中 接触 
过 这 个 概念 。 在 解构 赋值 中 ， 等 号 右 侧 是 一 个 数组 或 对 象 〈 一 个 结构 化 
的 值 ) ， 指 定 左 侧 一 个 或 多 个 变量 的 i 吾 法 和 右 侧 的 数组 和 对 象 直接 量 的 
语法 保持 格式 一 致 。 


当 发 生 解 构 赋 值 时 ， 右 侧 的 数组 和 对 象 中 一 个 或 多 个 的 值 就 会 被 提 
取出 来 〈 解 构 ) ， 并 赋值 给 左 侧 相应 的 变量 名 。 除 了 用 于 营 规 的 赋值 运 
算 符 之 外 ， 解构 赋值 还 用 于 初始 化 用 var 和 let 新 声明 的 变量 。 


当 和 数组 配合 使 用 时 解构 赋值 是 一 种 写法 简单 但 叉 极 其 强大 的 功 

， 特 别 是 在 函数 返回 一 组 结果 的 时 候 解 构 赋 值 就 显得 非常 有 用 。 然 而 
当 呈 全 对 芝 或 者 工友 对 象 起 使 用 时 ， 解 构 赋 值 变 得 更 加 复杂 且 容 易 摘 
混 。 下 面 的 例子 展示 了 简单 的 和 复杂 的 解构 赋值 : 


这 里 的 例子 是 简单 的 解构 赋值 ， 它 用 到 了 数组 : 














let[x,y]=[1,2]; // 等 价 于 let x=1, = 2 


Ex, y]=[y, x] ; /7 交换 两 个 变量 的 值 
console.1log([x,y]);// 输 出 [3,2] 











注意 ， 当 函数 返回 一 组 结果 时 ， 使 用 解构 赋值 将 大 大 简化 程序 代 
人 码 : 























// 将 [xy] 从 笛 卡 尔 〈 直 角 ) 坐标 转换 为 [r,theta] 极 坐标 
function polar(x,y)t{ 
return[Math.sqrt(x*x+y*y),Math.atan2(y,x)]; 




















// 将 极 坐标 转换 为 笛 卡 尔 坐标 
function cartesian(r,theta)t{ 
return[r*Math.cos(theta),r*Math.Sin(theta)]， 








} 
let[r,thetal]=polar(1.0,1.0);//r=Math.sqrt(2),theta=Math.PI/4 
let[x,y]=cartesian(r,theta);//x=1.0,y=1.0 


解构 赋值 右 侧 的 数组 所 包含 的 元 素 不 必 和 左 侧 的 变量 一 一 对 应 ， 磊 
侧 多 余 的 变量 的 赋值 为 ndefined， 而 右 侧 多 余 的 值 则 会 忽略 。 左 侧 的 变 
量 列表 可 以 包含 连续 的 逗号 用 以 跳 过 右 侧 对 应 的 值 。 





let[x,y]=[1];//x=1,y=undefined 
[x,y]=[1,2,3];//x=1,y=2 
[,x, ,yl]=[1,2,3,4];//x=2, y=4 





JavaScript 并 未 提供 将 石 侧 的 多 余 的 值 以 数组 的 形式 赋值 给 左 侧 变 量 
的 语法 。 比 如 ， 在 这 段 代 码 的 第 二 行 ， 并 不 能 将 [2,3] 赋 值 给 y。 


整个 解构 赋值 运算 的 返回 值 是 右 侧 的 整个 数据 结构 ， 而 不 是 从 中 提 
取出 来 的 茶 个 值 。 因 此 ， 可 以 这 样 写 “ 链 式 ”解构 赋值 : 








Jet first,second,all; 
all=[first,second]=[1,2,3,4];//first=1, second=2,all=[1,2,3,4] 





解构 赋值 同样 可 以 用 于 数组 组 套 的 情况 ， 解 构 赋 值 的 左 侧 应 当 也 是 
同样 格式 的 租 僚 数组 直接 量 : 











let[one, [twoA, twoB]]=[1, [2,2.5],3];//one=1, twoA=2, twoB=2.5 





解构 赋值 的 右 侧 也 可 以 是 一 个 对 象 。 这 种 情况 下 ， 人 解构 赋值 的 左 侧 
部 分 也 应 当 看 起 来 是 一 个 对 象 直 接 量 ， 对 象 中 是 一 个 名 值 对 的 列表 ， 名 
值 对 之 间 用 过 号 分 隔 ， 列 表 用 花 括 号 括 起 来 。 名 值 对 内 冒号 左 侧 是 属性 
名 称 ， 冒 号 右 侧 是 变量 名 称 ， 每 一 个 命名 属性 都 会 从 右 侧 对 象 中 得 找 对 
应 的 赋值 ， 每 个 值 〈 或 者 是 undefined) 都 会 赋值 给 它 所 对 应 的 变量 。 这 
种 解构 赋值 很 容易 被 摘 混 ， 因 为 属性 名 称 和 变量 标识 符 通常 写成 一 样 
的 。 在 下 面 这 个 例子 中 ，r、g 和 b 是 属性 名 ，red、green 和 blue 是 变量 


名 ， 请 不 要 搞 混 : 





















































let transparent={fr:0.0,g:0.0,b:0.0,a:1.0};// 一 个 用 RGBA 值 表示 的 颜色 
let{r:red,g:green,b:blue}=transparent;//red=0.0, green=0.0,blue=0.0 








在 接 下 来 的 例子 中 ， 将 Math 对 象 的 全 局 函数 复制 至 新 的 变量 中 ， 用 
以 简化 三 角 函 数 相关 的 代码 : 





// 等 价 于 let sin=Math.sin,cos=Math.cos,tan=Math.tan 
Jet{sin:sin,cos:cos,tan:tan}=Math; 





就 像 读 套数 组 可 以 用 于 解构 赋值 一 样 ， 肯 套 对 象 也 可 以 用 于 解构 赋 
两 种 语法 可 以 合 在 一 起 使 用 ， 可 以 用 来 描述 任意 的 数据 结 
义 ， 例 如 








// 一 个 幅 套 的 数据 结构 ， 一 个 对 象 中 包含 数组 ， 数 组 中 又 包含 对 象 
let data={ 

name:"destructuring assignment", 

type:"extension", 
impl:[{engine:"spidermonkey",version:1.7}, 
{engine:"rhino",version:1.7}] 

};// 使 用 解构 赋值 从 数据 结构 中 提取 4 个 值 
let({name:feature,impl:[{engine:impl1,version:vi}, tengine: impl2}]}=data)f{ 
console. 10g(feature); // 输 出 "destructuring assignment" 
console.1log(imp11);// 输 出 "spidermonkey" 
console.1log(v1);// 输 出 1.7 
console.1o0g(imp12);// 输 出 "rhino" 

} 






































需要 注意 的 是 ， 类 似 这 种 树 套 的 解构 冉 值 可 能 会 让 代码 变 得 星 梁 难 
懂 。 然 而 ， 有 一 种 有 趣 的 规律 可 以 帮助 你 更 好 地 阅读 这 些 复 杂 的 解构 赋 
值 。 思 考 一 下 最 普通 的 赋值 给 一 个 变量 赋值 )。 赋 值 结束 后 ， 可 以 将 
这 个 变量 用 在 程序 中 的 表达 式 里 ， 这 个 变量 的 值 就 是 刚 赋 的 值 。 在 解构 
赋值 中 ， 左 侧 的 部 分 使 用 了 类 似 数组 直接 量 或 对 象 直接 量 的 语法 。 但 需 
要 注意 ， 在 解构 赋值 完成 后 ， 左 侧 部 分 看 起 来 像 数 组 十 接 量 或 对 象 下 接 
量 的 代码 是 可 以 作为 合法 的 数组 和 对 象 用 在 代码 中 其 他 位 置 的 ， 所 有 必 
需 的 变量 都 已 经 有 定义 ， 因 此 可 以 直接 将 等 写 左 侧 的 部 分 作为 一 个 可 用 
的 数组 或 对 象 复 制 并 粘贴 到 程序 的 其 他 地 方 。 


i114 和 人 代 


Mozilla 的 JavaScript 扩 展 引 入 了 一 些 新 的 欠 代 机 制 ， 包 括 foveach 循 
环 和 Python 风格 的 迭代 器 〈iterator) 和 生成 器 (generator) 。 下 面 几 节 





























会 二 小。 


11.4.1 forveach 循 环 


foreach 循 环 是 由 E4X 规 范 (ECMAScript for XML) 定义 的 一 种 新 
的 循环 语句 。E4X 是 语言 的 扩展 ， 它 允许 JavaScript 程 序 中 直接 出 现 
XML 标签 ， 并 添加 了 操作 XML 数据 的 语法 和 API。Web 浏 览 句 大 都 没有 
实现 E4X， 但 是 Mozilla 的 JavaScript 1.6〈 随 着 Firefox 1.5 发布 ) 是 支持 
E4X 的 。 本 节 只 讲解 foveach， 并 不 会 涉及 XML 对 象 。 关 于 E4X 的 剩余 内 
容 请 参照 11.7 节 。 


forveach 循 环 和 fovin 循 环 非常 类 似 。 但 foveach 并 不 是 遍历 对 象 的 属 
性 ， 而 是 表 历 属性 的 值 : 








lJet o={one:1,two:2,three:3} 
for(let p in o)console.log(p);//for/in: 输 出 'one','two','three' 
for each(let v in 0)console.log(v);//for/each: 输 出 1~3 











当 使 用 数组 时 ，for/each 循 环 侦 历 循 环 的 元 素 〈 而 不 是 索引 ) 。 它 
通常 按 数 值 顺序 枚 举 它 们 ， 但 实际 上 这 并 不 是 标准 化 或 必需 的 : 





a=['one', 'two', 'three']; 
for(let p in a)console.1log(p);//Prints array indexes 0,1,2 
for each(let v in a)console.1log(v);//Prints array elts'one', 'two', 'three' 








注意 ，foreach 循 环 并 不 仅仅 针对 数组 本 吴 的 元 素 进 行 过 历 ， 它 也 
会 过 历数 组 中 所 有 可 枚 举 属 性 的 值 ， 包 括 由 数组 继承 来 的 可 枚 举 方法 。 
因此 ， 通 党 并 不 推荐 forveach 循 环 和 数组 一 起 使 用 。 在 ECMAScript 5 之 
前 的 JavaScript 版 本 中 是 可 以 这 样 用 的 ， 因 为 自 定义 属性 和 方法 不 可 能 设 
置 为 可 枚 举 的 (对 for/in 循 环 的 讨论 参见 7.6 节 ) 。 


11.4.2 迁 代 器 

JavaScript 1.7 为 fovin 循 环 增加 了 更 多 通用 的 功能 。JavaScript 1.7 中 
的 循环 和 Python 的 fovin 循 环 非 党 类 似 ， 它 可 以 过 历任 何 可 帮 代 的 
Giterable) 对 象 。 为 了 便于 理解 ， 我 们 首先 给 出 一 些 定义 。 


迭代 器 是 一 个 对 象 ， 这 个 对 象 允许 对 它 的 值 集合 进行 和 通 历 ， 并 保持 


任何 必要 的 状态 以 便 能 够 跟踪 到 当前 过 历 的 “位 置 ”。 


迭代 器 必须 包含 next(0) 方 法 ， 每 一 次 调用 nextO 都 返回 集合 中 的 下 一 
个 值 。 比 如 下 面 的 counter0O 函 数 返 回 一 个 迭代 器 ， 这 个 迭代 器 每 次 调用 
nextO 都 会 返回 连续 递增 的 整数 。 需 要 注意 的 是 ， 这 个 函数 作用 域 利用 
闭 包 的 特性 实现 了 计数 器 当前 状态 的 保存 : 











// 返 回 欠 代 器 的 一 个 函数 

function counter(Sstart ){ 

let nextValue=Math.round(start ) ;// 表 示 迭 代 器 的 一 个 私有 状态 
return{next:function(){return nextValLue++;}};// 返 回 迭 代 器 对 象 




















lJet SerialNumberGenerator=counter(1000 ) ， 
let sn1i=serialNumberGenerator.next();//1000 
let sn2=serialNumberGenerator.next();//1001 








当 迭 代 器 用 于 有 限 的 集合 时 ， 当 坎 届 历 完 所 有 的 信 并 且 没有 多 余 的 什 
可 友 代 时 ， 再 调用 next(0) 方 法 会 抛 出 StopIteration。StopIteration 是 
JavaScript 1.7 中 的 全 局 对 象 的 属性 。 所 的 值 是 一 个 普通 的 对 象 ( 它 自身 
没有 属性 ) ， 只 是 为 了 终结 迭代 的 目的 而 保留 的 一 个 对 象 。 注 意 ， 实 际 
上 ，StoplIteration 并 不 是 像 TypeError() 和 RangeError() 这 样 的 构造 函数 。 
比如 ， 这 里 实现 一 个 rangelter0) 方 法 ， 这 个 方法 返回 一 个 可 以 对 某 个 范 
的 整数 进行 迭代 的 从 代 器 : 














// 这 个 函数 返回 了 一 个 迭代 器 ， 它 可 以 迭代 某 个 范围 内 的 整数 
function rangeIter(first, Last){ 

let nextValue=Math.ceil(first)， 

returnt 

next:function( ){ 

if(nextValue>1ast)throw StopIteration; 

return nextValue++; 

















}; 


} 

// 使 用 这 个 范围 迭代 器 实现 一 次 糟糕 的 迭代 
let r=rangeIter(1,5);// 获 得 迭代 器 对 象 
while(true){// 在 循环 中 使 用 它 

tryt 
console.1log(r.next());// 调 用 next() 方 法 
} 











































































































catch(e)t{ 
if(e==StopIteration)break;// 抛 出 StopIteration 时 退出 循环 
else throw e; 

} 

} 





注意 ， 这 里 的 循环 使 用 一 个 迭代 器 对 象 ， 并 且 显 式 处 理 Stopiteration 





方法 ， 这 种 方式 非常 糟 糙 。 因 此 ， 我 们 并 不 经 背 直 接 使 用 欠 代 器 对 象 ， 
而 是 使 用 可 和 迭代 的 对 象 。 可 途 代 对 象 表 未 一 组 可 迄 代 处 理 的 值 。 可 迭代 
对 象 必 须 定义 一 个 名 叫 _iterator 0 的 方法 (开始 和 结尾 有 两 条 下 划 
线 ) ， 用 以 返回 这 个 集合 的 迭代 器 对 象 。 


JavaScript 1.7 对 fovin 循 环 的 功能 进行 了 扩展 ， 可 以 用 它 来 志 历 可 和 失 
代 对 象 。 如 果 关 键 字 训 pn 右 侧 的 值 是 可 迭代 的 ， 那 么 fovin 循 环 会 上 自动 调用 
它 的 _iterator__(0) 方 法 来 获得 一 个 迭代 器 对 象 。 然 后 它 调用 迭代 堪 的 ne 
xt() 方 法 ， 将 返回 值 赋值 给 循环 变量 ， 随 即 执行 循环 体 。for/in 循 环 自己 
会 处 理 StopTteration 异 常 ， 而 且 处 理 过 程 对 开发 者 是 不 可 见 的 。 下 面 的 
代码 定义 了 一 个 range0 函 数 ， 这 个 函数 返回 一 个 可 迭代 对 象 〈 不 是 欠 代 
器 ) 用 以 表示 某 个 范围 内 的 整数 。 我 们 看 到 ， 使 用 欠 代 范 围 的 fovin 循 

环 要 比 使 用 欠 代 器 的 while 循 环 更 加 简单 。 


























// 返 回 一 个 可 迭代 的 对 象 ， 用 以 表示 该 范围 内 的 一 个 数字 
function range(min,max)t 

return{// 返 回 一 个 表示 这 个 范围 的 对 象 

get min(){freturn min;},// 范 围 边界 是 固定 的 

get max(){return max;},// 并 在 闭 包 内 保存 起 来 
includes: function(x){// 检 测 成 员 是 否 属于 这 个 范围 
return min<=x& &x<==max; 

}, 
tostring:function(){// 以 字符 串 形式 输出 这 个 范围 
return"["+min+", "+max+"]"; 


































































































_ iterator :function( ){// 范 围 内 的 整数 都 是 可 迭代 的 
let val=Math.ceil(min);// 将 当前 位 置 保存 在 闭 包 中 
return{f// 返 回 一 个 迭 代 器 对 象 
next:function(){// 返 回 范围 内 的 下 一 个 值 
if(val> 之 nax)// 如 果 到 达 结 尾 就 停止 

throw StopIteration; 

return val++;// 人 否则 返回 下 一 个 值 ， 并 自 增 1 






























































}; 
} 
}; 


一 
































// 这 里 我 们 对 这 个 区 间 中 的 值 进 行 迭 代 
for(let i in range(1,10))console.10g(i);// 输 出 1~10 之 间 的 数字 











需要 注意 的 是 ， 我 们 在 创建 一 个 可 迭代 的 对 象 和 它 的 迭代 喜 的 时 
候 ， 尺 管 必 须 写 一 个 _iterator_0 〇 方法 并 抛 出 一 个 StopIteration 异 常 ， 但 
在 正常 使 用 时 并 不 需要 我 们 去 手动 调用 iterator (方法 或 手动 处 理 
StopIteration 异 常 ，for/in 循 环 会 为 我 们 处 理 这 些 逻 辑 。 如 果 出 于 某 种 考 
虑 ， 你 想 从 可 迭代 的 对 象 中 显 式 获得 一 个 欠 代 堪 对 象 ， 只 需 调用 
IteratorO) 函 数 即 可 〈 这 个 函数 是 定义 在 JavaScript ”1.7 中 的 全 局 函数 ) 。 





如 果 这 个 函数 的 参数 是 一 个 可 迭代 的 对 象 ， 那 么 它 将 返回 这 个 对 象 的 
_ iterator__() 方 法 的 调用 结果 ， 从 而 保持 代码 整洁 和 干净。 如 果 给 Iterator() 
函数 传 入 第 二 个 参数 ， 这 个 参数 也 会 参与 _iterator__() 方 法 的 调用 。 


然而 ， 引 入 Tterator() 函 数 还 有 一 个 重要 的 目的 ， 如 果 传 入 的 对 象 或 
者 数组 没有 定义 _iterator (方法 ， 它 会 0 一 个 可 六 代 的 
目 定义 达 代 右 。 每 次 调用 这 个 迭代 器 的 next0 方 法 都 会 返回 其 中 包含 两 
个 值 的 一 个 数组 ， 第 一 个 数组 元 素 是 一 个 属性 名 ， 第 二 个 是 命名 属性 的 
值 。 由 于 这 个 对 象 是 可 和 迭代 的 友 代 器 ， 因此 它 可 以 直接 用 于 foin 企 
环 ， 而 不 用 直接 调用 它 的 next(0) 方 法 。 这 意味 着 可 以 将 Iteratro0 函 数 和 解 
构 赋 值 一 起 使 用 ， 这 样 可 以 方便 地 对 对 象 或 数组 的 属性 和 值 进 行 遍历 : 











for(let[k,v]in Iterator( {a: 1,b: ea 和 值 作 迭代 
console.1og(k+"="+V);// 输 出 "a=1" 和 " 








ee 第 一 ， 它 只 对 上 自 
有 属性 进行 过 历 而 忽略 继承 的 属性 ， 通 各 我 们 而 望 是 这 个 样子 。 第 二 ， 
如 果 给 Iterator() 传 入 第 二 个 参数 true， 返 回 的 运 代 器 只 对 属性 名 进行 过 
历 ， 而 忽略 属性 值 。 下 面 这 段 代码 展示 了 这 两 种 特性 : 

















0={X:1,y:2}// 定 义 一 个 对 象 ， 它 有 两 个 属性 
Object .prototype.z=3; /六 有 六 对 人 天 了。 


for(p in o)console. 10g(p); // 输 出 "x 
for(p in Iterator(o,true))console. a /只 俞 出 "x" 和 "y" 






































11.4.3 ”生成 器 


生成 器 是 JavaScript 1.7 中 的 特性 (是 从 Python 中 借用 过 来 的 概 
念 ) ， 这 里 用 到 了 一 个 新 的 关键 字 yield， 使 用 这 个 关键 字 时 代码 必须 显 
式 指定 JavaScript 的 版 本 1.7， 就 像 在 11.2 节 中 提 到 的 。 关 键 字 yield 在 函数 
内 使 用 ， 用 法 和 retum 类 似 ， 返 回 函 数 中 的 一 个 值 。yield 和 return 的 区 别 
在 于 ， 使 用 yield 的 函数 “产生 ”一 个 可 保持 函数 内 部 状态 的 值 ， 这 个 值 是 
可 以 恢复 的 。 这 种 可 恢复 性 使 得 yield 成 为 编写 迭代 器 的 有 力 工 具 。 生 成 
器 是 一 种 强大 的 语言 特性 ， 但 它 初次 理解 起 来 可 能 有 些 困难 ， 下 面 给 出 
“Es 


任何 使 用 关键 字 yield 的 函数 《哪怕 yield 在 代码 趟 辑 中 是 不 可 这 的 ) 
都 称 为 “生成 器 函数 ”(generator function) 。 生 成 器 函数 通过 yield 返 回 








值 。 这 些 函数 中 可 以 使 用 return 来 终止 函数 的 执行 而 不 带 任何 返回 值 ， 
但 不 能 使 用 return 来 返回 一 个 值 。 除 了 使 用 yield， 对 return 的 使 用 限制 也 
使 生成 器 函数 更 明显 地 区 别 于 普通 函数 。 然 而 和 普通 的 函数 一 样 ， 生 成 
器 函数 也 通过 关键 字 function 声 明 ，typeof 运 算 符 返回 "function"， 并 可 以 
从 Function.prototype 继 承 属 性 和 方法 。 但 对 生成 器 函数 的 调用 却 和 普通 
不 是 执行 生成 器 函数 的 函数 体 ， 而 是 返回 一 个 生成 喜 
对 家 。 


生成 器 是 一 个 对 象 ， 用 以 表示 生成 费 函 数 的 当前 执行 状态 。 它 定义 
了 一 个 next(0) 方 法 ， 后 者 可 恢复 生成 器 函数 的 执行 ， 直 到 遇 到 下 一 条 
yield 语 句 为 止 。 这 时 ， 生 成 器 函数 中 的 yield 语 句 的 返回 值 就 是 生成 器 的 
next(O 方 法 的 返回 值 。 如 果 生 成 器 函数 通过 执行 return 语 句 或 者 到 达 函 数 
体 末 尾 终止 ， 那 么 生成 器 的 next(0) 方 法 将 抛 出 一 个 StopIteration 。 


只 要 一 个 对 象 包 含 可 抛 出 StopIteration 的 next() 方 法 ， 它 就 是 一 个 迭 
代 器 对 象 是 。 实 际 上 ， 它 们 是 可 迭代 的 迭代 器 ， 也 就 是 说 ， 它 们 可 以 通 
过 for/in 循 环 进行 融 历 。 下 面 的 代码 展示 了 如 何 简单 地 使 用 生成 占 函 数 
以 及 对 它 所 生成 的 返回 值 进行 裔 历 : 














// 针 对 一 个 整数 范围 定义 一 个 生成 器 函数 
function range(min,max)t 
for(let i=Math.ceil(min);i<~=max;i++)yield i; 






































} 
// 调 用 这 个 生成 器 函数 以 获得 一 个 生成 器 ， 并 对 它 进行 遍历 
for(let n in range(3,8))console.1og(n);// 输 出 数字 3 一 8 























生成 器 函数 不 需要 返回 。 实 际 上 ， 最 典型 的 例子 就 是 用 生成 器 来 后 
成 Fibonacci 数 列 : 

















// 一 个 用 以 产生 一 个 Fibonacci 数 列 的 生成 器 函数 
function fibonacci(){ 

Jet x=0,y=1; 

while(true)t{ 

yield y; 

es 


} 

// 调 用 生成 器 函数 以 获得 一 个 生成 器 

f=fibonacci();// 将 生成 器 当做 迭代 器 ， 输 出 Fibonacci 数 列 的 前 10 个 数 
for(let i=0;i<10;i++)console.log(f.next()); 






































我 们 注意 到 ，fibonacci() 生 成 费 函 数 没 有 返回 。 因 此 ， 它 所 产生 的 


生成 喜 不 会 抛 出 StopIteration。 不 能 把 这 个 生成 右 当 做 一 个 可 迭代 的 对 
象 用 for/in 循 环 进行 表 历 ， 这 个 循环 是 一 个 无 穷 循环 ， 而 是 把 它 当 做 一 
个 迭代 器 并 显 式 调用 10 次 它 的 next0 方 法 来 实现 。 这 上 段 代 码 运 行 后 ， 生 
成 器 {依然 保持 着 生成 器 函数 的 执行 状态 。 如 果 不 再 使 用 f， 则 可 以 通过 
调用 f.close() 方 法 来 释放 它 : 





f.close( ); 





当 调 用 了 生成 器 的 close(0) 方 法 时 ， 和 它 相 关 的 生成 器 函数 就 会 终止 
执行 ， 束 像 在 函数 运行 挂 起 的 位 置 执行 一 条 return 语 句 。 如 果 当 前 挂 起 
位 置 在 一 个 或 者 多 个 try 语 句 块 中 ， 那 么 将 首先 运行 finally 从 句 ， 再 执行 
close() 返 回 。close() 没 有 返回 值 ， 但 如 果 finally 语 句 块 产生 了 异常 ， 这 个 
异常 则 会 传播 给 close()。 


生成 器 经 常用 来 处 理 序列 化 的 数据 ， 比 如 元 素 列 表 、 多 行文 本 、 词 
法 分 析 器 中 的 单词 等 。 生 成 器 可 以 像 Unix 的 shell 命 令 中 的 管道 那样 链 式 
使 用 。 有 趣 的 是 ， 这 种 用 法 中 的 生成 器 是 “懒惰 的 >”， 只 有 在 需要 的 时 候 
才 会 从 生成 器 (或 者 生成 器 的 管道 ) 中 “ 取 ” 值 ， 而 不 是 一 次 将 许多 结果 
都 计算 出 来 。 参 照例 11-1。 


例 11-1: 一 个 生成 器 管道 











// 一 个 生成 器 ， 每 次 产生 一 行 字符 串 S 
// 这 里 没有 使 用 s . split( )， 因 为 这 样 会 每 次 都 处 理 整 个 字 串 ， 并 分 配 一 个 数组 
// 我 们 希望 能 更 " 懒 "一 些 

function eachline(s){ 

let p; 

while( (p=s.indexOof('\n'))!=-1){ 

yield s.substring(0,p); 

s=s.substring(p+1); 




























































































} 
if(s.length>0)yield s; 








// 一 个 生成 器 函数 ， 对 于 每 个 可 迭代 的 计 的 每 个 元 素 X， 都 会 产生 一 个 f(X) 
function map(i,f){ 
for(let x in i)yield f(x); 











} 

// 一 个 生成 器 函数 ， 针 对 每 个 结果 为 true 的 f(x)， 为 i 生成 一 个 元 素 
function select(i,f)f{ 

for(let x in 工 ){ 
if(f(x))yield x; 
} 

} 

// 准 备 处 理 这 个 字符 串 
let text="#comment\n\n hello\nworld\n quitxn unreached\n";// 现 在 创建 一 个 生成 器 管道 来 





























// 首 先 ， 将 文本 分 隔 成 行 

let lines=eachline(text);// 然 后 ， 去 掉 行 首 和 行 尾 的 空格 

let trimmed=map(lines,function(1line)f{return line.trim();});// 最 后 ， 忽 略 空 行 和 注释 
let nonblank=select(trimmed,function(line){ 
return line.length>0&&1ine[0]!="#" 

});// 现 在 从 管道 中 取出 经 过 删 减 和 筛选 后 的 行 对 其 进行 处 理 
// 直 到 过 到 "quit" 的 行 

for(let line in nonblank){ 
if(line==="qguit")break; 

console.1log(line); 































































































生成 右 往 往 是 在 创建 的 时 候 初 始 化 ， 传 入 生成 器 函数 的 值 是 生成 器 
所 接收 的 唯一 输入 。 然 而 ， 也 可 以 为 正在 执行 的 生成 器 提供 更 多 输入 。 
每 一 个 生成 器 都 有 一 个 send() 方 法 ， 后 者 用 来 重 局 生成 器 的 执行 ， 束 像 
next(0) 方 法 一 样 。 和 next0 不 同 的 是 ，send0 可 以 带 一 个 参数 ， 这 个 参数 
的 值 束 成 为 yield 表 达 式 的 值 (多数 生成 器 函数 是 不 会 接收 额外 的 输入 
的 ， 关 键 字 yield 看 起 来 像 一 条 语句 。 但 实际 上 ，yield 是 一 个 表达 式 ， 是 
可 以 有 值 的 ) 。 除 了 next0 和 send0 之 外 ， 还 有 一 种 方法 可 以 重启 生成 器 
的 执行 ， 即 使 用 throw()。 如 果 调 用 这 个 方法 ，yield 表 达 式 就 将 参数 作为 
一 个 异常 抛 给 throwO， 比 如 ， 下 面 一 段 代 码 : 























// 一 个 生成 器 函数 ， 用 以 从 某 个 初始 值 开始 计数 

// 调 用 生成 器 的 send( ) 来 进行 增 量 计算 

// 调 用 生成 器 的 throw("reset") 来 重 置 初始 值 

// 这 里 的 代码 只 是 示例 ，throw( ) 的 这 种 用 法 并 不 推荐 
function counter(initial)f{ 

let nextValue=initial;// 定 义 初始 值 
while(true)t{ 

try{ 

let increment=yield nextValue;// 产 生 一 个 值 并 得 到 增 量 
if(increment )// 如 果 我 们 传 入 一 个 增 量 …. 
nextValue+=increment ,;//…. 那 么 使 用 它 

else nextValue++;// 和 否则 自 增 1 













































































二 




































































} 

catch(e){// 如 果 调 用 了 生成 器 的 throw( )， 则 执行 这 里 的 逻辑 
if(e==="reset") 

nextValue=initial,; 

else throw e; 

} 

} 


} 

let c=counter(10);// 用 10 来 创建 生成 器 
console.1log(c.next());// 输 出 10 
console.log(c.send(2));// 输 出 12 
console.1log(c.throw("reset"));// 输 出 10 





























1 aa4 数组 推导 


JavaScript 1.7 中 的 数组 推导 (array comprehension) 也 是 从 Python 中 
借用 过 来 的 一 个 概念 。 它 是 一 种 利用 另外 一 个 数组 或 可 迭代 对 象 来 初始 
化 数组 元 素 的 技术 。 数 组 推导 的 语法 是 基于 定义 元 素 集 合 的 数学 模型 
的 ， 也 就 是 说 ， 表 达 式 和 从 名 的 写法 和 JavaScript 程 序 员 期 望 的 不 一 致 。 
但 不 必 担 心 ， 因 为 花 不 了 太 多 时 间 就 可 以 掌握 这 种 新 式 语 法 ， 一 旦 掌握 
它 则 威力 无 穷 。 


下 面 这 段 代码 展示 了 数组 推导 的 写法 ， 这 里 用 到 了 上 文 定义 的 
range0 本 数 ， 这 鼎 代 码 用 以 初始 化 一 个 数组 ， 数 组 成 员 是 0~100 之 问 的 
平方 数 





let evensquares=[x*x for(x in range(0,10))if(x%2===0)] 





这 段 代 码 和 下 面 这 五 行 代码 等 价 : 


let evensquares=[]; 
for(x in range(0,10)){ 
if (x%2===0) 
evensquares.push(x*x); 


一 般 来 讲 ， 数 组 推导 的 语法 如 下 : 


[expression for(variable in object)if(condition)] 





我 们 看 到 ， 数 组 推导 包含 三 个 部 分 : 


:一 个 没有 循环 体 的 for/in 或 for/each 循 坏 。 这 部 分 推导 包括 一 个 变量 
(或 者 通过 解构 赋值 得 到 的 多 个 变量 ) ， 它 位 于 关键 字 in 的 左 侧 ，in 的 
右 侧 是 一 个 对 象 〈 例 如 ， 这 个 对 象 可 以 是 一 个 生成 器 、 可 人 迭代 对 象 或 数 
组 ) 。 尽 管 这 个 对 象 后 面 没 有 循环 体 ， 这 段 数 组 推导 也 能 正确 执行 迭 
代 ， 并 能 给 指定 的 变量 赋值 。 注 意 ， 在 变量 之 前 没有 关键 字 var 和 jet， 
其 实 这 里 使 用 了 隐 式 的 let， 在 数组 推导 中 的 变量 在 方 括号 的 外 部 是 不 可 
见 的 ， 也 不 会 履 盖 已 有 的 同名 变量 。 


在 执行 般 历 的 对 象 之 后 ， 是 圆 括 号 中 的 关键 字 让 和 条 件 表达 陈 ， 目 
前 ， 这 个 条 件 表达 式 只 是 用 做 过 滤 和 迭代 的 值 。 每 次 for 循 环 产 生 一 个 值 之 














后 会 判断 条 件 表达 式 。 如 果 条 件 表达 式 返 回 false， 则 跳 过 这 个 值 ， 这 个 
值 也 不 会 被 添加 至 数组 当中 。 计 从 名 是 可 选 的 ， 如 果 省 略 的 话 ， 相当 于 
给 数组 推导 补充 一 条 if(true) 从 句 。 


可 以 认为 这 个 表达 式 是 循环 体 。 在 
友 代 堪 返 回 了 一 个 值 并 将 它 赋 给 一 个 变量 ， 且 这 个 变量 通过 了 
conditional 测 试 之 后 ， 将 计算 这 个 表达 式 ， 并 将 表达 式 的 计算 结果 插入 
到 要 创建 的 数组 中 。 


下 面 是 一 些 具 体 的 例子 : 





data=[2,3,4,-5];// 一 个 数组 

squares=[x*x for each(x in data)];// 对 每 个 元 素 求 平方 : [4, 9, 16, 25] 

// 如 果 数 组 元 素 是 非 负 数 ， 求 它 的 平方 根 

roots=[Math.sqrt(x)for each(x in data)if(x>>=0)]// 将 一 个 对 象 的 属性 名 放 入 新 创建 的 数组 中 
o={a:1,b:2,f:function( ){}} 

let allkeys=[p for(p in o)] 

Jet ownkeys=[p for(p in o)if(o.hasownProperty(p))] 

lJet notfuncs=[k for([k,v]jin Iterator(o))if(typeof v!=="function")] 

















11.4.5 生成 器 表达 式 


在 JavaScript 1.8 呈 中 ， 将 数组 推导 中 的 方 括号 替换 成 圆 括号 ， 它 就 
成 了 一 个 生成 器 表达 式 。 生 成 器 表达 式 (generator expression ) 和 数组 
推导 非常 类 似 〈( 两 者 在 圆 括号 内 的 语法 几乎 完全 一 样 )， 只 是 它 的 返回 
值 是 一 个 生成 器 对 象 ， 而 不 是 一 个 数组 。 和 数组 推导 相 比 ， 使 用 生成 器 
表达 式 的 好 处 是 可 以 惰性 求 值 (lazy evalution) ， 只 有 在 需要 的 时 候 求 
值 而 不 是 每 次 都 计算 求 值 ， 这 种 特性 可 以 应 用 于 潜在 的 无 穷 序 列 。 使 用 
生成 器 表达 式 而 不 用 数组 也 有 不 足 之 处 ， 生 成 器 只 文 持 对 值 的 顺序 存 取 
而 不 是 随机 存 取 。 和 数组 不 同 ， 生 成 器 并 没有 索引 ， 为 了 得 到 第 n 个 
值 ， 必 须 遍 遍历 它 之 前 的 m- 1 个 值 。 


本 草 前 面 有 这 样 一 个 map(0 函 数 : 











function map(i,ff){// 对 于 i 的 每 个 元 素 ， 生 成 器 都 会 生成 f(x) 
for(let x in i)yield f(x); 
} 








有 了 生成 器 表达 式 ， 就 不 必用 这 个 map0O 函 数 了 。 比 如 ， 下 面 这 段 
代码 定义 一 个 新 的 生成 喜 h 用 以 对 每 个 x 生 成 fo)，x 由 生成 器 g 生 成 : 





let h=(f(x)for(x in g)); 





实际 上 ， 例 11-1 中 所 提 到 的 eachline() 生 成 器 ， 我 们 可 以 对 其 进行 重 
写 ， 可 以 通过 这 种 方式 来 去 除 空 格 、 注 释 和 空 行 : 











lJet lines=eachline(text); 
let trimmed=(1.trim()for(1] in lines)); 
let nonblank=(1 for(l1 in trimmed)if(1.length>0&&1[0]!='#')); 





11.5 ”也 数 人 简写 


对 于 简单 的 函数 ，JavaScript 1.8L0 引 入 了 一 种 简写 形式 : 表达 式 闭 
包 。 如 果 函 数 只 计算 一 个 表达 式 并 返回 它 的 值 ， 关 键 字 retum 和 花 括号 
机 并 将 竺 计算 的 表达 式 紧 接 着 放 在 参数 列表 之 后 ， 这 里 有 一 
些 例子 : 














Jet succ=function(x)x+1,yes=function()true,no=function( )false; 





这 只 是 一 种 简单 的 快捷 写法 ， 用 这 种 形式 定义 的 函数 其 实 和 带 花 括 
号 和 关键 字 return 的 函数 完全 一 样 。 这 种 快捷 写法 更 适用 于 当 给 函数 传 
入 力 一 个 函数 的 场景 ， 比 如 : 

















// 对 数组 按照 数字 大 小 顺序 进行 降序 排列 
data.sort(function(a,b)b-a);// 定 义 一 个 函数 ， 用 以 返回 数组 元 素 的 平方 和 


























let sumOofSquares=function(data) 
Array.reduce(Array.map(data,function(x)x*x),function(x,y)x+t+y); 


11.6 ”多 catch 从 名 


在 JavaScript ”1.5 中 ，try/catch 语 句 已 经 可 以 使 用 多 catch 从 名 了， 在 
catch 从 名 的 参数 中 加 入 关键 字 让 以 及 一 个 条 件 判断 表达 式 : 





























try{// 这 里 可 能 会 抛 出 多 种 类 型 的 异常 
throw 1; 





























} 
catch(e if e instanceof ReferenceError){// 这 里 处 理 引 用 错误 
} 

















catch(e if e==="quit"){// 这 里 处 理 抛 出 的 字符 串 是 "quit" 的 情况 





























catch(e if typeof e==="string"){// 处 理 其 他 字符 串 的 情况 











} 
catch(e){// 处 理 余下 的 异常 情况 


finally{//finally 从 句 正常 执行 
} 





当 产 生 一 个 异常 时 ， 程 序 将 会 党 试 依次 执行 每 一 条 catch 从 句 。 
catch 从 人 句 中 的 命名 参数 即 是 这 个 异常 ， 执 行 到 catch 的 时 候 会 计算 它 的 
条 件 表 达 式 。 如 果 条 件 表 达 式 计算 结果 为 tue， 则 判断 当前 catch 从 句 中 
的 逻辑 ， 同 时 跳 过 其 他 的 catch 从 句 。 如 果 catch 从 句 中 没有 条 件 表达 
式 ， 程 序 就 会 假设 它 包含 一 个 让 true 的 条 件 ， 如 果 它 之 前 的 catch 从 句 都 
没有 触发 ， 那 么 这 条 catch 语 句 一 定 会 执行 。 如 果 所 有 的 catch 从 句 都 包 
含 条 件 ， 但 没有 一 个 条 件 是 true， 那 么 程序 会 同上 抛 出 这 个 未 捕获 的 异 
常 。 注 意 ， 因 为 catch 从 句 中 的 条 件 表达 式 已 经 在 圆 插 号 内 了 ， 因 此 也 就 
不 必 像 普通 的 条 件 语句 一 样 再 给 它 包 于 一 对 圆 括 号 。 


11.7 E4X:ECMAScript for XML 


"ECMAScript ”for ” XML" 简称 E4X， 是 JavaScript 的 一 个 标准 扩 
展 出 ， 它 为 处 理 XML 文 档 定 义 了 一 系列 强大 的 特性 。Spidermonkey 1.5 
和 Rhino ”1.6 己 经 文 持 E4X。 由 于 多 数 浏览 器 厂商 还 未 文 持 E4X， 因 此 
E4X 被 认为 是 一 种 基于 Spidermonkey 或 Rhino 引 擎 的 服务 器 端 技术 。 


E4X 将 XML 文档 《或 者 XML 文档 的 元 素 或 属性 ) 视 为 一 个 XML 对 
象 ， 将 XML 户 段 〈 在 常见 的 父 对 象 中 包含 多 个 XML 元素 ) 视 为 一 个 紧 
密 相 关 的 XML 列表 对 象 。 本 节 会 介绍 创建 和 使 用 XML 对 象 的 一 些 方 
法 。XML 对 象 是 一 类 全 新 的 对 象 ，E4X 中 定义 了 专门 的 语法 来 描述 它 
〈《 接 下 来 会 看 到 ) 。 我 们 知道 ， 除 了 函数 之 外 所 有 标准 的 JavaScript 对 象 
的 typeof 运 算 结 果 都 是 "object"。 正 如 函数 和 原始 的 JavaScript 对 象 有 所 区 
别 一 样 ，XML 对 象 也 和 原始 JavaScript 对 象 不 同 ， 对 它们 进行 typeof 运 算 
的 结果 是 "xml"。 在 客户 端 JavaScript 中 (参照 第 15 章 ) ，XML 对 象 和 
DOM (文档 对 象 模 型 ) 对 象 没 有 任何 关系 ， 理 解 这 一 点 非常 重要 。E4X 
标准 也 针对 XML 文档 元 素 的 E4X 和 DOM 表 示 方 式 之 间 的 转换 做 了 规 
定 ， 这 个 规定 是 可 选 的 ，Firefox 并 没有 实现 它们 之 间 的 转换 。 这 也 是 
E4X 更 适用 于 服务 器 端 编程 的 原因 。 


本 节 会 给 出 E4X 的 一 个 快速 入 门 教程 ， 而 不 会 进行 更 深入 的 讲解 。 

















XML 对 象 和 XML 列表 对 象 的 很 多 方法 本 书 中 并 未 介绍 。 第 四 部 分 也 不 
会 对 其 进行 讲解 ， 如 果 读 者 希望 进一步 了 解 E4X， 可 以 参照 官方 文档 。 


E4X 只 定义 了 很 少 的 新 语言 语法 。 最 显著 的 新 语法 当 属 将 XML 标签 
引入 JavaScript 语 言 中 。 可 以 在 JavaScript 代 码 中 直接 书写 XML 标签 直接 
量 ， 比如 : 








// 创 建 一 个 XML 对 象 

Var pt= 

<periodictable> 

<element id="1"><name>Hydrogen</name><=/element> 

<element id="2"><name>Helium</name></element> 

<element id="3"><name>Lithium</name></element> 
</periodictab1e> ;// 给 这 个 表格 添加 一 个 新 元 素 

pt.element+=<element id="4">><name>Beryllium</name>></element>,， 





XML 直接 量 语法 中 使 用 花 括 号 作为 转 义 字符 ， 可 以 在 XML 中 磐 入 
JavaScript 表 达 式 。 例 如 ， 这 里 是 另外 一 种 创建 XML 元 素 的 方法 : 





pt=<periodictable></periodictable>;// 创 建 一 个 空 表格 

var elements=["Hydrogen", "Helium", "Lithium"];// 待 添加 的 元 素 

// 使 用 数组 元 素 创建 XML 标 签 

for(var n=0;n<elements.1length;n++){ 

pt.element+=<element id={n+1}>><name>{elements[n]}=<=/name>></element>,， 





























除了 使 用 直接 量 语法 ， 我 们 也 可 以 将 字符 串 解析 成 XYML。 下 面 的 
代码 为 上 段 代码 创建 的 节点 增加 了 一 个 新 元 素 : 





pt.element+=new XML('<~<element id="5"><name>Boron</name></element> '); 





当 涉 及 XML 片段 的 时 候 ， 使 用 XMLListO 蔡 换 XML0: 





pt.element+=new XMLList('<~<element id="6">><name>Carbon</name></element>'+'< 
element id="7"><name>Nitrogen</name></element> '); 





E4X 提 供 了 一 些 显 而 易 见 的 语法 用 以 访问 所 创建 的 XML 文 档 的 内 


蝶 








var elements=pt.element;// 得 到 所 有 element 二 标签 组 成 的 一 个 列表 




















var names=pt.element,.name;// 得 到 所 有 的 name> 之 标签 的 一 个 列表 
var n=names[0];//"Hydrogen" ( 氧 ) ，name 的 第 6 个 标签 的 内 容 





























E4X 同 样 为 操作 XML 对 象 提 供 了 语法 支持 ， 点 点 〈..) 运算 符 是 “后 
代 运 算 符 ”(descendant operator) ， 可 以 用 它 蔡 换 普 通 的 点 〈.) 成 员 访 
问 运算 符 : 





// 另 一 种 得 到 所 有 <name> 之 标签 对 应 列表 的 方法 
var names2=pt. .name 




















E4X 甚 至 定义 了 通配符 运算 : 








// 得 到 所 有 <element> 之 标签 的 所 有 子 节点 
// 这 也 是 得 到 所 有 <name 之 标签 对 应 列表 的 另外 一 种 方法 
var names3=pt .element .*， 
































E4X 中 使 用 字符 @ 来 区 分 属性 名 和 标签 名 (从 XPath 中 借用 过 来 的 
语法 ) 。 比 如 ， 可 以 这 样 来 获得 一 个 属性 : 





//" 氮 "的 原子 序数 是 多 少 


var atomicNumber=pt.element[1].@id; 








可 以 使 用 通配符 来 获得 属性 名 @*: 











// 获 得 所 有 的 二 element 二 标签 的 所 有 属性 
var atomicNums=pt.element.@*; 








EE 




















E4X 甚 至 包含 了 一 种 强大 且 极 其 简洁 的 语法 用 来 对 列表 进行 过 滤 ， 
过 小 条 件 可 以 是 任意 谓词 表达 式 : 














// 对 所 有 的 <element 二 元素 组 成 的 一 个 列表 进行 过 滤 

// 过 滤 出 那些 id 属 性 小 于 3 的 元 素 

var lightElements=pt.element.(@id<=3);// 对 所 有 的 element 元 素 组 成 的 列表 进行 过 滤 
// 过 滤 出 那些 name 以 B 开 始 的 元 素 

// 然 后 得 到 过 滤 后 元 素 的 <name> 标 签 列表 

var bElementNames=pt.element. (name.charAt(0)=='B').name; 


















































11.4.1 节 讲 到 forveach 循 环 是 非常 有 用 的 ， 但 在 E4X 标 准 中 对 


for/each 循 环 有 了 新 的 定义 ， 可 以 用 for/each 来 遍历 XML 标 签 和 属性 列 
表 。forveach 和 fovin 循 环 非常 类 似 ，fovin 循 环 用 以 遍历 对 象 的 属性 名 ， 
for/each 循 环 用 以 遍历 对 象 的 属性 值 : 














// 输 出 元 素 周期 表 中 的 每 个 元 素 名 
for each(var e in pt.element){ 
console.1log(e.name); 








} 
// 输 出 每 个 元 素 的 原子 序数 


for each(var n in pt.element.@*)console.1o0g(n); 








E4X 表 达 式 可 以 出 现在 赋值 语句 的 左 侧 ， 可 以 用 它 来 对 已 存在 的 标 
签 和 属性 进行 修改 或 添加 新 标签 或 属性 : 








// 修 改 氨 元 素 的 <element 标签 ， 给 它 添加 一 个 新 属性 
// 像 下 面 这 样 添加 一 个 子 元 素 

// 

//<element id="1"symbol="H"> 
//<name>Hydrogen<=/name> 
//<weight~>1.00794<=/weight> 
//</element> 

// 

pt.element[0].@symbol="H"; 

pt.element[0] .weight=1.00794; 






































通过 标准 的 delete 运 算 符 也 可 以 方便 地 删除 属性 和 标签 : 











delete pt.element[0].@symbol;// 删 除 一 个 属性 
delete pt. .weight;// 删 除 所 有 的 <widget 二 标签 








我 们 可 以 通过 E4X 上 所 提供 的 语法 来 进行 大 部 分 的 XML 操作 。E4X 同 
样 定义 了 能 够 调用 XML 对 象 的 方法 ， 例 如 ， 这 里 用 到 了 
insertChildBefore() 方 法 : 





pt.insertChildBefore(pt.element[1], 
<element id="1"><name>Deuterium</name></element> ); 





E4X 中 是 完全 支持 命名 空间 的 ， 它 为 使 用 XML 命名 空间 提供 了 语法 
支持 和 API 支 持 : 





// 声 明 默 认 的 命名 空间 























default xml namespace="http://www.w3.org/1999/xhtml";// 这 里 也 是 一 个 包含 一 些 svg 标 签 的 
Xhtml 文档 

d==html> 

<body> 

This is a small red square: 

<svg xmlns="http://www.w3.org/2000/svg"width="10"height="10"> 

<rect x="O"y="O"width="10"height="10"fill="red"/> 

</svg> 

</body> 

二 /html 二 //body 元 素 和 它 的 命名 空间 里 的 uri 及 其 localName 

var tagname=d.body.name( ); 

var bodyns=tagname .uri,; 

var localname=tagname .1ocalName,;// 选 择 <svg>> 元 素 需要 多 做 一 些 工 作 ， 因 为 二 svg > 不 在 默认 的 
命名 空间 中 

// 因 此 需要 为 svg 创 建 一 个 命名 空间 ， 并 使 用 : :运算 符 将 命名 空间 添加 至 标签 名 中 

var svg=new Namespace('http://www.w3.org/2000/svg'); 

Var color=d. .svg::rect.@fill//"red" 


[LFirefox 的 JavaScript 引 擎 有 很 多 种 ， 大 多 数 是 我 们 熟悉 的 “ 猴 ” 系 列 ， 文 
中 所 提 到 的 Spidermonkey (用 于 Firefox 1.0 一 3.0) 便 是 其 中 一 种 ， 此 外 
还 包括 TraceMonkey (用 于 Firefox 3.5 一 3.6) 、JaegerMonkey〔 用 于 
Firefox4.0〉 以 及 最 新 开发 的 IonMonkey。 有 关 Spidermonkey 的 更 多 信息 
可 参照 : http:/en.wikipedia.org/wiki/SpiderMonkey) 。 

D2] 理 论 上 ， 只 要 是 Mozilla 血 统 的 JavaScript 引 警 的 开发 环境 都 可 以 支持 
文中 提 到 的 扩展 特性 。 

[3] 这 里 所 说 的 双重 身份 是 指 浏览 器 窗口 对 象 除 了 作为 普通 的 全 局 对 象 之 
外 ， 还 能 通过 它们 去 操作 浏览 器 和 DOM 。 

[4 外 观 面 板 * 和 “代理 对 象 ”? 是 设计 模式 中 的 两 个 术语 ， 分 别 对 应 “外 观 
模式 ”和 “代理 模式 ”。 更 多 内 容 请 参照 http:/zh.wikipedia.org/wiki/ 外 观 模 
式 和 http://zh.wikipedia.org/wiki/ 代 理 模 式 。 

[5] 详 情 请 参照 http://www.sitepen.com/blog/2008/08/01/secure-mashups- 
with-dojoxsecure。 

[6]Caja 是 西班牙 语 ， 意 思 是 “ 沙 盒 ”"，Caja 的 详情 请 参照 : 
http://code.google.com/p/google-caja/。 

四] 原文 是 "Tt expects the version number times ten"， 作 者 表述 有 误 ， 应 当 
是 版 本 号 乘 以 100 而 不 是 乘 以 10。 在 命令 行 环 十 中 ， 直 接 执行 version() 可 
以 返回 当前 采用 的 JavaScript 版 本 号， 返回 值 遂 常 为 150、160、170 等 。 
[8] 生 成 器 有 时 也 叫做 “生成 器 欠 代 器 ”(〈generator iterator) ， 用 以 区 分 创 
建 它 的 生成 器 函数 。 在 本 章 里 ， 我 们 统一 使 用 术语 “生成 器 ”来 表示 “ 生 
成 器 达 代 器 *， 在 其 他 参考 文献 中 ， 生 成 器 可 能 会 同时 指 代 生 成 器 函数 
和 生成 器 欠 代 器 。 

[9] 本 书 撰 稿 时 ，Rhino 还 未 开始 支持 生成 器 表达 式 。 

0] 本 书 撰 稿 时 ，Rhino 还 未 开始 支持 生成 器 表达 式 。 

LIIE4X 是 由 ECMA-357 规 范 定义 的 ， 可 以 从 这 里 碍 看 官方 文档 : 




























































































http:/www.ecma-international.org/publications/standards/Ecma-357.htm。 


第 12 章 ”服务 器 疹 JavaScript 


前 面 的 章节 已 经 详细 介绍 了 JavaScript 语 言 核 心 ， 我 们 即将 开始 本 书 
的 第 二 部 分 ， 该 部 分 会 介绍 JavaScript 仍 入 Web 浏 览 器 的 原理 ， 并 涵盖 庞 
杂 的 客户 端 JavaScript API。 可 以 说 JavaScript 是 基于 Web 的 编程 语言 ， 
为 绝 大 部 分 JavaScript 代 码 是 为 Web 浏 览 器 而 编写 。 但 是 作为 一 门 高 效 和 
通用 的 语言 ，JavaScript 理 所 当然 能 用 于 其 他 编程 工作 。 所 以 在 过 渡 到 服 
务 端 JavaScript 之 前 ， 我 们 先 快速 了 解 一 下 另外 两 种 JavaScript 伦 入 。 
Rhino 是 基于 Java 的 JavaScript 解 析 器 ， 实 现 了 通过 JavaScript 程 序 访问 整 
个 Java API，12.1 节 将 会 介绍 它 。Node 山 是 Google 的 V8 JavaScript 解 析 器 
的 一 个 特别 版 本 ， 它 在 底层 绑 定 了 POSIX (Unix) API， 包 括 文 件 、 进 
程 、 流 和 套 接 字 等 ， 并 侧重 于 异步 JO、 网 络 和 HTTP。12.2 节 将 会 介绍 
它 。 











本 章 标 题 表 明 本 章 是 关于 “服务 器 端 ” 的 JavaScript，Node 和 Rhion 常 
用 于 创建 脚本 服务 占 。 但 “服务 器 ”这 个 词 也 意味 着 “Web 浏 览 器 之 外 的 
任何 事情 ”。Rhino 程 序 能 使 用 Java 的 Swing 框架 创建 图 形 UI， 而 Node 上 
运行 的 JavaScript 程 序 可 以 像 shell 脚 本 那样 去 操作 文件 。 


本 章 非 常 简短 ， 仅 准备 重点 介绍 在 Web 浏 览 器 之 外 使 用 JavaScript 的 
一 些 方式 ， 不 会 尝试 全 面 介 绍 Rhino 和 Node， 第 三 部 分 也 不 会 包涵 这 里 
讨论 的 API; 并 且 不 会 详细 介绍 Java 平 台 或 POSIX ”API， 接 下 来 关于 
Rhion 的 章节 假定 读者 有 一 定 的 Java 经 验 ， 关 于 Node 的 章节 假定 读者 有 
一 定 的 底层 Unix API 的 经 验 。 


12.1 用 Rhino 脚 本 化 Java 


Rhino 是 一 种 用 Java 编 写 的 JavaScript 解 释 器 ， 其 设计 目标 是 借助 于 
强大 的 Java 平 台 API 实 现 轻松 编写 JavaScript 程 序 。Rhino 能 自动 完成 
JavaScript 原 生 类 型 的 Java 原 生 类 型 之 间 的 相互 转换 ， 因 此 JavaScript 脚 本 
可 以 设置 、 碍 询 Java 必 性， 并 调用 Java 方 法 。 

















获得 Rhino 


Rhino 是 Mozilla 开 发 的 免费 软件 ， 可 以 从 
http://www.mozilla.org/rhino/ 下 载 。Rhino 的 1.7r2 版 本 实现 了 ECMAScript 





3， 以 及 在 11 章 介绍 的 很 多 语言 扩展 。Rhino 软 件 比 较 成 熟 ， 不 会 经 常 发 
布 新 版 本 。 在 写本 章 时 ，1.7r3 的 预览 版 已 出 现在 源码 库 中 ， 它 实现 了 
ECMAScript 5 的 部 分 内 容 乌 。Rhino 打 包 为 JAR 文 件 发 布 ， 可 以 从 使 用 下 
面 这 行 命令 开始 探索 之 旅 : 





java-jar rhino1 7R2/js.jar program.js 





如 果 省 略 program.js，Rhino 会 开启 一 个 交互 的 shell 界 面 ， 它 对 尝试 
简单 或 单行 的 程序 比较 有 用 。 


Rhino 定 义 了 少量 重要 的 全 局 函数 ， 不 过 它们 都 不 是 JavaScript 的 核 
心 组 成 部 分 : 














// 特 定 于 构 入 的 全 局 函数 : 输入 help( ) 获 取 更 多 的 rhino 提 示 
print(x);// 全 局 输出 函数 ， 将 内 容 输 出 到 控制 台 
version(170);// 告 诉 Rhino 需 要 使 用 JS 1.7 的 语言 特性 
load(filename,... ) ; /7 加 载 并 执行 1 个 或 多 个 JavaScript 代 码 文件 
readFile(file);// 读 取 文本 文件 ， 并 以 字符 串 的 形式 返回 内 容 
readUrli(url);// 读 取 URL 的 原文 内 容 ， 并 以 字符 串 的 形式 返回 内 容 
spawn(f);// 运 行 f( ) 或 者 在 一 个 新 线程 中 加 载 执 行文 件 f 
runCcommand(cmd, [args...]);// 使 用 0 或 多 个 命令 行 参数 来 运行 系统 命令 
quit()// 退 出 Rhino 
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注意 printO 函 数 : 在 本 节 我 们 将 用 它 取代 console.log()。Rhino 会 将 
Java 包 和 类 表示 成 JavaScript 对 象 : 














// 全 局 变量 Packages 是 Java 包 层次 结构 的 根 

Packages .any.package.name// 任 何 来 自 Java CLASSPATH 的 包 
java.1lang// 全 局 变量 java 是 Packages .java 的 短 名 
javax.swing//javax 是 Packages .javax 的 短 名 

// 类 : 能 像 包 的 属性 一 样 存 取 

var System=java.1lang.System; 

var JFrame=javax.swing.JFrame; 

















由 于 Rhino 把 包 和 类 表示 为 JavaScript 对 象 ， 因 此 可 以 将 它们 赋值 给 
变量 从 而 得 到 相应 的 短 名 。 如 果 愿 意 ， 也 可 以 用 更 正式 的 方式 导入 它 
们 : 








var ArrayList=java.util.ArrayList;// 为 类 创建 短 名 
importclass(java.util.HashMap);// 其 等 同 于 : var HashMap=java.util.HashMap 
// 使 用 importPackage( ) 导 入 包 ( 惰 性 地 ) 

// 不 要 导入 java.1lang: 太 多 的 名 字 和 JavaScript 全 局 变量 有 冲突 



































importPackage(java.util); 

importPackage(java.net) ;// 另 一 技术 : 传 入 任意 数量 的 类 和 包 给 JavaImporter() 
// 并 在 with 语句 中 使 用 它 返 回 的 对 象 
var guipkgs=JavaImporter(java.awt,]java.awt.event,Packages.javax. swing); 
with(guipkgs){/* 这 里 定义 Font、ActionListener 和 JFrame 等 类 */ 

} 
























































Java 类 能 使 用 new 进 行 实例 化 ， 就 像 JavaScript 类 一 样 : 








// 对 象 : 使 用 new 实 例 化 Java 类 
var f=new java.io.File("/tmp/test");// 我 们 随后 将 使 用 这 些 对 象 
var out=new java.io.Filewriter(f); 








Rhino 让 JavaScript 的 instanceof 运 算 符 能 用 于 Java 对 象 和 类 : 





f instanceof java.io.File//=>true 
out instanceof java.io.Reader//=>false: 它 是 Writer 而 非 Reader 
out instanceof java.io.Closeable//=>true:wWriter 实 现 CLloseab1le 











如 你 所 见 ， 在 之 前 的 对 象 实例 化 示例 中 ，Rhino 人 允许 把 值 传 给 Java 
构造 函数 ， 并 将 构造 函数 的 返回 值 赋 给 JavaScript 变 量 。 (注意 ， 在 这 个 
例子 中 Rhino 执 行 了 隐 式 类 型 转换 JavaScript 字 符 串 "/type/test" 自 动 转换 
成 Java 的 java.lang.String 值 。) Java 方 法 更 像 Java 构 造 函 数 ， 而 Rhino 人 允许 
JavaScript 程 序 调用 Java 方 法 : 





// 静 态 Java 方 法 工作 类 似 JavaScript 函 数 
java.lang.System.getProperty("java.version")// 返 回 Java 版 本 
var isDigit=java.lang.Character .isDigit;// 把 静态 方法 赋值 给 变量 
isDigit("2")//= 之 true: 阿 拉 伯 数字 2 

// 调 用 Java 对 象 f 的 实例 方法 ，out 已 经 在 前 面 创建 

out .write("Hello World\n"); 

out.close( ); 

var len=f.length(); 



























































Rhino 也 允许 JavaScript 代 码 查 询 、 设 置 Java 类 的 静态 字段 和 Java 对 象 
的 实例 字段 。Java 类 通常 利用 getter 和 setter 方 法 避免 定义 公共 字段 。 当 
getter 和 setter 方 法 存在 时 ，Rhino 将 其 显示 为 JavaScript 的 属性 : 





// 读 取 Java 类 的 静态 字段 

var stdout=java.lang.System.out;//Rhino 把 getter 和 setter 方 法 映射 到 单个 JavaScript 属 性 
f.name//=>"/tmp/test": 调 用 f.getName() 

f.directory//=>false: 调 用 f.isDirectory() 









































Java 人 允许 重 载 方法 ， 它 们 名 字 相 同 但 签名 不 同 。 一 般 ，Rhino 能 根 
据 传 递 的 参数 类 型 判断 出 所 要 调用 方法 的 版 本 。 不 过 偶尔 也 需要 通过 名 
字 和 签名 来 明确 识别 方法 : 











// 假 设 Java 对 象 O 有 一 个 名 为 f( ) 的 方法 ， 它 接受 int 或 fLoat 参 数 
// 在 JavaSscript 中 ， 必 须 明确 指定 签名 

o['f(int)'](3);// 调 用 int 方 法 
o[ 'f(float)'](Math.PI);// 调 用 float 方 法 















































使 用 for/in 循 环 能 裔 历 Java 类 和 对 象 的 方法 、 字 上 段 和 属性 





importClass(java.lang.System); 

for(var m in System)print(m);// 输 出 java.1lang.System 的 静态 成 员 
for(m in 下 )print(m);// 输 出 java.io.File 的 实例 成 员 

// 注 意 不 能 ] 这 种 方法 枚 举 包 中 的 类 

for(c in java.lang)print(c);// 无 法 工作 






































Rhino 人 允许 J a 获取 、 设 置 Java 数 组 的 元 素 ， 就 像 它们 是 
JavaScript 数 组 那样 。 当 然 ，Java 数 组 和 JavaScript 数 组 并 不 完全 一 致 : 
Java 数 组 长 度 固 定 、 元 素 类 型 统一 ， 但 不 具备 像 slice() 这 样 的 JavaScript 
方法 。 由 于 没有 现成 的 JavaScript 语 法 可 供 Rhino 扩 展 J avaScript 程 序 从 而 
创建 新 的 Java 数 组 ， 因 此 必须 使 用 java.lang.reflect.Array 类 来 实现 : 








分 别 创建 一 个 长 度 为 19 的 字符 串 数组 和 一 个 长 度 为 128 字 节 的 数组 
var words=java.lang.reflect.Array.newInstance(java.lang.Sstring, 10); 
a bytes=java.1lang.reflect.Array.newInstance(java.lang.Byte.TYPE,128);// 一 旦 创建 
了 数组 ， 就 能 像 JavaScript 数 组 一 样 使 用 它们 
ee i=0;i<bytes,.length;i++)bytes[i]=i; 









































Java 编 程 经 常 涉及 实现 接口 ， 这 在 GUI 编 程 中 很 常见 ， 每 个 事件 处 
理 程序 都 必须 实现 事件 监听 接口 ， 接 下 来 的 例子 将 演示 如 何 实现 Java 事 
件 监 听 接 口 : 




















// 接 口 : 如 下 所 示 实 现 接口 

var handler=new java.awt .event,.FocusListener({ 

focusGained:function(e){print("got focus");}, 

focusLost:function(e){print("lost focus");} 

});// 用 同样 的 方式 扩展 抽象 类 

var handler=new java.awt.event .WindowAdapter({ 

windowClosing: funct on(e) java. lang.System.exit(0);} 

} ) ; // 当 接口 只 有 一 个 方法 ， 可 以 使 用 一 个 函数 取而代之 

button. addAt CIOnL Is tener (FUNCEion(el orn uoteon clicked");});// 如 果 接 口 或 抽象 类 的 
所 有 方法 都 有 相同 的 签名 

// 则 可 以 使 用 一 个 单独 的 函数 作为 接口 的 实现 














































































































// 且 Rhino 将 把 方法 名 作为 最 后 一 个 参数 传 入 
frame.addwindowListener(function(e,name)t{ 
if(name==="windowClosing")java.lang.System.exit(0); 

了 ) ;// 如 果 需 要 一 个 对 象 实现 多 重 接口 ， 则 使 用 JavaAdapter 

var o=new JavaAdapter(java.awt.event.ActionListener, java.lang.Runnable,{ 
run:function(){},// 实 现 Runnable 
actionPerformed:function(e){}// 实 现 ActionListener 


}); 
































当 Java 方 法 抛 出 异常 ，Rhino 将 其 作为 JavaScript 异 常 传递 。 通 过 
JavaScript 错 误 对 象 的 javaException 属 性 可 以 获取 原始 的 Java 
java.lang.Exception 对 象 : 





try{ 
java.lang.System.getProperty(null);//null 不 是 合法 的 参数 


catch(e){//e 是 JavaScript 异 常 
print(e.javaException);// 它 包含 一 个 java.lang.NullPointerException 异 常 


} 





最 后 ， 必 须 注意 Rhino 的 类 型 转换 。Rhino 会 按 需 要 自动 转换 原始 数 
字 、 布 尔 值 和 null。Java 的 char 类 型 被 当做 JavaScript 数 字 对 待 ， 因 为 
JavaScript 没 有 字符 类 型 。JavaScript 字 符 串 能 自动 转换 成 Java 字 符 串 ， 但 
这 可 能 也 是 个 绊脚石 ， 因 为 像 java.lang.String 对 象 这 样 的 Java 字 符 串 不 能 
转换 回 JavaScript 字 符 串 。 注 意 前 面 出 现 过 的 这 行 代码 : 





var version=java.lang.System.getProperty("java.version"); 





调用 这 行 代码 后 ， 变 量 version 保 存 了 一 个 java.lang.String 对 象 。 这 
行 代码 的 行为 看 起 来 像 JavaScript 字 符 串 ， 其 实 区 别 巨大 。 首 先 ，Java 字 
符 串 有 length(0) 方 法 而 没有 length 属 性 。 其 次 ， 对 Java 字 符 串 进行 typeof 运 
算得 到 的 结果 是 "object"。 无 法 通过 调用 其 toString() 方 法 把 Java 字 符 串 转 
换 成 JavaScript 字 符 串 ， 因 为 所 有 的 Java 对 象 都 有 自己 的 toString0) 方 法 ， 
后 者 返回 java.lang.String。 为 了 把 Java 值 转换 成 字符 串 ， 请 将 它 传递 给 
JavaScript 的 String(0) 函 数 : 





var version=String(java.lang.System.getProperty("java.version")); 





Rhino 示 例 


示例 12-1 是 一 个 简单 的 Rhino 应 用 ， 它 演示 了 前 面 介绍 的 很 多 特性 
和 技术 。 本 示例 使 用 javax.swing GUI 包 、java. net 网 络 包 、 java. io 流 的 输 
入 /输出 (WO) 包 和 Java 的 多 线程 功能 实现 一 个 简单 的 下 载 管理 器 应 
用 ， 它 把 对 应 URL 的 文件 下 载 到 本 地 ， 并 在 下 载 时 显示 下 载 进度 - 图 
12-1 展 示 了 当 两 个 下 载 挂 起 时 应 用 的 大 致 样子 。 
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图 12-1 使 用 Rhino 创 建 的 GUI 
示例 12-1: 用 Rhino 实 现 的 下 载 管 理 器 应 用 





























* 使 用 简单 的 Java GUI 实 现下 载 管 理 器 应 用 



































// 导 入 Swing GUI 组 件 和 一 些 其 他 组 件 
importPackage(javax .swing); 
importClass(javax.swing.border.EmptyBorder); 
importClass(java.awt.event.ActionListener); 
importClass(java.net.URL); 
importClass(java.io.FileOutputStream); 
importClass(java.Lang.Thread);// 创 建 一 些 GUI 小 部 件 (widget) 
var frame=new JFrame("Rhino URL Fetcher");// 应 用 窗 体 

var urlfield=new JTextField(309);//URL 输 入 字段 
var button=new JButton("Download");// 开 始 下 载 的 按钮 
var filechooser=new JFileChooser();// 文 件 选择 对 话 框 
var row=Box.createHorizontalBox();// 用 于 放置 字段 和 按钮 的 方 框 
var c01l=Box.createVerticalBox();// 用 于 放置 数据 行 和 进度 条 
var padding=new EmptyBorder (3, 3, 3, 3);// 填 充 数 据 行 的 空白 
// 把 它们 组 装 一 起 并 显示 这 个 GUI 

row.add(urlfield);// 把 输入 字段 放 入 行 中 
row.add(button);// 把 按钮 放 入 行 中 
col.add(row);// 把 行 放 入 列 中 
frame.add(col);// 把 列 放 入 窗 体 中 
row.setBorder (padding);// 为 行 增加 一 些 空 
frame .pack();// 设 置 为 最 小 值 

frame .visible=true;// 设 置 窗 体 可 见 

// 当 窗 体 中 发 生 任何 事件 都 会 调用 这 个 函数 
frame.addwindowListener(function(e,name){f// 如 果 用 户 关 闭 窗 体 ， 退 出 这 个 应 用 
if(name==="windowClosing")//Rhino 加 入 了 name 参 数 
java.lang.System.exit(0); 

} ) ;// 当 用 户 单 击 按钮 时 ， 调 用 这 个 函数 
button.addActionListener(function(){ 

try{// 创 建 java.net .URL 表 示 源 URL 

//( 这 会 检查 用 户 的 输入 是 否 符合 语法 规则 ) 

var url=new URL(urlfield.text);// 告 诉 用 户 选 择 保 存 URL 内 容 的 文件 
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var response=filechooser .showSaveDialog(frame);// 如 果 单 击 Cance1 按 钮 ， 立 即 退出 
if(response!=JFilechooser.APPROVE_0PTION)return;// 和 否则 ， 获 取 java.io,.File 表 示 目 标 文件 
var file=filechooser.getSelectedFile();// 现 在 启动 一 个 新 线程 下 载 URL 
new java.lang.Thread(function(){download(url,file);}).start(); 





























} 

catch(e){// 如 果 出 现 错误 ， 显 示 一 个 对 话 框 
JOptionPane.showMessageDialog(frame,e.message, "Exception"， 
JOptionPane .ERROR_MESSAGE ) ， 
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} 

});// 使 用 java.net .URL 等 下 载 URL 的 内 容 ， 使 用 java.io.File 等 把 内 容 保存 到 一 个 文件 
// 在 JProgressBar 组 件 中 显示 下 载 进 度 

// 这 将 在 一 个 新 线程 中 调 
function download(ur]l,file)f{ 
try{// 每 次 下 载 一 个 URL 时 ， 我 们 会 添加 一 个 新 的 数据 行 到 窗 体 中 
// 数 据 行 中 会 显示 URL、 文 件 名 和 下 载 进度 
var row=Box.createHorizontalBox( );// 创 建 数 据 行 
row.setBorder(padding);// 填 充 它 的 空 
var label=url.toString()+":";// 显 示 URL 
row.add(new JLabel(label));// 在 Jlabel 中 
var bar=new JProgressBar(0,100);// 加 入 进度 条 
bar.stringPainted=true;// 显 示 文件 名 

bar .string=file.toString();// 在 进度 条 中 

row.add(bar );// 把 进度 条 加 入 新 的 行 中 

col.add(row);// 把 数据 行 加 入 列 中 

frame .pack( );// 调 整 窗 体 大 小 

// 我 们 不 知道 URL 的 大 小 ， 所 以 进度 条 是 动画 

bar .indeterminate=true;// 如 果 可 能 ， 立 即 连 接 服务 器 并 获取 URL 的 长 度 
var conn=url. openConnection(); // 得 到 java.net .URLConnection 
conn ,connect();// 连 接 且 等 待 连接 头 

var len=conn.contentLength;// 如 果 能 得 到 URL 长 度 就 设置 
if(len){// 如 果 长 度 已 知 ， 那 么 

bar .maximum=len;// 设 置 进 度 条 展示 

bar .indeterminate=false;// 下 载 的 百分比 
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} 

// 得 到 输入 和 输出 流 
var input=conn.inputStream;// 从 服务 器 读 取 字 

var output=new FileoutputStream(file)， 人 
// 创 建 4KB 的 数组 作为 输入 缓冲 区 
var buffer=java.lang.reflect.Array.newInstance(java.1lang.Byte.TYPE, 4096); 
var num; 

while( (num=input.read(buffer))!=-1){// 读 取 然 后 循环 至 EOF 

output .write(buffer, 0,num);// 把 字 节 写 入 文件 

bar .value+=num;// 更 新 进度 条 
































} 
output .close( );// 完 成 后 关闭 流 
input.close( ); 














} 

catch(e){// 如 果 发 生 错误 ， 在 进度 条 上 显示 错误 
if(bar)t{ 

bar .indeterminate=false;// 停 止 动画 
bar .string=e.toString();// 用 错误 取代 文件 名 
} 

} 

} 





























12.2 ”用 Node 实 现 异 步 /O 


Node 是 基于 C++ 的 高 速 JavaScript 解 释 器 ， 绑 定 了 用 于 进程 、 文 件 和 
网 络 套 接 字 等 底层 Unix API， 还 绑 定 了 HTTP 客户 端 和 服务 器 API。 除 了 
一 些 专门 命名 的 同步 方法 外 ，Node 的 绑 定 都 是 异步 的 ， 且 Node 程 序 默 
认 绝 不 阻 吉 ， 这 意味 着 它们 通常 具备 强大 的 可 伸缩 能 力 并 能 有 效 地 处 理 
高 负荷 。 由 于 API 是 异步 的 ， 因 此 Node 依 赖 事件 处 理 程序 ， 其 通常 使 用 
先 套 函数 和 闭 包 来 实现 呈 。 


本 节 重 点 介绍 Node 部 分 最 重要 的 API 和 事件 ， 但 这 些 文档 并 不 完 
整 。 请 到 http:/nodejs.org/apiy 查 看 Node 的 联机 文档 印 。 





获得 Node 


Node 是 免费 软件 ， 可 以 从 http://modejs.org 上 下 载 。 在 写本 章 时 ， 
Node 依 旧 处 于 活跃 开发 期 ， 不 过 尚 无 二 进 制版 本 一 一 你 必须 自己 获取 并 
编译 源码 。 本 节 的 例子 是 在 Node 0.4 版 本 下 编写 和 测试 的 名。 这 些 API 尚 
未 完全 确定 ， 但 这 里 介绍 的 基本 原则 在 未 来 不 会 有 太 多 改变 。 


Node 是 在 Google 的 V8 JavaScript 引擎 上 构建 而 成 。Node 0.4 使 用 的 
是 V8 的 3.1 版 本 ， 它 实现 了 除 严 格 模 式 之 外 的 全 部 ECMAScript 5。 


下 载 、 编 译 并 安装 Node 后 ， 可 以 使 用 如 下 命令 运行 Node 程 序 : 














node program.js 





我 们 之 前 从 printO 和 1]oad0 函 数 开始 介绍 Rhino。Node 也 有 类 似 函 
数 ， 只 是 名 字 不 同 : 








//Node 定 义 了 console.1og()， 可 以 像 在 浏览 器 中 那样 调试 代码 输出 
console.1og("Hel1lo Node" ) ;// 调 试 输出 到 控制 台 
// 使 用 require() 替 代 1oad () 
// 它 加 载 并 执行 (只 有 一 次 ) 命名 模块 ， 返 回 包含 其 导出 标识 符 (exported symbo1) 的 对 象 
var fs=require("fs");// 加 载 "fs" 模 块 ， 并 返回 其 API 对 象 


es 


































































































Node 在 其 全 局 对 象 中 实现 了 所 有 标准 的 ECMAScript 5 构造 函数 、 属 
性 和 函数 。 除 此 之 外 ， 它 也 支持 客户 端的 计时 器 函数 集 setTimeout()、 


setInterval()、clearTimeout() 和 clearInterval(): 








//1 秒 钟 后 输出 "Hello World" 


setTimeout(function(){console.1log("Hello World");},1000); 





客户 端的 全 局 函数 将 在 14.1 节 介绍 。Node 的 实现 与 Web 浏 览 器 的 实 
现 兼 容 。 


Node 在 process 名 字 空 间 中 定义 了 其 他 重要 的 全 局 属性 。 这 里 有 该 对 
象 的 一 些 属性 : 





























process,.version//Node 的 版 本 字符 串 信息 
process.argv//"node" 命 令 行 的 数组 参数 ，argv[0] 是 "node" 
process .env// 环 境 变 量 对 象 。 例 如 :process .env .PATH 
process .pid// 进 程 id 
process.getuid()// 返 回 用 户 id 
process.cwd( )// 返 回 当前 的 作 目 录 
process.chdir()// 改 变 目 录 
process.exit()// 退 出 (运行 shutdown 命 令 之 后 ) 













































































由 于 Node 的 函数 和 方法 都 是 异步 的 ， 因 此 当 它 们 等 竺 运算 完成 时 并 

不 生 阻 塞 非 阻 塞 方法 的 返回 值 无 法 返回 异步 运算 的 结果 给 你 。 如 果 

想 获取 结果 ， 或 想 知道 完成 运算 的 时 间 ， 当 结果 准备 好 或 完成 运算 〈 或 
发 生 错误 ) 时 ， 束 必须 提供 Node 能 调用 的 一 个 函数 。 在 某 些 情况 下 (如 
在 调用 前 面 出 现 的 setTimeoutO0 时 ) ， 只 须 简 单 地 把 函数 作为 参数 传 入 ， 
Node 会 适时 调用 它 。 在 另外 一 些 情 况 下 ， 则 可 以 利用 Node 的 事件 机 
制 。Node 对 象 产 生 事件 〈 称 为 事件 触发 右 (event emitter) ) 定义 on() 方 
法 来 注册 处 理 程序 。 当 传 入 参数 时 ， 将 事件 类 型 (一 个 字符 串 〉 作 为 第 

一 参数 ， 处 理 程序 函数 作为 第 二 参数 。 不 同 的 事件 类 型 传递 给 处 理 程序 
0 你 可 能 需要 得 疯 API 文 档 从 而 确切 了 解 如 何 编写 处 理 
旺 序 : 











emitter.on(name,f)/V/emitter 注 册 和 函数 处 理 name 事 件 

emitter.addListener(name,f)//addLinstener() 和 on( ) 是 同一 个 方法 
emitter.once(name, 下 )// 只 执行 一 次 ， 然 后 f 会 自动 删除 
emitter.listeners(name)// 返 回 事件 处 理 函 数组 成 的 数组 


emitter.removeListener(name,f)// 注 销 事件 处 理 程序 f 
emitter.removeAllListeners( name )// 移 除 name 事 件 的 所 有 处 理 程序 

































































前 面 介绍 的 process 对 象 是 一 个 事件 触及 器 ， 这 里 是 其 部 分 事件 的 处 
理 程序 示例 : 











//"exit" 事 件 在 Node 退 出 之 前 发 送 
process.on("exit", function(){console.1log("Goodbye");});// 如 果 注 册 了 任何 事件 处 理 程序 ， 














非 捕获 异常 都 会 产生 事件 ， 

// 和 否则 ， 蜡 常 仅 会 使 Node 输 出 错误 然后 退出 
process.on("uncaughtException",function(e){console.1log(Exception,e);});//POSIX 中 
诸如 SIGINT、SIGHUP 和 SIGTERM 等 信号 产生 事件 
process.on("SIGINT",function(){console.log("Ignored Ctrl-c");}); 












































Node 的 设计 目标 是 高 性 能 MO， 因 此 其 流 API 钟 被 用 到 。 当 数据 准备 
好 时 ， 可 读 流 会 触发 事件 。 在 下 面 的 代码 中 ， 假 设 s 是 在 其 他 地 方 得 到 
的 可 读 流 。 下 面 我 们 将 看 到 如 何 从 文件 和 网 络 套 接 字 中 得 到 流 对 象 : 








// 输 入 流 s 

.on("data" ,下 ) ;// 当 数据 可 用 时 ， 把 它 作 为 参数 传 给 f( ) 
.on("end", 下 );// 当 不 再 有 数据 达到 ， 在 文件 结束 (EOF》 时 会 触发 "end" 事 件 
.on("error", 下 );// 如 果 发 生 错 误 ， 把 异常 传递 给 f( ) 

.readable// 如 果 它 是 依旧 打开 的 可 读 流 ， 返 回 true 
.pause( );// 暂 停 "data" 事 件 。 例如， 为 了 限制 上 传 

.resume( ) ;// 再 次 恢 
// 如 果 想 把 字符 串 传 给 "data" 事 件 处 理 程序 ， 请 指定 编码 
s.setEncoding(enc);// 如 何 对 字 节 编码 : "utf8"、"ascii" 或 "base64" 
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可 写 流 比 可 读 流 的 核心 事件 少 。 使 用 write() 方 法 发送 数据 ， 当 所 有 
数据 写 入 完毕 后 使 用 end(0) 方 法 结束 流 。write0) 方 法 决 不 会 阻 囊 。 符 Node 
无 法 立即 写 入 数据 而 不 得 不 在 内 部 缓存 它 ， 则 write() 方 法 返回 false。 如 
果 你 想 知道 Node 何 时 刷新 缓冲 区 并 确保 数据 实际 上 已 写 入 ， 那 么 请 注 
册 "drain" 事 件 的 处 理 程 序 : 














// 输 出 流 s 
.Write(buffer);// 写 入 二 进 制 数据 
.Write(string,encoding)// 写 入 字符 串 数 据 ， 默 认 编 码 是 "utf-8" 
.end( )// 结 束 流 
.end(buffer);// 写 入 最 后 的 二 进 制 数据 块 并 结束 
.end(str,encoding)// 写 入 最 后 的 字符 串 并 结束 所 有 流 
.writeable;// 如 果 流 依旧 打开 且 可 写 入 ， 返 回 true 
.on("drain",f)// 当 内 部 缓冲 区 为 空 ， 调 用 f( ) 
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如 之 前 代码 所 示 ，Node 的 流 能 处 理 二 进 制 数 据 和 文本 数据 。 文 本 传 
输 使 用 的 是 普通 JavaScript 字 符 串 ， 字 节 使 用 Node 特 定 的 缓冲 区 来 处 
理 。Node 的 绥 冲 区 是 有 国定 长 度 的 类 数组 对 象 ， 其 元 素数 量 必须 在 0~ 
255 之 间 。Node 程 序 通常 把 缓冲 区 作为 不 透明 的 数据 块 来 对 符 ， 将 它们 
从 一 个 流 中 读 取 然后 写 入 另 一 个 。 但 缓冲 区 中 的 字 节 能 够 像 数 组 元 素 一 
样 存 取 ， 其 对 应 的 方法 有 从 一 个 缓冲 区 复制 二 进 制 数据 到 男 一 个 、 获 取 
基础 缓冲 区 的 切片 (slice〉、 使 用 指定 编码 把 字符 串 写 入 绥 冲 区 和 把 绥 
冲 区 或 部 分 绥 冲 区 解码 回 字 符 串 : 














var bytes=new Buffer(256) ;// 创 建 一 个 256 字 节 的 新 缓冲 区 
for(var i=0;i<bytes.length;i++)// 通 过 索引 值 进行 遍历 
bytes[i]=i;// 设 置 缓冲 区 的 每 个 元 素 
var end=bytes.slice(240, 256);// 为 这 个 缓冲 区 创建 一 个 新 的 视图 
end[9]//=>240: end[0] 就 是 pytes[240] 
end[90]=0;// 修 改 这 个 切片 的 一 个 元 素 
bytes[240]//=>0: 原始 缓冲 区 也 修改 了 

var more=new Buffer(8);// 创 建 一 个 新 的 独立 缓冲 区 
end.copy(more,9,8,16);// 把 end[] 的 第 8 一 15 元 素 复 制 到 more[] 中 
more[0]//=>248 

// 缓 冲 区 也 可 以 实现 二 进 制 <=> 文 本 的 转换 

// 合 法 编码 是 "utf8"、"ascii" 和 "base64"， 默 认 编码 是 "utf8" 

var buf=new Buffer("2nr", "utf8");// 使 用 UTF-8 把 文本 编码 为 字 节 
buf ,length//=>3 个 字符 占 4 个 字 节 
buf.toString()V/=>"2Tr": 返回 文本 

buf=new Buffer(10) ;// 开 始 一 个 新 的 固定 长 度 的 缓冲 区 
var len=buf.write("nr2",4);// 从 第 4 个 字 节 开始 写 入 文本 
buf.tostring("utf8",4,4+len)//="nr2" :解码 一 段 字 节 
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Node 的 文件 和 文件 系统 API 位 于 "fs" 模 块 中 : 








var fs=require("fs");// 加 载 文 件 系统 API 





这 个 模块 提供 了 其 绝 大 部 分 方法 的 “同步 版 本 。 任 何 名 字 
以 "Sync" 结 尾 的 方法 都 是 一 个 阻塞 方法 ， 它 返回 一 个 值 或 抛 出 一 个 异 
常 。 不 以 "Sync" 结 尾 的 文件 系统 方法 都 是 非 阻 塞 的 方法 ， 它 们 会 把 结果 
或 错误 传 给 指定 的 回调 函数 。 下 面 的 代码 展示 了 如 何 使 用 阻塞 方法 读 取 
文本 文件 、 如 何 使 用 非 阻 塞 方法 读 取 二 进 制 文件 : 























// 同 步 读 取 文 件 ， 通 过 传递 编码 获得 文本 而 非 字 节 
var text=fs.readFileSync("config.json", "utf8");// 异 步 读 取 二 进 制 文件 ， 通 过 传递 函数 获得 数 





























fs.readFile("image.png",function(err,buffer){ 
if(err)throw err;// 如 果 出 现任 何 错误 
process(buffer); // 文 件 内 容 在 缓冲 区 中 

}); 





























类 似 地 ， 存 在 用 来 写 文件 的 writeFile() 和 writeFileSync() 函 数 : 





fs.writeFile("config.json",JSON.stringify(userprefs)); 





前 面 展 示 的 函数 将 文件 内 容 看 待 为 单个 字符 串 或 缓冲 区 。Node 也 和 定 
义 了 读 写 文件 的 流 API， 下 面 这 个 函数 实现 了 文件 复制 : 

















// 用 流 API 复 制 文件 

// 若 想 知道 何 时 完成 ， 请 传递 回调 函数 

function fileCopy(filenamel1,filename2, done){ 

var input=fs.createReadStream(filename1);// 输 入 流 

var output=fs.createwritestream(filename2);// 输 出 流 
input.on("data", function(d)f{output.write(d);});// 把 输入 复制 到 输出 
input.on("error'" ,function(err){fthrow err;});// 提 示 错 误 
input.on("end",function(){// 当 输入 结束 

output .end() ;// 关 闭 输出 
if(done)done();// 并 通知 回调 函数 
}); 

} 





















































"fs" 模 块 还 包括 大 量 的 方法 ， 用 于 列 出 文件 目录 、 碍 询 文件 属性 
等 。 下 面 的 Node 程 序 使 用 同步 的 方法 列 出 一 个 目录 的 内 容 ， 并 显示 文件 
大 小 和 修改 日 期 





#!/usr/local/bin/node 

var fs=require("fs"), path= -require("path");// 加 载 需 要 的 模块 
var dir=process.cwd();// 当 前 目录 
if(process.argv.length>>2)dir=process.argv[2];// 或 来 自命 令 行 
var files=fs.readdirSync(dir);// 读 取 目 录 内 容 

process.stdout .write("Name\tSize\tDate\n");// 输 出 头 
files.forEach(function(filename){// 获 取 每 个 文件 名 

var fullname=path.join(dir,filename);// 拼 接 目 录 和 文件 名 

var stats=fs.statSync(fullname);// 获 取 文件 属性 
if(stats.isDirectory())filename+="/";// 标 记 子 
process. stdout. write(filename+"\t"+// 输 出 文件 名 + 
stats.size+"\t"+// 文 件 大 小 + 
stats.mtime+"\n");// 修 改 时 间 

}); 





















































注意 上 面 第 一 行 的 注释 #!”*。 这 是 Unix 中 的 "shebang" 注 释 ， 常 用 于 
使 半 本 文件 被 指定 的 某 种 语言 解释 器 自动 执行 1 当 像 这 样 的 代码 出 现 
在 文件 的 第 一 行 时 ，Node 会 忽略 它们 。 


'net" 模 块 是 用 于 基于 TCP 网 络 的 API。 (用 于 基于 数据 包 网 络 的 模 
块 请 看 "dgram"。) 下 面 是 Node 中 一 个 非常 简单 的 TCP 服 务 器 : 




















//Node 中 简单 的 TCP 回 显 服务 器 : 它 监 听 2006 端 口上 的 连接 ， 

// 并 把 客户 端的 数据 回 显 给 它 

var net=require( ' net ')， 

var Server=net .createServer() 

Server ,1isten(2000,function( ){tconsole,.1og("Listening on port 2000");}); 
Server .on("connection'" ,function(stream){ 

console.log("Accepting connection from",stream.remoteAddress); 
stream.on("data",function(data){stream.write(data);}); 
stream.on("end",function(data){console.1log("Connection closed");}); 


}); 









































除了 基础 的 "net" 模 块 ，Node 使 用 "http" 模 块 内 置 文 持 HTTP 协 议 。 接 
来 的 示例 可 以 说 明 更 多 细 市 。 


12.2.1 ” Node 示例: HTTP 服务器 





示例 12-2 是 一 个 基于 Node 的 简单 HTTP 服 务 。 它 能 处 理 当 前 目录 的 
文件 ， 并 能 实现 两 种 特殊 的 URL。 它 使 用 了 Node 的 "http" 模 块 ， 也 会 使 
用 到 前 面 提 到 的 文件 和 流 API。 第 18 章 的 示例 18-17 是 一 个 与 之 类 似 的 
HTTP 服 务 器 示例 。 


示例 12-2: 基于 Node 的 HTTP 服 务 器 














// 这 是 一 个 简单 的 Node HTTP 服 务 器 ， 能 处 理 当 前 目录 的 文件 ， 
// 并 能 实现 两 种 特殊 的 URL 用 于 测试 
// 用 http://Localhost :8000 或 http://127.9.0.1:8000 连 接 这 个 服务 器 
// 首 先 ， 加 载 所 有 要 用 的 模块 
var http=require('http');//HTTP 服 务 器 API 
var fs=require('fs');// 用 于 处 理 本 地 文件 
var server=new http.Server();// 创 建新 的 HTTP 服 务 器 
server ,1isten(8000) ;// 在 端口 8900 上 运行 它 
//Node 使 用 "on( )" 方 法 注册 事件 处 理 程 序 ， 
// 当 服务 器 得 到 新 请 求 ， 则 运行 函数 处 理 它 
server .on("request",function(request,response){// 解 析 请 求 的 URL 
var url=require('url').parse(request.url);// 特 殊 URL 会 让 服务 器 在 发 送 响 应 前 先 等 待 
// 此 处 用 于 模拟 缓慢 的 网 络 连 接 
if(url.pathname==="/test/delay"){// 使 用 查询 字符 串 来 获取 延迟 时 长 ， 或 者 2000 毫 秒 
var delay=parseInt(ur1.query)|112000;// 设 置 响应 状态 码 和 头 
response.writeHead(200, {"Content-Type":"text/plain;charset=UTF-8"});// 立 即 开始 编写 
响应 主体 
response.write("Sleeping for"+delay+"milliseconds...");// 在 之 后 调用 的 另 一 个 函数 中 完成 
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响应 
setTimeout(function()t{ 
response.write("done."); 
response.end( ); 
},delay); 
} 





// 若 请 求 是 "/test/mirror"， 则 原文 返回 它 

// 当 需要 看 到 这 个 请 求 头 和 主体 时 ， 会 很 有 用 

else if(url.pathname==="/test/mirror"){// 响 应 状态 和 头 

response.writeHead(200, {"Content-Type":"text/plain;charset=UTF-8"});// 用 请 求 的 内 容 
开始 编写 响应 主体 

response.write(request.method+""+request .uril+ 

"HTTP/"+request.httpVersion+"\r\n");// 所 有 的 请 求 尖 

for(var h in request,headers){ 

response.write(h+":"+request.headers[h]+"\r\n"); 

} 

response.write("\r\n");// 使 用 额外 的 空白 行 来 结束 头 

// 在 这 些 事 件 处 理 程序 函数 中 完成 响应 : 

// 当 请 求 主体 的 数据 块 完成 时 ， 把 其 写 入 响应 中 

request.on("data", function(chunk){response.write(chunk);});// 当 请 求 结束 时 ， 响 应 也 完成 

request.on("end",function(chunk){response.end();}); 




















































































































} 
// 否 则 ， 处 理 来 自 本 地 目录 的 文件 






































else{// 获 取 本 地 文件 名 ， 基 于 其 扩展 名 推测 内 容 类 型 

var filename=url.pathname.substring(1);// 去 掉 前 导 "/" 

var type; 
switch(filename.substring(filename.lastIndexof(".")+1)){// 扩 展 名 
case"html": 

case"htm":type="text/html;charset=UTF-8";break; 
case"js":type="application/javascript;charset=UTF-8";break; 
case"css":type="text/css;charset=UTF-8";break; 
case"txt":type="text/plain;charset=UTF-8";break; 
case"manifest":type="text/cache-manifest;charset=UTF-8";break; 
default:type="application/octet-stream";break; 





} 

// 异 步 读 取 文 件 ， 并 将 内 容 作为 单独 的 数据 块 传 给 回调 函数 

// 对 于 确实 很 大 的 文件 ， 使 用 流 API fs.createReadStream( ) 更 好 
fs.readFile(filename,function(err,content){ 
if(err){// 如 果 由 于 某 些 原因 无 法 读 取 该 文件 
response .writeHead(404,{// 发 送 404 未 找到 状态 码 
"Content-Type":"text/plain;charset=UTF-8"}); 
response.write(err.message);// 简 单 的 错误 消息 主体 
response.end();// 完 成 




































































} 

else{// 否 则 ， 若 读 取 文件 成 功 

response .writeHead(209,// 设 置 状态 码 和 MIME 类 型 
{"Content-Type":type}); 
response.write(content);// 把 文件 内 容 作为 响应 主体 发 送 
response.end();// 完 成 

} 

}); 


} 
}); 



































12.2.2” Node 示例 : HTTP 客 户 端 工具 模块 


示例 12-3 使 用 "http" 模 块 定义 了 用 于 发 送 HTTP ”GET 和 POST 请 求 的 
工具 函数 。 本 例 则 是 基于 "httputils" 模 块 ， 在 代码 中 应 该 这 样 使 用 : 











var httputils=require("./httputils");// 注 意 没 有 ".js" 后 级 
httputils.get(url,function(status,headers, body){console.1og(body);}); 











require() 消 数 并 非 用 普通 的 eval0 函 数 来 执行 模块 代码 。 模 块 十 在 一 
个 特殊 的 环境 中 执行 ， 以 便 它们 不 能 定义 任何 全 局 变量 或 更 改 其 他 全 局 
命名 空间 。 这 个 特殊 的 模块 执行 环境 总 是 包含 一 个 叫 exports 的 全 局 对 
象 ， 横 块 通过 在 这 个 对 象 中 定义 属性 来 导出 它们 的 APID。 


示例 12-3: Node"httputils" 模 块 





























// 
// 基 于 Node 的 "httputils" 模 块 
// 











// 为 指定 的 URL 实 现 一 个 异步 HTTP GET 请求， 

// 并 将 HTTP 状 态 、 头 和 响应 主体 传递 给 指定 的 回调 函数 

// 注 意 这 里 是 如 何 通过 exports 对 象 导出 这 个 方法 的 
exports.get=function(url,callback){// 解 析 URL， 获 取 所 需 的 信息 
url=require('url').parse(url]l); 

var hostname=url.hostname, port=ur].port||80; 

var path=url.pathname, query=ur1.query; 
if(query)path+="?"+query;// 实 现 一 个 简单 的 GET 请 求 

var client=require("http").createClient(port,hostname); 
var request=client.request("GET",path,t{ 
"Host":hostname//Request headers 

}); 

request .end( );// 该 函数 用 于 处 理 到 达 的 响应 
request.on("response",function(response){// 设 置 编码 ， 使 返回 的 主体 成 为 文本 而 非 字 节 
response.setEncoding("utf8");// 一 旦 响应 主体 达到 ， 保 存 它 
var body="" 

response.on("data", function(chunk)f{body+=chunk;});// 响 应 完成 时 ， 调 用 这 个 函数 
response.on("end",function(){ 
if(callback)callback(response.statusCode,response.headers, body); 


}); 


}); 

};// 以 数据 作为 请 求 主体 的 简单 HTTP POST 请 求 
exports.post=function(url,data,callback){// 解 析 URL， 获 取 所 需 的 信息 
url=require('url').parse(ur]l); 

var hostname=url.hostname, port=url.port||80; 

var path=url.pathname, query=url1.query; 
if(query)path+="?"+query;// 判 断 将 要 作为 请 求 主体 发 送 的 数据 类 型 

var type; 
if(data==null)data=""; 
if(data instanceof Buffer)// 二 进 制 数 据 
type="application/octet-stream"; 

else if(typeof data==="string")// 字 符 串 数据 
type="text/plain;charset=UTF-8"; 

else if(typeof data==="object"){// 名 / 值 对 
data=require("querystring").stringify(data); 
type="application/x-www-form-urlencoded"; 





















































































































































} 

// 生 成 POST 请 求 ， 其 中 包括 请 求 主体 
var client=require("http").createClient(port,hostname); 
var request=client.request("POST",path,t 
"Host":hostname, 

"Content-Type":type 

}); 

request .write(data);// 发 送 请 求 主体 

request .end( ); 
request.on("response",function(response){// 处 理 响应 
response.setEncoding("utf8");// 假 设 它 是 文本 

var body=""// 用 于 保存 响应 主体 
response.on("data", function(chunk){body+=chunk;}); 
response.on("end", function(){// 完 成 后 ， 调 用 回调 函数 
if(callback)callback(response.statusCode,response.headers, body); 
}); 

}); 


了 

































































[LINode 是 其 官方 名 字 ，Node.js 是 非 官方 名 字 ， 用 于 和 其 他 的 node 区 
分 ， 具 体内 容 见 https://www./github.com/joyent/node/wikWFAQ。 
[2]1.7r3 版 本 已 经 在 2011.06.03 正 式 发 布 ， 具 体内 容 见 


http:/www.mozilla.org/rhino/download.html。 
[BB] 和 客户 站 的 J 0 高 度 地 有 异步 和 基于 事件 ， 如 条 你 恋 过 本 书 第 
二 部 分 ， 且 在 客户 端 中 运行 过 JavaScript 程 序 ， 就 会 很 容易 理解 本 章 的 例 


人 

[4] 大 家 也 可 以 查看 CNode 社 区 组 织 翻译 的 Node 中 文 文档 ， 
http://cnodejs.org/cman/。 

[5] 在 翻译 本 书 时 ，Node 发 布 了 0.4.12 稳 定 版 和 0.5.7 不 稳定 版 。Node 的 版 
本 控制 方案 是 偶数 版 本 稳定 ， 奇 数 版 本 不 稳定 ， 稳 定 版 本 只 会 修复 

bug， 不 会 改变 JavaScript API 和 扩展 API， 在 稳定 版 本 分 文 升级 之 后 不 需 
要 重新 生成 模块 。 

[6] 关 于 shebang 的 详细 解释 请 查看 http://zh. We ee Shebang。 
[7JINode 实 现 了 CommonJS 模 块 约定 ， 具 体内 容 请 参 

ttn wie otronie one Des/ riodil es 1.0/。 




















第 二 部 分 “客户 端 JavaScript 

本 书 第 二 部 分 涵盖 第 13 一 22 童 ， 主 要 讲解 JavaScript 是 如 何在 Web 浏 
览 器 中 实现 的 。 这 些 章 节 介 绍 了 大 量 的 脚本 宿主 对 象 ， 这 些 对 象 可 以 表 
示 浏 览 喜 窗口 、 文 档 树 和 文档 的 内 容 等 。 这 些 章 节 同 样 涵 凋 重要 的 Web 
应 用 所 需 的 网 络 编程 API、 本 地 存储 和 检索 数据 、 男 图 等 。 

第 13 章 ”Web 浏览 器 中 的 JavaScript 

第 14 章 ” Window 对 象 

第 15 章 ”脚本 化 文档 

第 16 章 ”脚本 化 CSS 

第 17 半 ”事件 处 理 

第 18 章 ”脚本 化 HTTP 


第 19 半 ”jQuery 类 库 





第 20 章 ”客户 端 存储 
第 21 章 ”多 媒体 和 图 形 编程 


第 22 章 HTML5 API 


第 13 草 Web 浏 贤 占 中 的 JavaScript 


本 书 第 一 部 分 介绍 了 JavaScript 语 言 核 心 。 第 二 部 分 开始 转 同 Web 浏 
览 器 中 JavaScript 的 讨论 ， 通 单 称 为 客户 端 JavaScript。 迄 今 为 止 ， 我 们 
所 看 到 的 大 部 分 例子 虽然 是 合法 的 JavaScript 代 码 ， 但 是 却 没 有 特定 的 上 
下 文 ， 也 就 是 说 它们 不 过 是 一 些 运行 在 不 明 环 境 中 的 代码 请 段 。 本 章 提 
供 了 一 个 可 以 运行 JavaScript 的 上 下 文 。 


在 开始 讨论 JavaScript 之 前 ， 有 必要 先 思考 一 下 在 Web 浏 览 器 中 是 如 
何 呈 现 Web 页 面 的 。 一 些 呈现 静态 信息 的 页 面 ， 叫 做 文档 (document) 
(由 于 加 入 了 JavaScript， 静 态 页 面 的 信息 看 上 去 会 动 来 动 去 ， 但 信息 本 
身 是 静态 的 )， 相 对 于 文档 来 说 ， 其 他 Web 页 面 则 感觉 上 更 像 是 应 用 。 
如 果 需 要 的 话 ， 这 些 页 面 可 以 动态 载 入 新 的 信息 ， 因 此 看 起 来 更 加 图 形 
化 ， 而 非 文本 化 ， 并 且 它 们 可 以 进行 离线 操作 ， 以 及 保存 数据 到 本 地 ， 
以 便 再 次 访问 时 进行 状态 恢复 。 此 外 ， 还 有 其 他 Web 页 面 处 于 文档 和 应 
用 的 中 间 ， 结 合 了 两 者 的 特性 。 


本 章 以 客户 端 JavaScript 概 述 开 始 ， 包 括 一 个 简单 的 例子 ， 以 及 对 
JavaScript 在 Web 文 档 和 Web 应 用 中 角色 的 讨论 。 概 述 内 容 还 介绍 了 哪些 
内 容 在 后 续 音 节 中 会 有 ， 接 下 来 会 详细 解释 JavaScript 代 人 码 在 HITML 文 档 
中 怎 如 何 嵌 入 并 各行 的 ， 然后 还 会 介绍 兼容 性 、 可 访问 性 和 安全 性 等 问 
题 。 


13.1 客户 端 JavaScript 


Window 对 象 是 所 有 客户 端 JavaScript 特 性 和 API 的 主要 接 入 点 。 它 
表示 Web 浏 览 器 的 一 个 窗口 或 窗 体 ， 并 且 可 以 用 标识 符 window 来 引用 
巨 。Window 对 象 定义 了 一 些 属性 ， 比 如 ， 指 代 Location 对 象 的 location 
属性 ，Location 对 象 指定 当前 显示 在 窗口 中 的 URL， 并 人 允许 脚本 往 窗口 
里 载 入 新 的 URL: 























// 设 置 1ocation 属 性 ， 从 而 跳 转 到 新 的 Web 页 面 
window.location="http://www.oreilly.com/",; 














Window 对 象 还 定义 了 一 些 方 法 ， 比 如 alert()， 可 以 弹出 一 个 对 话 框 
用 来 显示 一 些 信息 。 还 有 setTimeout()， 可 以 注册 一 个 函数 ， 在 给 定 的 一 





段 时 间 之 后 触发 一 个 回调 : 








// 等 待 两 秒 ， 然 后 说 hello 
setTimeout(function(){alert("hello world");},2000); 





注意 上 面 的 代码 并 没有 显 式 地 使 用 window 属 性 。 在 客户 并 
JavaScript 中 ，Window 对 象 也 是 全 局 对 象 。 这 意味 着 Window 对 象 处 于 作 
用 域 链 的 顶部 ， 它 的 属性 和 方法 实际 上 是 全 局 变量 和 全 局 函数 。 
Window 对 象 有 一 个 引用 上 自身 的 属性 ， 叫 做 window。 如 果 需 要 引用 窗口 
对 象 本 身 ， 可 以 用 这 个 属性 ， 但 是 如 果 只 是 想 要 引用 全 局 窗口 对 象 的 属 
性 ， 通 常 并 不 需要 用 到 window。 


Window 对 象 还 定义 了 很 多 其 他 重要 的 属性 、 方 法 和 构造 孙 数 ， 参 
见 第 14 章 查看 完整 的 细节 。 


Window 对 象 中 其 中 一 个 最 重要 的 属性 是 document， 它 引用 
Document 对 象 ， 后 者 表示 显示 在 窗口 中 的 文档 。Document 对 象 有 一 些 
重要 方法 ， 比 如 getElementById0， 可 以 基于 元 素 id 属 性 的 值 返回 单一 的 
(表示 HTML 标 签 的 一 对 开始 /结束 标记 ， 以 及 它们 之 间 的 所 有 

人 


























// 查 找 id="timestamp" 的 元 素 
var timestamp=document .getElementById("timestamp"); 








getElementById() 返 回 的 Element 对 象 有 其 他 重要 的 属性 和 方法 ， 比 
如 允许 脚本 获取 它 的 内 容 ， 设 置 属性 值 等 : 









































// 如 果 元 素 为 空 ， 往 里 面 插入 当前 的 日 期 和 时 间 
if(timestamp .firstCchild==nu]J]) 
timestamp,. appendCchild(document ,createTextNode(new Date(),toString() ))， 
































查询 、 遇 历 和 修改 文档 内 容 的 方法 会 在 第 15 章 介绍 。 


每 个 Element 对 象 都 有 style 和 className 属 性 ， 人 允许 脚本 指定 文档 元 
素 的 CSS 样 式 ， 或 修改 应 用 到 元 素 上 的 CSS 类 名 。 设 置 这 些 CSS 相 关 的 
属性 会 改变 文档 元 素 的 呈现 : 








// 显 式 修 改 目 标 元 素 的 呈现 
timestamp.style.backgroundColor="yellow";// 或 者 只 改变 类 ， 让 样式 表 指 定 具 体内 容 
timestamp.className="highlight"; 









































第 16 章 会 介绍 style 和 className 属 性 ， 以 及 其 他 CSS 编 程 技 术 。 


Window、Document 和 Element 对 象 上 男 一 个 重要 的 属性 集合 是 事件 
处 理 程 序 相 关 的 属性 。 可 以 在 脚本 中 为 之 绑 定 一 个 函数 ， 这 个 函数 会 在 
某 个 事件 发 生 时 以 异步 的 方式 调用 。 事 件 处 理 程序 可 以 让 JavaScript 代 码 
修改 窗口 、 文 档 和 组 成 文档 的 元 素 的 行为 。 事 件 处 理 程 序 的 属性 名 是 以 
单词 "on" 开 始 的 ， 用 法 如 下 : 





























// 当 用 户 单 击 timestamp 元 素 时 ， 更 新 它 的 内 容 
timestamp .onclick=function(){fthis.innerHTML=new Date().toString();} 














Window 对 象 的 onload 处 理 程序 是 最 重要 的 事件 处 理 程序 之 一 。 当 显 
示 在 窗口 中 的 文档 内 容 稳定 并 可 以 操作 时 会 触发 它 。JavaScript 代 码 通 常 
封装 在 onload 事 件 处 理 程序 里 。 第 17 章 将 会 详细 讲述 事件 。 例 13-1 是 
onload 处 理 程序 的 演示 ， 并 展示 了 客户 端 JavaScript 的 实例 代码 ， 包 括 查 
询 文档 元 素 、 修 改 CSS 类 和 定义 事件 处 理 程序 。 这 个 例子 的 JavaScript 代 
码 是 放置 在 HTML 的 过 script 二 标签 之 内 的 ， 且 在 13.2 节 会 对 它 进行 解 
释 。 注 意 代码 里 的 一 个 函数 是 在 另 一 个 函数 里 定义 的 。 因 为 事件 处 理 程 
序 的 广泛 使 用 ， 使 得 侍 套 函数 在 客户 端 JavaScript 中 非常 普 氨 。 


例 13-1: 显示 内 容 的 简单 客户 端 JavaScript 








<IDOCTYPE html> 

<html> 

<head> 

二 style 二 /* 本 页 的 css 样 式 表 */ 
.reveal*{display:none;}/*class="reveal" 的 元 素 的 子 元 素 都 不 显示 */ 
.reveal* .handle{display:block;}/* 除 了 class="handle" 的 元 素 */ 
</style> 
<script> 之 // 所 有 的 页 面 逻 辑 在 onLload 事 件 之 后 启动 

window.onload=function( ){// 找 到 所 有 class 名 为 "reveal" 的 容器 元 素 

var elements=document .getElementsByClassName("reveal"),; 

for(var i=0;i<elements.length;i++){// 对 每 个 元 素 进行 遍历 

var elt=elements[i];// 找 到 容器 中 的 "handle" 元 素 

var title=elt.getELlementsByCLassName("handle")[9];// 当 单 击 这 个 元 素 时 ， 呈 现 剩 下 的 内 容 
addRevealHandJer(title,elt);} 

function addRevealHandler(title,elt) 




































































title.onclick=function(){ 
if(elt.className=="reveal") 
elt.className="revealed"; 


else if(elt.className=="revealed") 

elt.className="reveal"; 

} 

} 

}; 

</script> 

</head> 

<body> 

<div class="reveal"> 

<hi class="handle">Click Here to Reveal Hidden Text<=/hi> 
<p~>This paragraph is hidden.It appears when you click on the title.<=/p> 
</div> 

</body> 

</html> 





在 本 章 的 概要 介绍 中 提 到 了 ， 一 些 Web 页 面 感 党 上 像 文 要 ， 而 另 一 
接 下 来 的 两 节 会 探讨 JavaScript 在 两 种 Web 页 面 类 型 里 是 如 
何 使 用 的 。 


13.1.1 Web 文 档 里 的 JavaScript 


JavaScript 程 序 可 以 通过 Document 对 象 和 它 包含 的 Element 对 象 遍历 
和 管理 文档 内 容 。 它 可 以 通过 操纵 CSS 样 式 和 类 ， 修 改 文档 内 容 的 呈 
现 。 并 且 可 以 通过 注册 适当 的 事件 处 理 程序 来 定义 文档 元 素 的 行为 。 内 
容 、 呈 现 和 行为 的 组 合 ， 叫 做 动态 HIML 或 DHTML ， 会 在 第 15 一 17 章 
里 基 组 。 

Web 文 档 里 应 当 少 量 地 使 用 JavaScript， 因 为 JavaScript 真 正 的 角色 
是 增强 用 户 的 浏览 体验 ， 使 信息 的 获取 和 传递 更 容易 。 用 户 的 体验 不 应 
依赖 于 JavaScript， 但 JavaScript 可 以 增强 体验 ， 比 如 通过 下 面 的 方式 : 


创建 动画 和 其 他 视 沉 效果， 巧妙 地 引导 和 帮助 用 户 进 行 页 面 导 








航 。 
“对 表格 的 列 进行 分 组 ， 让 用 户 更 容易 找到 所 需要 的 。 
-隐藏 东 些 内 容 ， 当 用 户 “ 深 入 ?到 内 容 里 时 ， 再 逐渐 展示 详细 信 


13.1.2 Web 应 用 里 的 JavaScript 


在 Web 文 档 中 使 用 的 JavaScript ”DHTML 特 性 在 Web 应 用 中 都 会 用 
到 ， 对 于 Web 应 用 来 说 ， 除 了 内 容 、 呈 现 和 操作 API 之 外 ， 还 依赖 了 





Web 浏 览 器 环境 提供 的 更 基础 的 服务 。 


要 真正 理解 Web 应 用 ， 需 要 先 认识 到 Web 浏 览 器 已 经 有 了 很 好 的 发 
展 ， 现 在 已 经 不 仅仅 是 作为 显示 文档 的 工具 的 角色 了 ， 而 渐渐 变 成 了 一 
个 简易 的 操作 系统 。 想 一 下 ， 传 统 操 作 系 统 允 许 组 织 桌 面 和 文件 夹 里 的 
图 标 〈 表 示 文 件 或 应 用 ) ;Web 浏览 器 允许 在 工具 栏 和 文件 夹 里 组 织 书 
签 ( 表 示 文 档 和 Web 应 用 ) 。 系 统 可 以 在 一 个 窗口 里 运行 多 个 应 用 ; 
Web 浏 览 器 可 以 在 一 个 标签 里 显示 多 个 文档 。 操 作 系 统 定 义 了 很 多 底层 
网 络 API、 提 供 绘 制图 像 、 保 存 文件 等 功能 。Web 浏 览 器 也 定义 底层 网 
络 API (第 18 章 ) 、 保 存 数据 (第 20 章 ) 和 绘制 图 像 (第 21 章 ) 。 


说 记 Web 浏 览 器 是 简单 操作 系统 的 概念 ， 这 样 束 可 以 把 Web 应 用 定 
义 为 用 JavaScript 访 问 更 多 浏览 占 提 供 的 高 级 服务 (比如 网 络 、 图 像 和 数 
据 存 储 ) 的 Web 页 面 。 高 级 服务 里 最 有 名 的 是 XMLHttpRequest 对 象 ， 后 
者 可 以 对 HTTP 请 求 编程 来 启用 网 络 。Web 应 用 使 用 这 个 服务 从 服务 器 
获取 新 信息 ， 而 不 用 重新 载 入 页 面 。 类 似 这 样 的 Web 应 用 通常 叫做 Ajax 
应 用 ，Ajax 构 成 了 "Web ”2.0" 的 硝 梁 。XMLHttpRequest 会 在 第 18 章 详细 
介绍 。 

















HTML5 标 准 〈 在 撰写 本 书 之 时 还 是 草案 ) 和 相关 的 标准 为 Web 应 
用 定义 了 很 多 其 他 重要 的 API。 这 些 API 包 括 第 21 章 和 第 20 章 的 数据 存 
储 和 图 像 API， 以 及 很 多 其 他 特性 的 API， 如 地 理 位 置信 息 、 历 史 管 理 
和 后 台 线 程 。 在 实现 这 些 API 之 后 ， 会 开启 一 场 Web 应 用 功能 的 革命 。 
这 些 API 会 在 第 22 章 中 介绍 。 








当然 ，JavaScript 在 Web 应 用 里 会 比 在 Web 文 档 里 显得 更 加 重要 。 
JavaScript 增 强 了 Web 文 档 ， 但 是 设计 良好 的 文档 需要 在 禁用 JavaScript 
后 还 能 继续 工作 。Web 应 用 本 质 上 就 是 JavaScript 程 序 ， 后 者 使 用 由 Web 
浏览 器 提供 的 操作 系统 类 型 的 服务 ， 并 且 不 用 期 户 它 们 在 禁用 浏览 器 脚 
本 后 还 能 正常 工作 凯 。 
13.2 ”在 HTML 里 艇 入 JavaScript 

在 HTML 文 档 里 租 入 客户 端 JavaScript 代 人 码 有 4 种 方法 : 

:内 联 ， 放 置 在 二 script> 和 二 /script 二 标签 对 之 间 。 


放置 在 由 入 script 之 标签 的 src 属 性 指定 的 外 部 文件 中 。 


:放置 在 HTML 事件 处 理 程 序 中 ， 访 事件 处 理 程序 由 onclick 或 
onmouseover 这 样 的 HTML 属性 值 指定 。 


: 放 在 一 个 URL 里 ， 这 个 URL 使 用 特殊 的 "javascript:" 协 议 。 


接 下 来 的 小 节 会 逐一 解释 这 4 种 JavaScript 舱 套 技术 。 但 是 ， 值 得 注 
意 的 是 ，HTML 事 件 处 理 程序 属性 和 javascript:URL 这 两 种 方式 在 现代 
JavaScript 代 人 码 里 已 经 很 少 使 用 (它们 在 Web 早 期 多 少 有 点 通用 ) 。 内 联 
脚本 (没有 src 属 性 ) 也 比 它们 之 前 用 得 少 了 。 有 个 编程 哲学 
叫 "unobtrusive JavaScript" 加 ， 主 张 内 容 CHTML ) 和 行为 (JavaScript 代 
码 ) 应 该 尽量 地 保持 分 离 。 根 据 这 个 编程 哲学 ，JavaScript 最 好 通过 一 
script 二 元素 的 src 属 性 来 可 入 HTML 文 档 里 。 








13.2.1 < 天 script 过 元素 


JavaScript 代 码 可 以 以 内 联 的 形式 出 现在 HTML 文 件 里 的 script 二 
和 二 /script 二 标签 之 间 : 





<Sscript>// 这 里 是 你 的 JavaScript 代 码 
</script> 





在 XHTML 中 ， 二 script 二 标签 中 的 内 容 被 当做 其 他 内 容 一 样 对 待 。 
如 果 JavaScript 代 码 包含 了 “二 ”或 “& ”字符 ， 那 么 这 些 字 符 就 被 解释 成 为 
XML 标记 。 因 此 ， 如 果 要 使 用 XHTML， 最 好 把 所 有 的 JavaScript 代 码 放 
入 到 一 个 CDATA 部 分 里 : 




















<script> 之 <![CDATA[// 这 里 是 你 的 JavaScript 代 码 
]]> 和 /script> 








例 13-2 展 示 了 一 个 HTML 文 件 ， 它 包含 简单 的 JavaScript 程 序 。 注 释 
解释 了 这 个 程序 是 做 什么 的 ， 但 这 个 例子 主要 演示 的 是 JavaScript 代 码 以 
及 CSS 样 式 表 是 如 何其 入 HTML 文件 里 。 注 意 这 个 例子 和 例 13-1 的 结构 
类 似 ， 并 同样 使 用 onload 事 件 处 理 程序 。 


例 13-2: 实现 一 个 简单 的 JavaScript 数 字 时 钟 程序 








<IDOCTYPE html> 


去 !-- 这 是 一 个 HTML5 文 件 - - > 
<html> 

二 !-- 根 节点 - -> 

<head> 

二 !- -标题 、 脚 本 和 样式 都 放 在 这 里 - - > 
<title>Digital Clock<=/title> 
<Script>//js 代 码 
// 定 义 一 个 函数 用 以 显示 当前 时 间 
function dispJayTime(){ 
var elt=document .getElementById("clock");// 通 过 id="clock" 找 到 元 素 
var now=new Date( ) ;// 得 到 当前 时 间 
elt.innerHTML=now.toLocaleTimeString();// 让 elt 来 显 
setTimeout(displayTime,1000);// 在 1 秒 后 再 次 执行 










































































} 

window.onload=displayTime;// 当 onload 事 件 发 生 时 开始 显示 时 间 
</script> 

<style>/* 钟 表 的 样式 */ 
#clock{/* 定 义 id="clock" 的 元 素 的 样式 */ 

font:bold 24pt sans;/* 使 用 粗 体 大 号 字 */ 

background:#ddf; /* 定 义 蓝 灰色 背景 *7 

padding:10px; /* 周 时 圈 空 白 */ 

border:solid black 2px;/* 定 义 纯 黑色 边框 */ 










































































border-radius:10px;/* 定 义 圆 角 【如果 浏览 器 支持 的 话 ) */ 
} 

</style> 

</head> 

<body> 




















去 !--body 部 分 是 用 来 显示 文档 的 - - > 
<hi>Digital Clock<=/hi> 

去 !- -显示 标题 - - > 

<span id="clock"></span> 二 !-- 输 出 时 钟 - - > 
</body> 

</html> 











13.2.2 ”外 部 文件 中 的 脚本 


二 script 二 标签 文 持 src 属 性 ， 这 个 属性 指定 包含 JavaScript 代 码 的 文 
件 的 URL。 它 的 用 法 如 下 : 





<script src="../../scripts/util.js"></script> 








av eo 展 名 通常 是 以 .js 结尾 的 。 它 包含 纯粹 的 
JavaScript 代 码 ， 其 中 既 没 有 二 script 二 > 标签， 也 没有 其 他 HTML 标 签 。 


具有 src 属 性 的 二 script 二 标签 的 行为 束 像 指定 的 JavaScript 文 件 的 内 
容 直 接 出 现在 标签 二 script 和 <=/script 二 之 间 一 样 。 注 意 ， 即 便 指定 了 
src 属 性 并 且 二 script 和 <=/script 二 标签 之 则 没有 JavaScript 代 人 码 ， 结 束 的 
三 /script 二 标签 也 是 不 能 丢 的 。 在 XHTML 中 ， 在 此 处 可 以 使 用 简短 的 = 
script/ 二 标签 。 





使 用 src 属 性 时 ， 二 script 二 和 =/script 二 标签 之 间 的 任何 内 容 都 会 忽 
略 。 如 果 需 要 ， 可 以 在 过 script 二 标签 之 间 添 加 代码 的 补充 说 明文 档 或 
版 权 信息 。 但 是 要 注意 ， 如 果 有 任何 非 空格 或 JavaScript 注 释 的 文本 出 现 
在 二 script src="" 这 和 过/script 二 之 间 ，HTML5 校 验 器 将 会 报错 刁 。 


以 下 是 src 属 性 方式 的 一 些 优点 : 


:可 以 把 大 块 JavaScript 代 码 从 HTML 文 件 中 删除 ， 这 有 助 于 保持 内 
容 和 行为 的 分 离 ， 从 而 简化 HTML 文 件 。 


:如 果 多 个 Web 页 面 共 用 相同 的 JavaScript 代 码 ， 用 src 属 性 可 以 让 你 
只 管理 一 份 代码 ， 而 不 用 在 代码 改变 时 编辑 每 个 HTML 文 件 。 


:如果 一 个 JavaScript 代 码 文 件 由 多 个 页 面 共 享 ， 就 只 击 妥 下 愉 全 一 
次 ， 通过 使 用 它 的 第 一 个 页 面 一 随后 的 页 面 可 以 从 浏览 右 绥 存 检索 


已 




















:由 于 src 属 性 的 值 可 以 是 任意 的 URL， 因 此 来 自 一 个 Web 服 务 器 的 
JavaScript 程 序 或 Web 页 面 可 以 使 用 由 另 一 个 web 服 务 器 输出 的 代码 。 很 
多 互联 网 广告 依赖 与 此 。 


.从 其 他 网 站 载 入 脚本 的 能 力 ， 可 以 让 我 们 更 好 地 利用 缓存 。 
Google 正 在 为 通用 的 客户 端 类 库 推 广 标准 且 好 记 的 URL 包 ， 可 以 让 浏览 
器 只 绥 存 一 份 副 本 ， 并 有 旦 网 络 上 的 任意 站 点 都 可 以 使 用 。 链 接 JavaScript 
代码 到 Google 服 务 器 ， 可 以 减少 Web 页 面 的 启动 时 间 ， 因 为 这 些 类 库 可 
能 已 经 存在 于 用 户 的 浏览 器 缓存 中 ， 但 是 你 必须 相信 由 第 三 方 提供 的 代 
码 服务 ， 这 对 于 你 的 站 点 来 说 很 关键 。 参 见 
http://code.google.com/apis/ajaxlibs/ 查 看 更 多 信息 。 


从 文档 服务 器 之 外 的 服务 器 里 载 入 脚本 有 重要 的 安全 隐患 。13.6.2 
节 介 绍 的 同 源 安全 策略 会 阻止 一 个 域 的 文档 中 的 JavaScript 和 另 一 个 域 的 
内 容 进 行 交 互 。 但 是 ， 要 注意 和 脚本 本 身 的 来 源 并 没有 关系 ， 而 是 和 脚 
本 舱 入 的 文档 的 来 源 有 关系 。 因 此 ， 同 源 策 略 并 不 适用 于 如 下 情况 : 即 
便 代 码 和 文档 有 着 不 同 的 来 源 ，JavaScript 代 码 也 可 以 和 它 嵌 入 的 文档 进 
行 交 互 。 当 在 页 面 中 用 src 属 性 包含 一 个 脚本 时 ， 就 给 了 脚本 作者 (以 及 
从 中 载 入 这 段 脚本 的 域 的 网 站 管理 员 ) 完全 控制 Web 页 面 的 权限 。 


13.2.3 ”脚本 类 型 











JavaScript 是 Web 的 原始 脚本 语言 ， 而 在 默认 情况 下 ， 假 定 达 script 
二 元 素 包 含 或 引用 JavaScript 人 代码。 如 果 要 使 用 不 标准 的 脚本 语言 ， 如 
Microsoft 的 VBScript〈 只 有 了 正文 持 ) ， 就 必须 用 type 属 性 指定 脚本 的 
MIME 类 型 : 











<script type="text/vbscript"> 
' 这 里 是 VBScript 代 码 
</script> 























type 属 性 的 默认 值 是 "text/javascript"。 如 果 需 要 ， 可 以 显 式 指定 此 类 
型 ， 但 这 完全 没 必 要 。 


老 的 浏览 器 在 二 script 二 标记 上 用 language 属 性 代 蔡 type 属 性 ， 这 种 
情况 现在 也 会 经 常 看 到 : 


























二 script Language="javascript" 之 // 这 里 是 JavaScript 人 代码.…. 
</script> 








language 属 性 已 经 废弃 ， 不 应 该 再 使 用 了 。 


当 Web 浏 览 器 过 到 二 script 二 元 素 ， 并 且 这 个 二 script 二 元 素 包 含 其 
值 不 被 浏览 器 识别 的 type 属 性 时 ， 它 会 解析 这 个 元 素 但 不 会 尝试 显示 或 
执行 它 的 内 容 。 这 意味 着 可 以 使 用 二 script 二 元 素来 散 入 任意 的 文本 数 
据 到 文档 里 ， 只 要 用 type 属 性 为 数据 声明 一 个 不 可 执行 的 类 型 。 要 获取 
数据 ， 可 以 用 表示 script 元 素 (第 15 章 会 解释 如 何 获取 这 些 元 素 ) 的 
HTMLElement 对 象 的 text 属 性 。 但 是 ， 要 注意 这 些 数 据 舱 入 技术 只 对 内 
联 脚 本 生效 是 。 如 果 同 时 指定 src 属 性 和 一 个 未 知 的 类 型 ， 那 这 个 脚本 会 
被 忽略 ， 并 且 不 会 从 指定 的 URL 里 下 载 任何 内 容 。 


13.2.4 HTML 中 的 事件 处 理 程序 


当 脚 本 所 在 的 HTML 文 件 被 载 入 浏览 器 时 ， 这 个 脚本 里 的 JavaScript 
代码 只 会 执行 一 次 。 为 了 可 交互 ，JavaScript 程 序 必须 定义 事件 处 理 程序 
We hb 浏览 器 先 注 册 JavaScript 函 数 ， 并 在 之 后 调用 它 作为 事件 的 啊 
应 《比如 用 户 输入 ) 。 正 如 本 章 一 开始 展示 的 ，JavaScript 代 码 可 以 通过 
把 函数 赋值 给 Element 对 象 的 属性 〈 比 如 onclick 或 onmouseover) 来 注册 
事件 处 理 程 序 。《〈 还 有 其 他 注册 事件 处 理 程序 的 方法 ， 参 见 第 17 章 ) ， 














这 个 Element 对 象 表示 文档 里 的 一 个 HTML 元 素 。 


类 似 onclick 的 事件 处 理 程 序 属性 ， 用 相同 的 名 字 对 应 到 HTML 属 
性 ， 并 且 还 可 以 通过 将 JavaScript 代 码 放置 在 HTML 属 性 里 来 定义 事件 处 
理 程序 。 例 如 ， 要 定义 用 户 切 换 表单 中 的 复 选 框 时 调用 的 事件 处 理 程 
序 ， 可 以 作为 表示 复 选 框 的 HTML 元 素 的 属性 指定 处 理 程序 代码 : 





<input type="checkbox"name="options"value="giftwrap" 
onchange="order .options.giftwrap=this,.checked; "> 





这 里 的 onchange 属 性 比较 有 意思 。 这 个 属性 值 里 的 JavaScript 代 码 会 
在 用 户 选 择 或 取消 选择 复 选 框 时 执行 。 


HTML 中 定义 的 事件 处 理 程序 的 属性 可 以 包含 任意 条 JavaScript 语 
人 句 ， 相 互 之 间 用 逗号 分 隔 。 这 些 语句 组 成 一 个 阔 数 体 ， 然 后 这 个 函数 成 
为 对 应 事件 处 理 程序 属性 的 值 。 (17.2.2 节 会 详细 介绍 HTML 属 性 文本 
到 JavaScript 函 数 的 转换 。) 但 是 ， 通 常 HTML 事 件 处 理 程序 的 属性 由 类 
似 上 面 的 简单 赋值 或 定义 在 其 他 地 方 的 简单 函数 调用 组 成 。 这 样 可 以 保 
持 大 部 分 实际 的 JavaScript 代 码 在 脚本 里 ， 而 不 用 把 JavaScript 和 HTML 混 
在 一 起 。 实 际 上 ， 很 多 Web 开 发 者 认为 使 用 HTML 事 件 处 理 程序 的 属性 
是 不 好 的 习惯 ， 他 们 更 喜欢 保持 内 容 和 行为 的 分 离 。 


13.2.5” ”URL 中 的 JavaScript 











在 URL 后 面 跟 一 个 javascript: 协 议 限定 符 ， 是 男 一 种 租 入 JavaScript 
代码 到 客户 端的 方式 。 这 种 特殊 的 协议 类 型 指定 URL 内 容 为 任意 字符 
串 ， 这 个 字符 串 是 会 被 JavaScript 解 释 器 运行 的 JavaScript 代 码 。 它 被 当 
做 单独 的 一 行 代 码 对 待 ， 这 意味 着 语句 之 间 必 须 用 分 号 隔 开 ， 而 /注释 
必须 用 /**/ 注 释 代 蔡 。javascript:URL 能 识别 的 “资源 ”是 转换 成 字符 串 的 
I 
a 


javascript:URL 可 以 用 在 可 以 使 用 常规 URL 的 任意 地 方 ， 比如 =a 二 
标记 的 href 属 性 ，<form> 之 的 action 属 性 ， 甚 至 window.open(0) 方 法 的 参 
数 。 超 链接 里 的 JavaScript URL 可 以 是 这 样 : 








<a href="javascript:new Date().toLocaleTimeString();"> 
What time is it? 


</a> 





部 分 浏览 器 (比如 Firefox) 会 执行 URL 里 的 代码 ， 并 使 用 返回 的 了 
符 串 作为 等 显示 新 文档 的 内 容 。 就 像 单 击 一 个 http:URL 链 接 ， 浏 览 器 
氛 除 当前 文档 并 显示 新 文档 。 以 上 代码 的 返回 值 并 不 i 
签 ， 但 是 如 果 有 ， 浏 览 器 会 像 泻 染 通 常 载 入 的 等 价 HTML 文 档 一 样 泻 染 
它们 。 其 他 浏览 器 (比如 Chrome 和 Safari〉 不 允许 URL 像 上 面 一 样 履 立 
J 它们 会 忽略 代码 的 返回 值 。 但 是 ， 类 似 这 样 的 URL 还 是 支持 





<a href="javascript:alert(new Date().toLocaleTimeString());"> 
检查 时 间 ， 而 不 必 才 盖 整 个 文档 
</a> 











当 浏 览 器 载 入 这 种 类 型 的 URL 时 ， 它 会 执行 JavaScript 代 人 码 ， 但 是 由 
于 没有 返回 值 〈alert(0) 方 法 返回 undefined) 作为 新 文档 的 显示 内 容 ， 类 
似 Firefox 的 浏览 器 并 不 会 蔡 换 当前 显示 的 文档 。【〔 在 这 种 情况 下 ， 
javascript:UREL 和 onclick 事 件 处 理 程序 的 目的 一 样 。 上 面 的 链接 通过 < 
button 之 元 素 的 onclick 处 理 程 序 来 表示 会 更 好 ， 因 为 <<a> 元 素 通常 应 该 
保留 为 超 链 接 ， 用 来 载 入 新 文档 。)〉 如 果 要 确保 javascript:URL 不 会 覆盖 
0 可 以 用 void 操作 符 强 制 函 数 调用 或 给 表达 式 赋予 undefined 











<a href="javascript:void window.open('about:pblank' );"> 打 开 一 个 窗口 </a> 




















如 果 这 个 URL 里 没有 void 操 作 符 ， 调 用 window.open0 方 法 返回 的 值 
(在 一 些 浏览 器 里 ) 被 转化 为 字符 串 并 显示 ， 而 当前 文档 也 会 被 履 盖 
该 字符 串 的 文档 : 








[object Window] 





和 HTML 事 件 处 理 程 序 的 属性 一 样 ，JavaScript URL 是 Web 早 期 的 遗 
物 ， 通 党 应 该 避免 在 现代 HIML 里 使 用 。 但 javascript:URL 在 HIML 文 档 
之 外 确实 有 着 重要 的 角色 。 人 那么 可 以 
在 浏览 器 地 址 栏 里 直接 输入 javascript:URL。 下 面 会 介绍 javascript:URL 
另 一 个 正统 《〈 且 强大 的 ) 的 用 法 : 浏览 器 书签 。 


书签 


在 Web 浏 览 嚣 中,“ 书签 ”就 是 一 个 保存 起 来 的 URL。 如 果 书 签 是 
javascript:UREL， 那 么 保存 的 就 是 一 小 段 肢 本， 叫做 bookmarklet。 
bookmarklet 是 一 个 小 型 程序 ， 很 容易 就 可 以 从 浏览 器 的 菜单 或 工具 栏 里 
启动 。bookmarklet 里 的 代码 执行 起 来 就 像 页 面 上 的 脚本 一 样 ， 可 以 查询 
和 设置 文档 的 内 容 、 呈 现 和 行为 。 只 要 书签 不 返回 值 ， 它 束 可 以 操作 当 
前 显示 的 任何 文档 ， 而 不 把 文档 蔡 换 成 新 的 内 容 。 


考虑 下 面 二 a 二 标签 里 的 javascript:URL。 单 击 链 接 会 打开 一 个 简单 
的 JavaScript 表 达 式 计算 器 ， 它 允许 在 页 面 环境 中 计算 表达 式 和 执行 语 
句 : 





~<a ef es 

var e="", A 需要 计算 的 表达 式 和 结 果 */ 

do{/* 输 天 达 式 和 结果 ， 并 要 求 输入 新 的 表达 式 * / 

e= Prompt(” Expression: '+et"\n"+r+"\n",e); 
try{r="Result:"+teval(e);}/* 尝试 计算 这 个 表达 式 * / 
catch(ex){r=ex;}/* 否 则 记 住 这 个 错误 */ 
}while(e);/* 直 至 到 没有 输入 表达 式 或 者 单 击 了 Cancel 按 钮 才 会 停止 ， 否则 一 直 循 环 执行 */ 
void 9;/* 这 名 代码 用 以 防止 当前 文档 被 覆盖 */ 

"> 

JavaScript Evaluator 

</a> 




































































注意 ， 即 便 这 个 JavaScript URL 是 写成 多 行 的 ，HTML 解 析 器 仍 将 
它 作为 单独 的 一 行 对 待 ， 并 且 其 中 的 单行 /注释 也 是 无 效 的 。 还 有 ， 要 
0 所 以 代码 不 可 以 包含 任何 
单 引 号 。 


在 开 太 时 ， 把 这 样 的 链接 人 硬 编码 在 页 面 中 是 有 用 的 ， 而 把 它 妨 存 为 
可 以 在 任何 页 面 上 运行 的 书签 ， 就 更 有 用 了 。 通 音 ， 在 浏览 器 里 把 超 链 
接 的 地 址 加 入 书签 可 以 这 样 做 ， 在 链接 上 右 击 并 选择 类 似 "Bookmark 
Link" 的 选项 ， 或 者 拖 动 链接 到 书签 工具 栏 。 


13.3 ” JavaScript 程序 的 执行 


客户 端 JavaScript 程 序 没 有 严格 的 定义 。 我 们 可 以 说 JavaScript 程 序 
是 由 Web 页 面 中 所 包含 的 所 有 JavaScript 代 码 〈 内 联 脚本 、HTML 事 件 处 
理 程 序 和 javascript:URL ) 和 通过 < 二 script 二 标签 的 src 属 性 引用 的 外 部 
JavaScript 代 码 组 成 。 所 有 这 些 单 独 的 代码 共用 同一 个 全 局 Window 对 




















象 。 这 意味 着 它们 都 可 以 看 到 相同 的 Document 对 象 ， 可 以 共享 相同 的 全 
局 函数 和 变量 的 集合 ; 如 果 一 个 脚本 定义 了 新 的 全 局 变量 或 沙 数 ， 那 么 
这 个 变量 或 函数 会 在 脚本 执行 之 后 对 任意 JavaScript 代 码 可 见 。 


如 果 Web 页 面包 含 一 个 藤 入 的 窗 体 〈 通 种 使 用 <iframe 之 元 素 ) ， 
仍 入 文档 中 的 JavaScript 代 码 和 被 从 入 文档 里 的 JavaScript 代 码 会 有 不 同 
的 全 局 对 象 ， 它 可 以 当做 一 个 单独 的 JavaScript 程 序 。 但 是 ， 要 记 住 ， 没 
有 严格 的 关于 JavaScript 程 序 范 围 的 定义 。 如 果 外 面 和 里 面 的 文档 来 和 目 于 
同一 个 服务 器 ， 那 么 两 个 文档 中 的 代码 束 可 以 进行 交互 ， 并 且 如 果 你 愿 
意 ， 就 可 以 把 它们 当做 是 同一 个 程序 的 两 个 相互 作用 的 部 分 。14.8.3 节 
会 详细 介绍 全 局 Window 对 象 以 及 不 同窗 口 和 窗 体 之 间 的 交互 。 


bookmarklet 里 的 javascript:URL 存 在 于 文档 之 外 ， 可 以 想象 成 是 一 
种 用 户 扩 展 或 者 对 于 其 他 程序 的 修改 。 当 用 户 执 行 一 个 bookmarklet 时 ， 
书签 里 ep 以 访问 全 局 对 象 和 当前 文档 的 内 容 ， 以 及 对 
它 进行 操作 。 


JavaScript 程 序 的 执行 有 两 个 阶段 。 在 第 一 阶段 ， 载 入 文档 内 容 ， 并 
执行 <script 二 元 素 里 的 代码 (包括 内 联 脚 本 和 外 部 脚本 〉 。 脚 本 通常 
〈 但 不 总 是 ， 参 见 13.3.1) 会 按 它 们 在 文档 里 的 出 现 顺序 执行 。 所 有 
脚本 里 的 JavaScript 代 码 都 是 从 上 往 下 ， 按 照 它 在 条 件 、 循 环 以 及 其 他 控 
制 语句 中 的 出 现 顺序 执行 。 


当 文 档 载 入 完成 ， 并 且 所 有 脚本 执行 完成 后 ，JavaScript 执 行 就 进入 
它 的 第 二 阶段 。 这 个 阶段 是 异步 的 ， 而 且 由 事件 驱动 的 。 在 事件 驱动 阶 
段 ，web 浏 览 器 调用 事件 处 理 程序 函数 〈 由 第 一 阶段 里 执行 的 脚本 指定 
的 HIML 事 件 处 理 程序 ， 或 之 前 调用 的 事件 处 理 程序 来 定义 ) ， 来 啊 应 
异步 发 生 的 事件 。 调 用 事件 处 理 程 序 通常 是 啊 应 用 户 输入 《如 鼠标 单 
击 ， 键 盘 按 下 等 ) 。 但 是 ， 还 可 以 由 网 络 活动 、 运 行 时 间或 者 JavaScript 
代码 中 的 错误 来 触发 。 第 17 章 会 详细 介绍 事件 和 事件 处 理 程序 。13.3.2 
节 也 会 进行 更 多 讨论 。 注 意 ， 骨 入 在 Web 页 面 里 的 javascript:URL 也 可 以 
被 当做 是 一 种 事件 处 理 程序 ， 因 为 直到 用 户 通 过 单 击 链接 或 提交 表单 来 
激活 之 后 它们 才 会 有 效果 。 


事件 驱动 阶段 里 发 生 的 第 一 个 事件 是 load 事 件 ， 指 示 文 档 已 经 完全 
载 入 ， 并 可 以 操作 。JavaScript 程 序 经 常用 这 个 事件 来 触发 或 发 送 消息 。 
我 们 会 经 党 看 到 一 些 定义 函数 的 脚本 程序 ， 除 了 定义 一 个 onload 事 件 处 
理 程序 函数 外 不 做 其 他 操作 ， 这 个 沙 数 会 在 脚本 事件 驱动 阶段 开始 时 被 





























load 事 件 触发 。 正 是 这 个 onload 事 件 会 对 文档 进行 操作 ， 并 做 程序 想 做 

的 任何 事 。JavaScript 程 序 的 载 入 阶段 是 相对 短暂 的 ， 通 常 只 持续 1 一 2 

秒 。 在 文档 载 入 完成 之 后 ， 只 要 Web 浏 览 器 显示 文档 ， 事 件 驱动 阶段 就 
会 一 直 持续 下 去 。 因 为 这 个 阶段 是 异步 的 和 事件 驱动 的 ， 所 以 可 能 有 长 
时 间 处 于 不 活动 状态 ， 没 有 JavaScript 被 执行 ， 被 用 户 或 网 络 事件 触发 的 
活动 打 断 。13.3.4 节 会 详细 介绍 JavaScript 执 行 的 两 个 阶段 。 


核心 JavaScript 和 客户 端 JavaScript 都 有 一 个 单线 程 执 行 模型 。 脚 本 
和 事件 处 理 程序 〈 无 论 如 何 ) 在 同一 个 时 间 只 能 执行 一 个 ， 没 有 并 发 
性 。 这 保持 了 JavaScript 编 程 的 简单 性 ， 在 13.3.3 节 会 介绍 。 


13.3.1 同步 、 异 步 和 延迟 的 脚本 

JavaScript 第 一 次 添加 到 Web 浏 览 圳 时 ， 还 没有 API 可 以 用 来 过 历 和 
操作 文档 的 结构 和 内 容 。 当 文档 还 在 载 入 时 ，JavaScript 影 响 文 档 内 容 的 
唯一 方法 是 快速 生成 内 容 。 它 使 用 document.write0) 方 法 完成 上 述 任务 。 
例 13-3 展 示 了 1996 年 最 先进 的 JavaScript 代 码 的 样子 。 


例 13-3: 载 入 时 生成 文档 内 容 








<hi>Table of Factorials</hi> 
=<script> 

function factorial(n){// 用 来 计算 阶乘 的 函数 
if(n==1)return n,; 

else return n*factorial(n-1); 
































} 

document ,write("<tab1e>") ;// 开 始 创建 HTML 表 

document .write("<tr><th>n</th><th>n1</th></tr>");// 输 出 表 头 

for(var 1i=1;1<=10;i++){// 输 出 19 行 

document .write("<tr><td>"+i+"</td><td>"+factorial(i)+"</td></tr>"); 
} 

document .write("</table>");// 表 格 结束 

document .write("Generated at"+new Date() );// 输 出 时 间 惟 

</script> 














当 脚 本 把 文本 传递 给 document.write() 时 ， 这 个 文本 被 添加 到 文档 输 
入 流 中 ，HTML 解 析 器 会 在 当前 位 置 创建 一 个 文本 节点 ， 将 文本 插入 这 
个 文本 节点 后 面 。 我 们 并 不 推荐 使 用 document.write()， 但 在 某 些 场景 下 
它 有 着 重要 的 用 途 〈 见 15.10.2 节 ) 。 当 HTML 人 解析 器 遇 到 二 script 二 元素 
时 ， 它 默认 必须 先 执行 脚本 ， 然 后 再 恢复 文档 的 解析 和 泻 染 。 这 对 于 内 
联 脚 本 没什么 问题 ， 但 如 果 脚 本 源 代码 是 一 个 由 src 属 性 指定 的 外 部 文 
件 ， 这 意味 着 脚本 后 面 的 文档 部 分 在 下 载 和 执行 脚本 之 前 ， 都 不 会 出 现 


在 浏览 器 中 国 。 


脚本 的 执行 只 在 默认 情况 下 是 同步 和 阻塞 的 。 二 script 二 标签 可 以 
er vi 性 ， 这 《在 文 持 它们 的 浏览 器 里 ) 可 以 改变 脚本 的 执 
行 方式 。 这 些 都 是 布尔 属性 ， 没 有 值 ; 只 需要 出 现在 二 script 二 标签 里 
即 可 。HTML5 说 这 些 属性 只 在 和 src 属 性 联合 使 用 时 才 有 效 ， 但 有 些 浏 
览 器 还 支持 延迟 的 内 联 脚 本 : 








<script defer src="deferred.js"></script> 
<script async src="async.js"></script> 





defer 和 async 属 性 都 像 在 告诉 浏览 器 链接 进来 的 脚本 不 会 使 用 
0 write()， 也 不 会 生成 文档 内 容 ， 因 此 浏 响 副 可 以 在 下 载 脚 本 时 

续 解 析 和 演 染 文档 。defer 属 性 使 得 浏览 器 延迟 脚本 的 执行 ， 直 到 文档 
并 可 以 操作 。async 属 性 使 得 浏览 器 可 以 尽快 地 执 
行 脚本 ， 而 不 用 在 下 载 脚 本 时 阻塞 文档 解析 。 如 果 二 script 二 标签 同时 
pe 属性 ， 同 时 支持 两 者 的 浏览 器 会 遵从 async 属 性 并 急 略 defer 属 


注意 ， 延 迟 的 脚本 会 按 它 们 在 文档 里 的 出 现 顺 序 执行 。 而 异步 脚本 
在 它们 载 入 后 执行 ， 这 意味 着 它们 可 能 会 无 序 执行 。 


在 撰写 本 书 的 时 候 ，async 和 defer 属 性 还 没有 广泛 实现 ， 它 们 只 被 
一 些 优化 建议 所 考虑 。 即 便 延 运 和 异步 的 脚本 会 同步 执行 ，Web 页 面 应 
该 还 可 以 正常 工作 。 

其 金 可 以 在 不 文 持 async 属 性 的 浏览 融 里 ， 通过 动态 创建 二 script 二 
元 素 并 把 它 插 入 到 文档 中 ， 来 实现 脚本 的 异 ey 例 13-4 里 的 
loadasync() 函 数 完成 了 这 个 工作 。 第 15 章 会 介绍 它 使 用 的 技术 。 


例 13-4: 腊 步 载 入 并 执行 脚本 























// 异 步 载 入 并 执行 一 个 指定 URL 中 的 脚本 

function loadasync(url)t{ 

var head=document. getElement sByTagName( 'head")[0];// 找 到 二 head 二 元 素 
var s=document.createElement("script");// 创 建 一 个 <script 二 元 素 
s.src=url;// 设 置 其 src 属 性 

head. appendchild(s); // 将 Script 元素 插入 head 标 签 中 
} 






























































注意 这 个 loadasync() 函 数 会 5 | 文档 
中 ， 成 为 正在 执行 的 JavaScript 程 序 的 一 部 分 ， 既 不 是 通 通过 Web 贡 面 内 联 
包含 ， 也 不 是 来 自 wWeb 页 面 的 静态 引用 。 


13.3.2 ”事件 驱动 的 JavaScript 


例 13-3 里 展示 的 古老 的 JavaScript 程 序 是 同步 载 入 的 程序 : 在 页 面 载 
入 时 开始 执行 ， 生 成 一 些 输出 ， 然 后 结束 。 这 种 类 型 的 程序 在 今天 已 经 
不 常见 了 。 有 反之， 我 们 通过 注册 事件 处 理 程序 函数 来 写 程序 。 之 后 在 注 
册 的 事件 发 生 时 异步 调用 这 些 函 数 。 例 如 ， 想 要 为 常用 操作 启用 键盘 快 
捷 键 的 Web 应 用 会 为 键盘 事件 注册 事件 处 理 程序 。 甚 至 非 交 互 的 程序 也 
使 用 事件 。 假 如 想 要 写 一 个 分 析 文 档 二 构 并 目 动 生成 文档 内 容 的 表格 的 
程序 。 程 序 不 需要 用 户 输入 事件 的 事件 处 理 程序 ， 但 它 还 是 会 注册 
onload 事 件 处 理 程序 ， 这 样 就 可 以 知道 文档 在 什么 时 候 载 入 完成 并 可 以 
生成 内 容 表 格 了 。 


事件 和 事件 处 理 是 第 17 章 的 主题 ,但 是 这 一 节 会 提供 一 个 快速 概 
览 。 事 件 都 有 名 字 ， 比 如 click、change、1load、mouseover、 keypress 或 
a 指示 发 生 的 事件 的 通用 类 型 。 事 件 还 有 目标 ， 它 是 一 
个 对 象 ， 并 且 事 件 就 是 在 它 上 面 发 生 的 。 当 我 们 谈论 事件 的 时 候 ， 必 须 
同时 指定 事件 类 型 《名字 ) 和 目标 : 比如 ， 一 个 单 击 事件 发 生 在 
HIMLButtonElement 对 象 上 上， 或 者 一 个 readystatechange 事 件 发 生 在 
XMLHttpRequest 对 象 上 。 


如 果 想 要 程序 啊 应 一 个 事件 ， 写 一 个 函数 ， 叫 做 “事件 处 理 程 
序 ” “事件 监 昕 器 ”或 “回调 ?"。 然 后 注册 这 个 函数 ， 这 样 他 就 会 在 事件 
发 生 时 调用 它 。 正 如 前 面 提 到 的 ， 这 可 以 通过 HTML 属 性 来 完成 ， 但 是 
我 们 不 鼓励 将 JavaScript 代 码 和 HTMEL 内 容 混 消 在 一 起 。 反 之 ， 注 册 事 件 
处 理 程序 最 简单 的 方法 是 把 JavaScript 函 数 赋值 给 目标 对 象 的 属性 ， 类 似 
这 样 的 代码 : 




















window.onload=function(){...}; 

document .getElementById("button1").onclick=function(){...}; 
function handleResponse(){.. 

request ,onreadystatechange= handleResponse; 


注意 ， 按 照 约定 ， 事 件 处 理 程序 的 属性 的 名 字 是 以 "on" 开 始 ， 后 面 
跟着 事件 的 名 字 。 还 要 注意 在 上 面 的 任何 代码 里 没有 函数 调用 : 只 是 把 








函数 本 身 赋 值 给 这 些 属性 。 浏 览 费 会 在 事件 发生 时 执行 调用 。 用 事件 进 
行 异 步 编 程 会 经 常 涉 及 风 套 函数 ， 也 经 常 要 在 函数 的 函数 里 定义 函数 。 


对 于 大 部 分 浏览 器 中 的 大 部 分 事件 来 说 ， 会 把 一 个 对 象 传递 给 事件 
处 理 程序 作为 参数 ， 那 个 对 象 的 属性 提供 了 事件 的 详细 信息 。 比 如 ， 传 
递 给 单 击 事件 的 对 象 ， 会 有 一 个 属性 说 明 鼠 标的 哪个 按钮 被 单 击 。 (在 
下 里 ， 这 些 事件 信息 被 存储 在 全 局 event 对 象 里 ， 而 不 是 传递 给 处 理 程序 
函数 。) 事件 处 理 程 序 的 返回 值 有 时 用 来 指示 函数 是 否 充分 处 理 了 事 
件 ， 以 及 阻止 浏览 器 执行 它 默 认 会 进行 的 各 种 操作 。 


有 些 事 件 的 目标 是 文档 元 系 ， 它 们 会 经 常 往 上 传递 给 文档 树 ， 这 个 
过 程 叫 做 “ 冒 泡 ?。 例 如 ， 如 果 用 户 在 二 button 之 元 系 上 单 击 鼠 标 ， 单 击 
事件 就 会 在 按钮 上 触 友 。 如 果 注 册 在 按钮 上 的 函数 没有 处 理 〈 并 且 冒 泡 
停止 ) 该 事件 ， 事 件 会 骨 泡 到 按钮 众 套 的 容 露 元素， 这样， 任何 注册 在 
容器 元 系 上 的 蛙 击 事件 都 会 调用 。 


如 果 需 要 为 一 个 事件 注册 多 个 事件 处 理 程 序 函 数 ， 或 者 如 果 想 要 写 
一 个 可 以 安全 注册 事件 处 理 程 序 的 代码 模块 ， 就 算 另 一 个 模块 已 经 为 相 
同 的 目标 上 的 相同 的 事件 注册 了 一 个 处 理 程 序 ， 也 需要 用 到 另 一 种 事件 
处 理 程序 注册 技术 。 大 部 分 可 以 成 为 事件 目标 的 对 象 都 有 一 个 叫做 
addEventListaner() 的 方法 ， 人 允许 注册 多 个 监听 器 : 














window.addEventListener("load",function(){...},false); 
request.addEventListener("readystatechange",function(){...},false); 





注音 这 个 函数 的 第 一 个 参数 是 事件 的 名 称 。 虽 然 addEventListener() 
己 经 标准 化 超过 了 十 年 ， 而 微软 目前 只 有 在 IE9 里 实现 了 它 。 在 I 下 8 以 及 
之 前 的 浏览 器 中 ， 必 须 使 用 一 个 相似 的 方法 ， 叫 做 attachEvent(O: 





window.attachEvent("onload",function(){...}); 











参见 第 17 章 查看 更 多 关于 addEventListener() 和 attachEvent() 的 内 容 。 


客户 问 JavaScript 程 序 还 使 用 异步 通知 类 型 ， 这 些 类 型 往往 不 是 事 
件 。 如 果 设 置 Window 对 象 的 onerror 属 性 为 一 个 函数 ， 会 在 发 生 ( 参 阅 
草 14.6 节 ) JavaScript 错 误 〈 或 其 他 未 捕获 的 异常 ) 时 调用 函数 。 还 有 ， 
setTimeoutO0 和 setIntervalO 函 数 〈 这 些 是 window 对 象 的 方法 ， 因 此 是 客 





户 端 JavaScript 的 全 局 函数 ) 会 在 指定 的 一 段 时 间 之 后 触发 指定 函数 的 调 
用 。 传 递 给 setTimeoutO 的 函数 和 真实 事件 处 理 程序 的 注册 不 同 ， 它 们 通 
第 叫做 “回调 逻辑 ?而 不 是 “处 理 程序 ”， 但 它们 和 事件 处 理 程序 一 样 ， 也 
是 异步 的 。 参 见 14.1 节 获得 更 多 关于 setTimeout() 和 setInterval() 的 信息 。 


例 13-5 演 示 了 setTimeout()、addEventListener() 和 和 attachEvent()， 定 义 
一 个 onload0 函 数 注 册 在 文档 载 入 完成 时 执行 的 函数 。on load0 是 非常 有 
用 的 函数 ， 我 们 会 在 本 书后 面 的 例子 中 用 到 它 。 


例 13-5: onLoad()， 当 文档 载 入 完成 时 调用 一 个 函数 








// 注 册 函 数 f， 当 文档 载 入 完成 时 执行 这 个 函数 f 

// 如 果 文 档 已 经 载 入 完成 ， 尽 快 以 异步 方式 执行 它 

function onLoad(f){ 
if(onLoad.1oaded)// 如 果 文 档 已 经 载 入 完成 
window.setTimeout(f,0);// 将 f 放 入 异步 队列 ， 并 尽快 执行 它 
else if(window.addEventListener )// 注 册 事件 的 标准 方法 
window.addEventListener("load",f,false); 

else if(window.attachEvent)//IE8 以 及 更 早 的 IE 版 本 浏览 器 注册 事件 的 方法 
window.attachEvent("onload",f); 



























































} 

// 给 onLoad 设 置 一 个 标志 ， 用 来 指示 文档 是 否 载 入 完成 

onLoad .loaded=false;// 注 册 一 个 函数 ， 当 文档 载 入 完成 时 设置 这 个 标志 
onLoad(function( ){onLoad.1loaded=true;}); 






































13.3.3 ”客户 端 JavaScript 线 程 模型 


JavaScript 语 言 核心 并 不 包含 任何 线程 机 制 ， 并 且 客 户 端 JavaScript 
传统 上 也 没有 定义 任何 线程 机 制 。HIML5 定 义 了 一 种 作为 后 人 台 线 程 
的 "WebWorker"， 但 是 客户 端 JavaScript 还 像 严 格 的 单线 程 一 样 工 作 。 甚 
客户 端 JavaScript 也 不 会 知晓 是 否 真 的 有 并 行 
所 的 执行 。 


单线 程 执 行 是 为 了 让 编程 更 加 人 简单。 编写 代码 时 可 以 确保 两 个 事件 
处 理 程序 不 会 同一 时 刻 运行 ， 操 作文 档 内 容 时 也 不 必 担 心 会 有 其 他 线程 
试图 同时 修改 文 要 ， 并 且 永 远 不 需要 在 写 JavaScript 代 码 的 时 候 担心 锁 、 
死 锁 和 竞 态 条 件 〈race condition ) 。 


单线 程 执行 意味 着 浏览 器 必须 在 脚本 和 事件 句 处 理 程序 执行 的 时 候 
停止 响应 用 户 输入 。 这 为 JavaScript 程 序 员 带 来 了 负担 ， 它 意味 着 
JavaScript 脚 本 和 事件 处 理 程序 不 能 运行 太 长 时 间 。 如 果 一 个 脚本 执行 计 
算 密集 的 任务 ， 它 将 会 给 文档 载 入 带 来 延迟 ， 而 用 户 无 法 在 脚本 完成 前 






































看 到 文档 内 容 。 如 果 事 件 处 理 程序 执行 计算 密集 的 任务 ， 浏 览 器 可 能 变 
得 无 法 响应 ， 可 能 会 导致 用 户 认 为 浏览 器 崩溃 也 。 


如 果 应 用 程序 不 得 不 执行 太 多 的 计算 而 导致 明显 的 延迟 ， 应 该 允许 
文档 在 执行 这 个 计算 之 前 完全 载 入 ， 并 确保 能 够 告知 用 户 计算 正在 进行 
并 且 浏 览 器 没有 挂 起 。 如 果 可 能 将 计算 分 解 为 离散 的 子 任务 ， 可 以 使 用 
setTimeout() 和 setInterval() 方 法 在 后 台 运 行 子 任务 ， 同 时 更 新 一 个 进度 指 
示 器 回 用 户 显 示 反 馈 。 


HTML5 定 义 了 一 种 并 发 的 控制 方式 ， 叫 做 "Web worker"。Web 
worker 是 一 个 用 来 执行 计算 密集 任务 而 不 冻结 用 户 界面 的 后 台 线 程 。 运 
行 在 Web worker 线 程 里 的 代码 不 能 访问 文档 内 容 ， 不 能 和 主线 程 或 其 他 
worker 共 享 状态 ， 只 可 以 和 主线 程 和 其 他 worker 通 过 异步 事件 进行 通 
信 ， 所 以 主线 程 不 能 检测 并 发 性 ， 并 且 Web worker 不 能 修改 JavaScript 程 
序 的 基础 单线 程 执 行 模型 。 参 见 22.4 节 获得 更 多 Web worker 的 信息 。 


13.3.4 客户 端 JavaScript 时 间 线 


我 们 已 经 看 到 了 JavaScript 程 序 从 脚本 执行 阶段 开始 ， 然 后 切换 到 事 
件 处 理 阶段 。 本 节 会 更 详细 地 解释 了 JavaScript 程 序 执行 的 时 间 线 。 


1.Web 浏 览 器 创建 Document 对 象 ， 并 且 开 始 解 析 Web 页 面 ， 解 析 
HTML 元 素 和 它们 的 文本 内 容 后 添加 Element 对 象 和 Text 节 点 到 文档 中 。 
在 这 个 阶段 document.readystate 属 性 的 值 是 "loading"。 





2. 当 HTML 解 析 器 遇 到 没有 async 和 defer 属 性 的 二 script 二 元 素 时 ， 它 
把 这 些 元 素 添 加 到 文档 中 ， 然 后 执行 行内 或 外 部 脚本 。 这 些 脚 本 会 同步 
执行 ， 并 且 在 脚本 下 载 〈 如 果 需 要 ) 和 执行 时 解析 器 会 暂停 。 这 样 脚本 
就 可 以 用 document.write(0) 来 把 文本 插入 到 输入 流 中 。 解 析 器 恢复 时 这 些 
文本 会 成 为 文档 的 一 部 分 。 同 步 脚本 经 党 简单 定义 函数 和 注册 后 面 使 用 
的 注册 事件 处 理 程 序 ， 但 它们 可 以 轴 历 和 操作 文档 树 ， 因 为 在 它们 执行 
时 已经 存在 了 。 这 样 ， 同 步 脚 本 可 以 看 到 它 目 己 的 和 script 之 元 素 和 它 
们 之 前 的 文档 内 容 。 


3. 当 解析 恬 遇 到 设置 了 async 属 性 的 二 script 二 元 素 时 ， 它 开始 下 载 
脚本 文本 ， 并 继续 解析 文档 。 脚 本 会 在 它 下 载 完 成 后 尽快 执行 ， 但 是 解 
析 占 没有 停 下 来 等 它 下 载 。 异 步 脚 本 禁止 使 用 document.write0) 方 法 。 它 
们 可 以 看 到 自己 的 <script> 元 素 和 它 之 前 的 所 有 文档 元 素 ， 并 且 可 能 











或 干脆 不 可 能 访问 其 他 的 文档 内 容 。 
4. 当 文档 完成 解析 ，document.readyState 属 性 变 成 "interactive"。 


5. 所 有 有 defer 属 性 的 脚本 ， 会 按 它们 在 文档 的 里 的 出 现 顺 序 执行 
异步 脚本 可 能 也 会 在 这 个 时 间 执 行 。 延 迟 脚本 能 访问 完整 的 文档 树 ， 禁 
止 使 用 document.write0) 方 法 。 


6. 浏 览 器 在 Document 对 象 上 触发 DOMContentLoaded 事 件 。 站 
着 程 ) 训 执 行 从 同步 脚本 执行 阶段 转换 到 了 异步 事件 驱动 阶段 。 但 要 
意 ， 这 时 可 能 还 有 异步 脚本 没有 执行 完成 。 


这 时 ， 文 档 已 经 完全 解析 完成 ， 但 是 浏览 器 可 能 还 在 等 竺 其 他 内 
容 载 入 如 图 片 。 当 所 有 这 些 内 容 完 成 载 入 时 ， 并 且 所 有 异 步 沁 本 完成 
载 入 和 执行 ，document.readyState 属 性 改变 为 "complete"，Web 浏 览 右 触 
发 Window 对 象 上 的 load 事 件 。 


8. 从 此 刻 起 ， 会 调用 异步 事件 ， 以 异步 啊 应 用 户 输入 事件 、 网 络 事 
件 、 计 时 器 过 期 等 。 


这 是 一 条 茶 理 想 的 时 间 线 ， 但 是 所 有 浏览 器 都 没有 支持 它 的 全 部 细 

。 所 有 浏览 器 普遍 都 文 持 load 事 件 ， 都 会 触发 它 ， 它 是 决定 文档 完全 
ee i | 的 技术 。DOMContentLoaded 事 件 在 load 事 件 之 

前 触发 ， 当 前 所 有 浏览 器 都 支持 这 个 事件 ， 除 了 IE 之 外 ， 

document.readyState 属 性 在 写本 书 时 已 被 大 部 分 浏览 器 实现 ， 但 是 属性 
的 值 在 浏览 器 之 间 有 细微 的 差别 。defer 属 性 被 所 有 当前 版 本 的 下 支持 ， 
但 是 现在 还 未 被 其 他 浏览 器 实现 。 async 属 性 的 支持 在 号 本 书 时 还 个 通 
用 ,但 是 例 13- 4 里 展示 的 异步 脚本 执行 技术 被 当前 所 有 当前 浏览 右 文 
持 。 (但 是 ， 要 注意 用 类 似 loadasync() 函 数 动态 载 入 脚本 的 9 让 程序 
执行 的 脚本 载 入 阶段 和 事件 驱动 阶段 之 间 的 界限 更 加 模糊 。 


条 时 间 线 没有 指定 什么 时 候 文 档 开始 对 用 户 可 见 或 什么 时 候 Web 
浏览 器 必须 开始 响应 用 户 输入 事件 这 些 古 实现 细 让 。 对 于 很 长 的 文档 
或 非常 慢 的 网 络 链接 ，Web 浏 览 器 理论 上 会 泻 染 一 部 分 0 并 且 在 所 
有 脚本 执行 之 前 ， 束 和 多 许 用 户 开始 和 责 窗 产生 一 些 交 互 。 这 种 情况 
人 


13.4 ”兼容 性 和 互 用 性 























Web 浏 览 器 是 Web 应 用 的 操作 系统 ， 但 是 web 是 一 个 存在 各 种 差异 
性 的 环境 ，Web 文 档 和 应 用 会 在 不 同 操作 系统 (Windows、Mac OS、 
Linux、iPhone OS、Android〉 的 不 同 开 发 两 (Microsoft、Mozilla、 
Apple、Google、Opera) 的 不 同时 代 的 浏览 器 〈 从 预览 版 的 浏览 器 到 类 
似 IE6 这 种 十 多 年 之 前 的 浏览 器 〉 上 和 查看 和 运行 。 写 一 个 健壮 的 客户 端 
JavaScript 程 序 并 能 正确 地 运行 在 这 么 多 类 型 的 平台 上 ， 的 确 是 一 种 挑 
战 。 


客户 亲 JavaScript 兼 容 性 和 交互 性 的 问题 可 以 归纳 为 以 下 三 类 : 
演化 


Web 平 台 一 直 在 演变 和 发 展 当 中 。 一 个 标准 规范 会 倡导 一 个 新 的 特 
性 或 API。 如 果 特 性 看 起 来 有 用 ， 浏 览 器 开发 商 实现 它 。 如 果 足 够 多 的 
开发 商 实现 它 ， 开 发 者 开始 试用 这 个 特性 ， 并 依赖 于 这 个 特性 ， 然 后 这 
个 特性 就 在 Web 平 台中 广泛 使 用 。 有 了 时候 浏 览 占 开发 商 和 Web 开 发 者 引 
领 这 种 标准 规范 的 指定 ， 开 发 好 官方 的 版 本 ， 之 前 该 特性 已 经 成 为 一 个 
事实 的 标准 。 男 一 种 情况 ， 新 特性 已 经 被 添加 到 Web 中 ， 新 浏览 器 支持 
它 但 是 老 浏览 器 不 文 持 。Web 开 发 者 必须 在 使 用 老 旧 浏览 器 的 大 量 用 户 
和 使 用 新 式 浏 览 器 的 少量 用 户 之 间 做 出 权衡 。 


未 实现 


有 时 候 ， 浏 览 器 开发 商 之 间 对 于 某 一 个 特性 是 否 足够 有 用 到 要 实现 
存在 观点 上 的 差异 。 一 些 开 发 商 实现 了 这 个 特性 ， 而 其 他 的 没有 实现 。 
有 些 现代 浏览 器 实现 的 功能 在 老 旧 浏览 器 中 没 实 现 ， 这 种 情况 还 好 ， 但 
同样 实现 一 个 功能 在 不 同 浏览 器 中 有 很 大 差别 ， 例 如 ，IE8 不 支持 二 
canvas 二 元 素 ， 虽 然 所 有 其 他 浏览 器 已 经 实现 了 它 。 一 个 更 加 糟糕 的 例 
子 是 ，Microsoft 决 定 不 实现 DOM ”Level 2 Event 规 范 ( 它 定义 了 
addEventListener() 和 相关 的 方法 ) 。 这 个 规范 在 十 年 之 前 已 经 标准 化 
了 ， 其 他 浏览 器 厂商 已 经 支持 了 很 久 了 饵 。 

















bug 


每 个 浏览 器 都 有 bug， 并 且 没 有 按照 规范 准确 地 实现 所 有 的 客户 端 
JavaScript API。 有 时 候 编 写 能 兼容 各 个 浏览 右 的 JavaScript 程 序 是 一 个 粮 
透 了 的 工作 ， 必 须 研究 已 有 浏览 器 中 的 各 种 bug。 


泣 运 的 是 ，JavaScript 语 言 本 身 是 被 所 有 浏览 器 厂商 实现 的 ， 它 不 是 
兼容 性 问题 的 源头 。 所 有 浏览 右 都 有 对 ES3 的 通用 实现 ， 并 且 在 写本 书 
的 时 候 ， 所 有 厂商 都 在 实现 ES5。ES3 和 ES5 之 间 的 转换 可 能 会 导致 兼容 
性 问题 ， 因 为 一 些 浏览 器 会 支持 严格 模式 而 其 他 的 不 支持 ， 浏 览 器 厂商 
对 ES5 的 实现 基本 是 相互 通 重用 的 。 


首先 ， 要 解决 JavaScript 的 兼容 性 问题 是 要 了 解 问题 的 根源 是 什么 。 

Web 浏 览 器 版 本 的 更 碗 要 比 本 书 的 版 本 快 三 倍 多 ， 因 此 本 书 没 办 法 告诉 
你 什么 版 本 的 浏览 费 实 现 了 哪些 特性 ， 或 者 不 会 过 多 讨论 哪些 特性 在 茶 
些 浏 览 器 下 的 表现 如 何 或 其 中 的 bug。 这 些 比较 具体 的 信息 最 好 直接 去 
网 上 和 奉 找 。HTML5 标 准 化 的 努力 的 目标 是 最 终 产 生 一 个 测试 套件 。 在 
写本 书 的 时 候 ， 还 没有 这 样 的 测试 ， 但 是 一 旦 存在 这 样 的 测试 ， 这 必定 
会 给 浏览 器 兼容 性 领域 留 下 一 些 宝贵 的 财富 。 当 下 有 一 些 网 站 提供 了 这 
种 信息 ， 可 能 会 对 你 有 用 : 











https://developer.mozilla.org 
Mozilla 开 发 者 中 心 
http://msdn.microsoft.com 
Microsoft 开 发 者 网 络 
http://developer.apple.com/safari 
Apple 开 发 者 网 络 里 的 Safari 开 发 者 中 心 
http://code.google.com/doctype 


Google 把 Doctype 项 目 介 绍 为 “开放 Web 的 一 本 百科 全 书 ”。 这 个 用 户 
可 以 编辑 的 站 点 包含 客户 襄 JavaScript 的 各 种 兼容 性 表格 。 在 写本 书 的 时 
候 ， 这 些 表格 只 报告 了 每 个 浏览 右 里 是 否 存在 各 种 属性 和 方法 ， 而 事实 
上 没有 说 它们 是 否 工作 正常 。 


http:/en.wikipedia.org/wiki/Comparison_ of layout_engines (HTML _5) 


Wikipedia 文 章 跟 踪 了 HTML5 特 性 和 API 在 各 个 浏览 器 里 的 实现 状 


+ 


http://en.wikipedia.org/wiki/Comparison_of_ layout _engines_(Document 
一 篇 简单 的 文章 ， 跟 踪 DOM 特 性 的 实现 状态 。 
http://a.deveria.com/caniuse 


这 个 “ 何 时 可 用 ..…...” 站 点 跟 踪 重 要 Web 特 性 的 实现 状态 ， 允 许 根 据 
8 并 在 某 个 特性 只 剩 下 少量 已 部 获 的 浏览 器 不 支持 时 
推荐 使 用 。 








http:/www.quirksmode.org/dom 

根据 W3C 标 准 列 出 的 各 种 浏览 器 的 DOM 兼 容 性 表格 。 
http://webdevout.net/browser-support 

男 一 个 跟踪 浏览 絮 开 及 商 对 于 Web 标 准 的 实现 的 站 点 。 


注意 ， 列 表 的 最 后 三 个 站 点 是 由 个 人 维护 的 。 尽 管 它 们 是 客户 端 
JavaScript 的 先行 者 ， 但 这 些 站 点 可 能 不 会 总 是 保持 最 新 。 


当然 ， 意 识 到 浏览 器 之 间 的 兼容 性 问题 只 是 第 一 步 。 接 下 来 ， 你 需 
要 解决 这 些 不 兼容 性 。 一 种 策略 是 限制 自己 使 用 你 选择 文 持 的 所 有 浏览 
器 都 普遍 文 持 的 特性 《或 者 很 容易 模拟 出 的 特性 ) 。 之 前 提 及 的 “ 何 时 
[i ”这 个 网 站 (http://a.deveria.com/caniuse) 就 是 围绕 这 个 策略 
的 : 它 列 出 了 所 有 等 下 6 淘汰 之 后 才能 用 的 新 特性 ， 等 了 下 6 淘汰 之 后 ， 这 
个 网 站 也 没有 存在 的 必要 了 。 下 面 几 节 介 绍 一 种 略 有 点 消极 的 对 付 客户 
问 不 兼容 性 问题 的 策略 。 


13.4.1 处理 兼容 性 问题 的 类 库 


处 理 不 兼容 问题 其 中 一 种 最 简单 的 方法 是 使 用 类 库 。 比 如 ， 考 虑 客 
户 端 图 像 的 本 canvas 之 元 素 〈 第 21 章 的 主题 ) 。 正 是 唯一 不 支持 这 个 特 
性 的 当前 浏览 器 。 它 支持 一 种 星 深 的 客户 端 图 形 语言 ， 叫 做 VML， 尺 
管 如 此 ，canvas 元 素 可 以 基于 它 进行 模拟 。 开 源 的 "explorer canvas" 项 目 
在 http://code.google.com/p/explorercanvas 上 已经 发 布 了 一 个 类 库 ， 束 是 
做 这 件 事情 : 引入 一 个 JavaScript 代 码 文件 叫做 excanvas.js， 然 后 下 就 会 
看 起 来 像 它 支 持 二 canvas 二 元 素 一 样 。 




















关于 “当前 正在 使 用 的 浏览 器 


客户 端 JavaScript 是 一 个 充满 变化 的 概念 ， 特 别 是 随 着 ES5 和 HTML5 
的 出 现 。 因 为 平台 的 快速 演变 ， 我 们 往往 不 会 使 用 “ 某 些 特定 版 本 的 浏 
览 器 ”这 种 狭义 的 措辞 表述 。 所 有 这 样 的 表述 在 本 书 下 一 版 出 版 之 前 就 
过 时 了 。 因 此 ， 你 会 发 现 我 经 常 使 用 “所 有 当前 的 浏览 器 ”( 或 “ 除 正 之 
外 当前 所 有 浏览 器 ”) 放 入 我 所 表述 的 语 境 中 。 在 撰写 本 书 时 ， 当 前 的 
( 非 测试 版 ) 的 浏览 器 是 : 


‘Internet Explorer 8 


‘Firefox 3.6 

‘Safari 5 

Chrome 5 

Opera 10.10 

当 本 书 上 架 时 ， 当 前 浏览 器 可 能 会 是 Internet Explorer 9、Firefox 


4、Safari 5、Chrome 11 和 Opera 11。 


但 并 不 是 说 本 书 中 所 有 提 到 的 “当前 浏览 之 个 含义 ， 我 只 是 
希望 大 家 能 了 解 在 撰写 本 书 时 所 使 用 的 浏览 需 


本 书 第 5 版 用 了 词语 “现代 浏览 右 ?”， 而 不 是 “当前 浏览 喜 >。 那 个 版 
本 在 2006 年 发 布 ， 那 时 候 的 “当前 浏览 絮 ”* 是 Firefox 1.5、IE6、Safari 2 和 
Opera ”8.5〈(Google 的 Chrome 浏 览 器 还 不 存在 )。 本 书 中 保留 的 所 有 关 
于 “现代 浏览 堪 ” 的 表述 都 可 以 理解 “所 有 浏览 需 ”， 因 为 比 这 些 还 老 的 浏 
览 右 已 经 很 少 了 。 


本 书 (特别 是 第 22 章 ) 摘 述 的 一 些 最 新 的 客户 端 特 性 ， 这 些 特性 还 
没有 在 所 有 的 浏览 器 里 实现 。 然 而 这 些 特性 都 在 一 个 开放 的 标准 流程 下 
进行 开发 ， 己 经 在 至 少 一 个 发 布 的 浏览 器 里 实现 ， 并 看 起 来 会 被 所 有 浏 
览 器 厂 丙 接受 (可 能 除 Microsoft 之 外 )。 


excanvas.js 是 一 个 兼容 类 库 的 很 纯粹 的 例子 。 在 开发 过 程 中 ， 可 能 
会 对 某 个 特性 编写 类 似 的 类 库 。ES5 数 组 方法 〈7.9 节 ) ， 比 如 
forEachO0、mapO0 和 reduce0， 可 以 在 ES3 中 几乎 完美 模拟 ， 并 且 通 过 把 











合适 的 类 库 添 加 到 页 面 中 ， 可 以 把 这 些 强大 有 用 的 方法 当做 所 有 浏览 需 
平台 基线 的 部 分 。 


但 是 ， 有 了 时候 ， 不 可 能 完全 地 (或 有 效 地 ) 在 一 个 不 文 持 某 个 特性 
的 浏览 器 上 实现 一 个 特性 。 就 像 已 经 提 到 的 ， 正 是 唯一 没有 实现 标准 事 
件 处 理 API 的 浏览 器 ， 包 括 注册 事件 处 理 程序 的 addEventListener() 方 
法 。 正 支持 一 个 类 似 的 方法 叫做 attachEventO。attachEventO 不 像 
addEventListener() 一 样 强大 ， 并 且 在 下 提供 的 基础 上 透明 地 实现 整个 标 
准 并 非 真正 可 行 。 反 之 ， 开 发 者 有 时 定义 一 个 折 中 的 事件 处 理 方 法 ， 通 
常 叫 addEvent()， 它 可 以 用 addEventListener() 或 attachEvent() 来 方便 地 实 
现 绑 定 事件 的 功能 。 然 后 ， 它 们 在 所 有 的 代码 里 用 addEvent0 来 代 蔡 
addEventListener() 或 attachEvent()。 


在 实际 的 开发 工作 中 ， 今 天 不 少 We b 开 发 者 在 它们 所 有 的 We b 页 
面 上 用 了 客户 端 JavaScript 框 架 ， 比 如 jQuery (参见 第 19 间 ) 。 使 这 些 框 
架 必 不 可 少 的 一 个 重要 功能 是 : 它们 定义 了 新 的 客户 端 API 并 兼容 所 有 
浏览 右 。 例 如 ， 在 jQuery 里 ， 事 件 处 理 程序 的 注册 是 通过 叫 bind0 的 方 
法 完成 的 。 如 果 你 基于 jQuery 做 所 有 的 Web 开 发 ， 你 就 永远 不 需要 考虑 
addEventListener() 和 attachEvent() 之 间 的 不 兼容 性 问题 。 参 见 13.7 市 获得 
更 多 关于 客户 端 框架 的 信息 。 


13.4.2 分 级 浏览 器 支持 


分 级 浏览 器 (graded browser support) 是 由 Yahoo! 率 先 提 出 的 一 种 
测试 技术 。 从 某 种 维度 对 浏览 器 厂商 /版 本 /操作 系统 变 体 进行 分 级 。 分 
级 浏览 器 中 的 A 级 要 通过 所 有 的 功能 测试 用 例 。 对 于 C 级 浏览 器 来 说 则 
不 必 所 有 用 例 都 通过 测试 。A 级 浏览 器 需要 网 页 完全 可 用 ，C 级 浏览 器 
只 需 在 HTML 完 整 情况 下 可 用 即 可 ， 而 不 需要 JavaScript 和 CSS 都 正常 工 
作 。 那 些 不 是 A 级 和 C 级 的 浏览 器 都 称 做 X 级 浏览 器 : 这 部 分 都 是 全 新 的 
浏览 器 或 者 太 罕 见 的 浏览 器 。 我 们 默认 在 这 些 浏览 恬 中 都 是 网 页 完全 可 
用 的 ， 但 官方 并 不 会 对 X 级 浏览 器 中 的 功能 提供 完整 文 持 和 测试 。 


你 可 以 在 http:/developer.yahoo.comy/yuiyarticles/gbs 阅 读 更 多 关于 
Yahoo! 的 分 级 浏览 器 支持 情况 。 这 个 页 面 还 存 有 Yahoo! 当 前 的 A 级 和 C 
级 浏览 器 列表 (这 个 列表 每 季度 更 新 一 次 ) 包 。 就 算 自己 没有 采用 任何 
一 种 分 级 浏览 器 测试 基准 ， 使 用 Yahoo! 的 A 级 浏览 器 列表 是 一 种 简单 快 
捷 的 办 法 ， 通 过 得 阅 这 个 列表 也 能 清楚 地 知道 当前 比较 流行 的 浏览 器 是 








哪些 。 
13.4.3 ”功能 测试 


功能 测试 (capability ”testing)〉 是 解决 不 兼容 性 问题 的 一 种 强大 技 
术 。 如 果 你 想 试 用 某 个 功能 ， 但 叉 不 清楚 这 个 功能 是 否 在 所 有 的 浏览 器 
中 都 有 比较 好 的 兼容 性 ， 则 需要 在 脚本 中 添加 相应 的 代码 来 检测 是 否 在 
浏览 器 中 文 持 该 功能 。 如 果 期 望 使 用 的 功能 还 没有 被 当前 的 平台 所 文 
持 ， 要 么 不 在 该 平台 中 使 用 它 ， 要 么 提供 可 在 所 有 平台 上 运行 的 代码 。 


你 将 会 在 后 面 的 各 章 中 一 次 又 一 次 地 看 到 功能 测试 。 例 如 ， 在 第 17 
章 ， 有 如 下 所 示 的 代码 : 





















































if(element .addEventListener){f// 在 使 用 这 个 W3C 方 法 之 前 首先 检测 它 是 否 可 用 
element.addEventListener("keydown",handler, false); 
element.addEventListener("keypress",handler, false); 



































} 

else if(element.attachEvent ){// 在 使 用 该 IE 方 法 之 前 首先 检测 它 
element.attachEvent("onkeydown",handler); 
element.attachEvent("onkeypress",handler); 











} 
else{// 否 则 ， 选 择 普遍 支持 的 技术 
element.onkeydown=element .onkeypress=handler; 


} 








关于 功能 测试 最 重要 的 是 ， 它 并 不 涉及 浏览 器 开发 商 和 浏览 器 的 版 
本 号 。 人 代码 在 当前 的 浏览 器 集合 中 有 效 ， 在 浏览 器 的 后 续 版 本 中 也 同样 
有 效 ， 而 不 管 后 续 的 浏览 器 是 否 实现 了 这 些 功 能 的 集合 。 但 要 注意 的 
是 ， 这 种 方法 需要 测试 某 个 属性 或 方法 是 否 在 浏览 器 中 已 经 定义 了 ， 除 
非 该 属性 或 方法 完全 可 用 。 如 果 Microsoft 要 定义 一 个 addEventListener() 
方法 ， 但 Microsoft 只 是 实现 了 一 部 分 W3C 规 范 ， 在 调用 
addEventListener() 之 前 这 将 会 给 使 用 特性 测试 的 代码 带 来 很 多 麻烦 。 


13.4.4 ”怪异 模式 和 标准 模式 


Microsoft 在 发 布 IE6 的 时 候 ， 增 加 了 IE5 里 没有 的 很 多 CSS 标 准 特 
性 。 但 为 了 确保 与 已 有 Web 内 容 的 后 同 兼容 性 ， 它 定义 了 两 种 不 同 的 泻 
染 模式 。 在 “标准 模式 ”或 ‘CSS 兼容 模式 * 中 ， 浏 览 器 要 遵循 CSS 标 准 ， 
在 “怪异 模式 * 中 ， 浏 览 器 表现 的 和 IE4 和 IE5 中 的 怪异 非 标准 模式 一 样 。 
泻 染 模式 的 选择 依赖 于 HTML 文 件 顶 部 的 DOCTYPE 声 明 ， 在 IE6 中 打开 
没有 DOCTYPE 的 页 面 和 声明 了 某 些 权限 Doctype 的 页 面 都 会 按照 怪异 模 

















式 进行 泻 染 ， 定 义 了 严格 的 Doctype 的 页 面 (或 者 为 了 做 到 前 向 兼容 性 
而 添加 了 未 知 的 Doctype 的 页 面 ) 会 按照 标准 模式 进行 泻 染 ， 和 定义 了 
HTML5 Doctype (二 !IDOCTYPE html> ) 的 页 面 在 所 有 现代 浏览 器 中 都 
会 按照 标准 模式 泻 染 。 


怪异 模式 和 标准 模式 之 间 的 差别 经 历 了 很 长 时 间 的 发 展 历 程 ， 现 在 
新 版 本 的 正 都 文 持 标准 模式 ， 其 他 主流 浏览 器 也 都 文 持 标准 模式 。 这 两 
种 模式 都 已 经 被 HIML5 规 范 所 认可 。 人 怪异 模式 和 标准 模式 之 间 的 差异 
对 于 HIML 和 CSS 开 发 者 影响 最 大 。 但 客户 端 JavaScript 代 码 则 是 需要 知 
道 文 档 以 哪 种 模式 进行 泻 染 的 。 要 进行 这 种 这 染 模式 的 特性 检测 ， 通 第 
检查 document.compatMode 属 性 。 如 果 其 值 为 "CSS1Compat"， 则 说 明 浏 
览 器 工作 在 标准 模式 ; 如 果 值 为 "BackCompat" 〈 或 undefined， 说 明 属 性 
根本 不 存在 ) ， 则 说 明 浏 览 器 工作 在 怪异 模式 。 所 有 现代 浏览 器 都 实现 
了 compatMode 属 性 ， 并 且 HTML5 规 范 对 它 进 行 了 标准 化 。 


测试 compatMode 不 是 必要 的 。 但 是 ， 在 例 15-8 展 示 的 示例 代码 中 用 
到 了 它 。 








13.4.5 浏览 器 测试 


功能 测试 非常 适用 于 检测 大 型 功能 领域 的 支持 ， 比 如 可 以 使 用 这 种 
方法 来 确定 浏览 器 是 否 文 持 W3C 事 件 处 理 模型 还 是 下 的 事件 处 理 模 型 。 
另外 ， 有 时 候 可 能 会 需要 在 茶 种 浏览 喜 中 解决 个 别 的 bug 或 难题 ， 但 却 
没有 太 好 的 方法 来 检测 bug 的 存在 性 。 在 这 种 情况 下 ， 需 要 创建 一 个 针 
对 茶 个 平台 的 解决 方案 ， 这 个 解决 方案 和 特定 的 浏览 需 广 商 、 版 本 或 操 
作 系 统 〈 或 三 方面 的 组 合 ) 联系 紧密 。 


在 客户 端 JavaScript 中 检测 浏览 右 类 型 和 版 本 的 方法 就 是 使 用 
Navigator 对 象 ， 我 们 将 在 第 14 章 学 习 它 ， 确 定 当 前 浏览 右 的 厂商 和 版 本 
的 代码 通常 叫做 浏览 器 串 探 姻 〈browser sniffer) 或 者 客户 端 嗅 探 需 
(client sniffer〉 。 例 14-3 给 出 了 一 个 简单 的 例子 。 在 Web 的 早期 ， 当 
Netscape 和 正平 台 两 者 相互 不 兼容 的 时 候 ， 客 户 端 喂 探 《〈client sniffing ) 
就 是 一 种 常见 的 客户 端 编程 技术 ， 现 在 兼容 性 情况 已 经 基本 稳定 ， 浏 览 
器 串 探 不 像 奇 干 年 前 这 样 常 用 ， 但 侦 尔 有 些 场景 还 会 用 到 。 


需要 注意 的 是 ， 客 户 端 噢 探 也 可 以 在 服务 器 端 完 成 ，Web 服 务 器 根 
据 User-Agent 头 部 可 以 有 选择 地 返回 特定 的 JavaScript 代 码 给 客户 端 。 














13.4.6 ”Internet Explorer 里 的 条 件 注释 


实际 上 ， 读 者 会 发 现 客户 病 JavaScript 编 程 中 的 很 多 不 兼容 性 都 是 针 
对 下 的 。 也 就 是 说 ， 必 须 按照 某 种 方式 为 下 编写 代码 ， 而 按照 男 一 种 方 
式 为 其 他 的 浏览 器 编写 代码 。 正 文 持 条 件 注释 〈 由 IE5 引 入 ) ， 尽 管 这 
种 做 法 并 不 符合 标准 规范 ， 但 是 在 处 理 不 兼容 性 时 非常 有 用 。 


下 面 是 HTML 中 的 条 件 注释 的 样子 。 注 意 ，HTML 注 释 使 用 结束 的 
分 隔 符 的 技巧 : 





<!--[if IE 6]> 

This content is actually inside an HTML comment. 

It will only be displayed in IE 6. 

=<![endif]--> 

<!--[if lte IE 7]> 

This content will only be displayed by IE 5,6 and 7 and earlier. 
lte stands for"less than or equal".You can also use"lt","gt"and"gte". 
<![endif]--> 

<!--[if!IE]><--> 

This is normal HTML content,but IE will not display it 

because of the comment above and the comment below. 
=<!--<![endif]--> 

This is normal content,displayed by all browsers. 





来 看 一 个 具体 的 例子 ， 上 文 介绍 过 使 用 excanvs.js 类 库 在 Internet 
Explorer 里 实现 二 canvas 元 素 。 由 于 这 个 类 库 只 有 下 需要 (并 且 也 只 为 
IE 工作 ) ， 因 此 有 理由 在 页 面 里 使 用 条 件 注释 引入 它 ， 这 样 其 他 浏览 器 
就 不 会 载 入 它 : 





<!--[if IE] 之 <script src="excanvas.js"></script><![endif]--> 





IE 的 JavaScript 解 释 占 也 文 持 条 件 注 释 ，C 和 和 C++ 程序 员 可 能 觉得 它 
们 和 C 预 处 理 器 的 闻 fdef/#endif 功 能 很 相似 。 正 中 的 JavaScript 条 件 注 释 以 
文本 /*@cc_on 开 头 ， 以 文本 @x*/ 结 束 (cc_on ”stands 中 的 cc 表示 条 件 编 
译 ) 。 下 面 的 条 件 注释 包含 了 只 在 正中 执行 的 代码 : 





/*@cc_on 

@if(@_jscript)// 该 代码 位 于 一 条 JS 注 释 内 但 在 IE 中 执行 它 
alert("In IE"); 

Q@end 

@*/ 


























在 一 条 条 件 注释 内 部 ， 关 键 字 @if、@else 和 @end 划 分 出 哪些 是 要 
被 下 的 JavaScript 解 释 器 有 条 件 地 执行 的 代码 。 大 多 数 时 候 ， 只 需要 上 面 
所 示 的 简单 的 条 件 : @if(@_jscript)。JScript 是 Microsoft 自 己 的 JavaScript 
解释 器 的 名 字 ， 而 @_jscript 变 量 在 IE 中 总 是 为 true。 


通过 条 件 注释 和 常规 的 JavaScript 注 释 的 合理 的 交叉 组 合 ， 可 以 设置 
在 正中 运行 一 段 代 码 而 在 所 有 其 他 浏览 费 中 运行 男 一 段 不 同 的 代码 : 





/*Q@cc_on 

@if(@ jscript)// 这 里 的 代码 在 一 条 条 件 注释 中 ， 也 在 一 条 常规 的 JavaScript 注 释 中 
//IE 会 执行 这 段 代码 ， 其 他 浏览 器 不 执行 它 
alert('You are using Internet Explorer); 
@else*/// 这 段 代码 并 没 在 JavaScript 注 释 中 ， 但 仍然 在 IE 条 件 注释 中 
// 也 就 是 说 除了 IE 之 外 的 所 有 浏览 器 都 执行 这 里 的 代码 

alert('You are not using Internet Explorer');/*Q@end 
@*/ 














































































































13.5 可 访问 性 


Web 是 发 布 信 息 的 理想 工具 ， 而 JavaScript 程 序 可 以 增强 对 信息 的 访 
问 。 然 而 ，JavaScript 程 序 员 必须 小 心 ， 因 为 程序 员 写 代码 太 过 随意 ， 以 
至 于 那些 有 视觉 障碍 或 者 肢体 困难 的 用 户 没 办 法 正确 地 获取 信息 。 


盲人 用 户 使 用 一 种 叫做 屏幕 阅读 器 的 “辅助 性 技术 ”将 书面 的 文字 变 
成 语音 词汇 。 有 些 屏幕 疯 读 器 是 识别 JavaScript 的 ， 而 另 一 些 只 能 在 禁用 
JavaScript 时 才 会 工作 得 更 好 。 如 果 你 设计 的 站 点 过 于 依赖 JavaScript 来 
呈现 数据 的 话 ， 就 会 把 那些 使 用 读 屏 软件 的 用 户 拒 之 门 外 。〈 当 然 也 会 
把 那些 使 用 像 手 机 这 样 不 支持 JavaScript 的 移动 设备 的 用 户 以 及 那些 有 意 
禁用 浏览 器 脚本 的 用 户 排除 在 外 。) JavaScript 的 角色 应 当 是 增加 信息 的 
表现 力 ， 而 不 是 负责 信息 的 呈现 。JavaScript 可 访问 性 的 一 条 重要 原则 
是 ， 设 计 的 代码 即使 在 禁用 JavaScript 解 释 器 的 浏览 器 中 也 能 正常 使 用 
《或 至 少 以 某 种 形式 正常 使 用 ) 。 


可 访问 性 关心 的 另 一 个 重要 的 问题 是 ， 对 于 那些 只 使 用 键盘 但 不 能 
(或 者 选择 不 用 ) 使 用 鼠标 的 用 户 来 说 ， 如 果 编 写 的 JavaScript 代 码 依赖 
于 特定 的 鼠标 事件 ， 这 就 会 将 那些 不 使 用 鼠标 的 用 户 排除 在 外 。Web 浏 
览 器 允许 使 用 键盘 来 遍历 和 激活 一 个 Web 页 面 中 的 UI 元 素 。 并 且 
JavaScript 代 码 也 应 该 允许 这 样 做 。 正 如 第 17 章 所 介绍 的 ，JavaScript 支 
持 独 立 于 设备 的 事件 ， 例 如 onfocus 和 onchange， 以 及 依赖 于 设备 的 事件 























(比如 onmouseover 和 onmousedown ) 。 为 了 考虑 到 可 访问 性 ， 应 该 尽 
可 能 地 支持 独立 于 设备 的 事件 。 


创建 可 访问 的 We b 页 面 并 非 鸡 毛 攻 皮 的 小 问题 ， 而 对 于 可 访问 性 的 
完整 讨论 则 超出 了 本 书 的 范畴 。 关 心 可 访问 性 的 Web 应 用 开发 者 应 该 阅 
读 这 里 的 文档 : http://www.w3.org/WAIl/intro/aria 的 WAI-ARIA (Web 
Accessibility Initiative-Accessible Rich Internet Applications) 标准 。 


13.6 ”安全 性 


Web 浏 览 器 中 包含 JavaScript 解 释 器 ， 也 就 是 说 ， 一 旦 载 入 Web 页 
面 ， 就 可 以 让 任意 的 JavaScript 代 码 在 计算 机 里 执行 。 很 明显 ， 这 里 存在 
着 安全 隐患 ， 浏 览 器 厂商 也 在 不 断 地 权衡 下 面 这 两 个 方面 之 间 的 博弈 : 


.定义 强大 的 客户 端 API， 启 用 强大 的 web 应用; 
.阻止 恶意 代码 读 取 或 修改 数据 、 盗 取 了 隐私、 诈骗 或 浪费 时 间 。 


就 像 在 其 他 领域 中 一 样 ，JavaScript 也 在 盘根错节 的 安全 漏洞 和 补丁 
之 间 不 断 地 发 展演 化 。 在 Web 早期， 浏览 器 添加 了 类 似 能 够 打开 、 移 
动 、 调 整 窗 口 大 小 以 及 编辑 浏览 器 状态 栏 的 功能 。 而 当 不 道德 的 广告 商 
和 骗子 开始 滥用 这 些 技术 ， 浏 览 器 制作 者 不 得 不 限制 或 禁用 这 些 API。 
今天 ， 在 标准 化 HTML5 的 进程 中 ， 浏 览 器 厂商 会 小 心 ( 并 且 开 放 和 合 
作 性 地 ) 拓 量 某 个 长 期 存在 的 安全 限制 ， 并 且 在 〈 和 希望 ) 不 引入 新 的 安 
全 漏洞 的 基础 上 给 客户 端 JavaScript 添 加 少量 的 功能 。 


下 面 几 节 会 介绍 JavaScript 的 安全 限制 和 安全 问题 ， 这 些 问 题 是 每 个 
Web 开 发 者 都 需要 意识 到 的 。 


13.6.1 _ JavaScript 不 能 做 什么 


We b 浏 览 堪 针对 恶意 代码 的 第 一 条 防线 就 是 它们 不 文 持 某 些 功能 。 
例如 ， 客 户 端 JavaScript 没 有 权限 来 号 入 或 删除 客户 计算 机 上 的 任意 文件 
或 列 出 任意 目录 。 这 意味 着 JavaScript 程 序 不 能 删除 数据 或 植 入 病毒 。 

《但 22.6.5 节 会 介绍 JavaScript 如 何 阅 读 用 户 选 择 的 文件 ，22.7 节 介绍 
JavaScript 如 何 实现 安全 隐私 文件 系统 ， 以 及 如 何 读 取 和 写 入 文件 。) 


类 似 地 ， 客 户 端 JavaScript 没 有 任何 通用 的 网 络 能 力 。 客 户 端 














JavaScript 程 序 可 以 对 HTTP 协议 编程 《参见 第 18 章 ) ; 并 有 HTML5 有 一 
个 附属 标准 叫 WebSockets， 定 义 了 一 个 类 套 接 字 的 API， 用 于 和 指定 的 
服务 器 通信 。 但 是 ， 这 些 API 都 不 允许 对 于 范围 更 广 的 网 络 进 行 直接 访 
问 。 通 用 的 Internet 客 户 端 和 服务 器 不 能 同时 使 用 客户 端 JavaScript 来 写 
[10] 


浏览 器 针对 恶意 代码 的 第 二 条 防线 是 在 目 己 文 持 的 茶 些 功能 上 施加 
限制 。 以 下 是 一 些 功能 限制 : 


-JavaScript 程 序 可 以 打开 一 个 新 的 浏览 需 窗 口 ， 但 是 为 了 防止 广告 
商 滥 用 弹出 窗口 ， 很 多 浏览 占 限 制 了 这 一 功能 ， 使 得 只 有 为 了 啊 应 鼠标 
单 击 这 样 的 用 户 触发 事件 的 时 候 ， 才 能 使 用 它 。 


-JavaScript 程 序 可 以 关闭 目 己 打开 的 浏览 喜 窗 口 ， 但 是 不 允许 它 不 
经 过 用 户 确 认 就 关闭 其 他 的 窗口 。 


:HTML FileUpload 元 素 的 value 属 性 是 只 读 的 。 如 果 可 以 设置 这 个 属 
性 ， 脚 本 束 能 设置 它 为 任意 期 望 的 文件 名 ， 从 而 导致 表单 上 传 指定 文件 
《比如 密码 文件 ) 的 内 容 到 服务 器 。 


脚本 不 能 读 取 从 不 同 服务 器 出 载 入 的 文档 的 内 容 ， 除 非 这 个 就 是 
包含 该 脚本 的 文档 。 类 似 地 ， 一 个 脚本 不 能 在 来 自 不 同 服务 器 的 文档 上 
注册 事件 监听 器 。 这 承 防止 脚本 禄 取 其 他 页 面 的 用 户 输入 《例如 ， 组 成 
一 个 密码 项 的 键盘 单 击 过 程 ) 。 这 一 限制 叫做 同 源 策 略 (same-origin 
policy〉， 下 一 市 将 更 详细 地 介绍 它 。 


注意 ， 这 里 并 未 给 出 所 有 的 客户 端 JavaScript 的 限制 项 ， 不 同 浏览 器 
有 不 同 的 安全 集 略 ， 并 可 能 实现 不 同 的 API 限 制 。 部 分 浏览 器 可 能 还 允 
许 根 据 用 户 偏 好 来 增强 或 减弱 限制 。 


13.6.2” 同 源 策略 


同 源 策略 是 对 JavaScript 代 码 能 够 操作 哪些 Web 内 容 的 一 条 完整 的 安 
全 限制 。 当 Web 页 面 使 用 多 个 <<iframe 二 元 素 或 者 打开 其 他 浏览 器 窗口 
的 时 候 ， 这 一 策略 通常 就 会 发 挥 作用 。 在 这 种 情况 下 ， 同 源 策略 负责 管 
理 窗口 或 窗 体 中 的 JavaScript 代 码 以 及 和 其 他 窗口 或 帧 的 交互 。 具 体 来 
说 ， 脚 本 只 能 读 取 和 所 属 文档 来 源 相同 的 窗口 和 文档 的 属性 (参见 14.8 
节 了 解 如 何 使 用 JavaScript 操 控 多 个 窗口 和 窗 体 ) 。 











文档 的 来 源 包含 协议 、 主 机 ， 以 及 载 入 文档 的 URL 问 口 。 从 不 同 
Web 服 务 器 载 入 的 文档 具有 不 同 的 来 源 。 通 过 同一 主机 的 不 同 端口 载 入 
的 文档 具有 不 同 的 来 源 。 使 用 http: 协 议 载 入 的 文档 和 使 用 https: 协 议 载 入 
的 文档 具有 不 同 的 来 源 ， 即 使 它们 来 自 同 一 个 服务 占 。 


脚本 本 身 的 来 源 和 同 源 策略 并 不 相关 ， 相 关 的 是 脚本 所 租 入 的 文档 
的 来 源 ， 理 解 这 一 点 很 重要 。 例 如 ， 假 设 一 个 来 自主 机 A 的 脚本 被 包含 
到 (使 用 二 script 二 > 标记 的 src 属 性 ) 宿主 B 的 一 个 web 页 面 中 。 这 个 脚本 
的 来 源 是 主机 B， 并 且 可 以 完整 地 访问 包含 它 的 文档 的 内 容 。 如 果 脚 本 
打开 一 个 新 窗口 并 载 入 来 自主 机 B 的 另 一 个 文档 ， 脚 本 对 这 个 文档 的 内 
容 也 具有 完全 的 访问 权限 。 但 是 ， 如 果 脚 本 打开 第 三 个 窗口 并 载 入 一 个 
来 自主 机 C 的 文档 《或 者 是 来 自主 机 A) ， 同 源 策略 就 会 发 挥 作用 ， 阻 
止 脚本 访问 这 个 文档 。 


实际 上 ， 同 源 策 略 并 非 应 用 于 不 同 源 的 窗口 中 的 所 有 对 象 的 所 有 属 
性 。 不 过 它 应 用 到 了 其 中 的 大 多 数 属性 ， 尤 其 是 对 Document 对 象 的 几乎 
所 有 属性 而 言 。 几 是 包含 男 一 个 服务 器 中 文档 的 窗口 或 窗 体 ， 都 是 同 源 
策略 适用 的 范围 。 如 果 脚 本 打开 一 个 窗口 ， 脚 本 也 可 以 关闭 它 ， 但 不 能 
以 任何 方式 得 看 窗口 内 部 。 同 源 策略 还 应 用 于 使 用 XMLHttpRequest 生 
成 的 HTTP 请 求 〈( 参 见 第 18 章 ) 。 这 个 对 象 允 许 客户 端 JavaScript 生 成 任 
意 的 HITP 请 求 到 脚本 所 属 文档 的 web 服务器 ， 但 是 不 允许 脚本 和 其 他 
Web 服 务 器 通信 。 


对 于 防 正 脚本 狠 取 似 有 的 信息 来 将 ， 同 源 策略 是 必需 的 。 如 果 没 有 
这 一 限制 ， 亚 意 脚本 (通过 防火 载 载 入 到 安全 的 公司 内 网 的 浏览 器 中 ) 可 
能 会 打开 一 个 空 的 窗口 ， 欺 驴 用 户 进 入 并 使 用 这 个 窗口 在 内 网 上 浏 响 文 
件 。 恶 意 脚本 就 能 够 读 取 窗 口 的 内 容 并 将 其 发 送 回 目 己 的 服务 器 。 同 源 
打上 略 防 止 了 这 种 行为 。 

不 严格 的 同 源 集 略 

在 某 些 情况 下 ， 同 源 策 略 就 显得 太 过 严格 了 。 本 节 会 介绍 三 种 不 严 
格 的 同 源 策略 。 


同 源 策略 给 那些 使 用 多 个 子 域 的 大 站 点 带 来 了 一 些 问 题 。 例 如 ， 来 
自 home.example.com 的 文档 里 的 脚本 想 要 合法 地 读 取 从 
developer.example.com 载 入 的 文档 的 属性 ， 或 者 来 自 orders.example.com 
的 脚本 可 能 需要 读 catalog.example.com 上 的 文档 的 属性 。 为 了 支持 这 种 











类 型 的 多 域名 站 点 ， 可 以 使 用 Document 对 象 的 domain 属 性 。 在 默认 情况 
下 ， 属 性 domain 存 放 的 是 载 入 文档 的 服务 器 的 主机 名 。 可 以 设置 这 一 属 
性 ， 不 过 使 用 的 字符 串 必须 具有 有 效 的 域 前 级 或 它 本 喘 。 因 此 ， 如 果 一 
个 domain 属 性 的 初始 值 是 字符 串 "home.example.com"， 就 可 以 把 它 设置 
为 字符 串 "example.com"， 但 是 不 能 设置 

为 "home.example" 或 "ample.com"。 男 外 ，domain 值 中 必须 有 一 个 点 号 ， 

不 能 把 它 设置 为 "com" 或 其 他 顶级 域名 。 


如 果 两 个 窗口 (或 窗 体 ) 包含 的 脚本 把 domain 设 置 成 了 相同 的 值 ， 
那么 这 两 个 窗口 就 不 再 受 同 源 策 略 的 约束 ， 它 们 可 以 相互 谈 取 对 方 的 属 
性 。 例 如 ， 从 order.example.com 和 catalog.example.com 载 入 的 文档 中 的 
脚本 可 以 把 它们 的 document.domain 属 性 都 设置 为 "example.com"， 这 样 
一 来 ， 这 些 文档 就 有 了 同 源 性 ， 可 以 互相 读 取 属 性 。 


不 严格 的 同 源 朱 略 的 第 二 项 技术 已 经 标准 化 为 : 跨 域 资源 共 至 
(Cross-Origin Resource Sharing， 参 见 http://www.w3.org/TR/cors/) 。 这 
个 标准 草案 用 新 的 "Origin:" 请 求 头 和 新 的 Access-Control-Allow-Origin 啊 
应 头 来 扩展 HITP。 和 它 允 许 服务 器 用 头 信息 显 式 地 列 出 源 ， 或 使 用 通 配 
符 来 匹配 所 有 的 源 并 允许 由 任何 地 址 请 求 文件 。 类 似 Firefox 3.5 和 Safari 
4 的 浏览 右 可 以 使 用 这 种 新 的 头 信息 来 允许 路 域 HTTP 请 求 ， 这 样 
XMLHttpRequest 就 不 会 被 同 源 策略 所 限制 了 。 


另 一 种 新 技术 ， 叫 做 路 文 档 消 息 (cross-document messaging) ， 人 允 
许 来 自 一 个 文档 的 脚本 可 以 传递 文本 消息 到 另 一 个 文档 里 的 脚本 ， 而 不 
管 脚本 的 来 源 是 否 不 同 。 调 用 Window 对 象 上 的 postMessage() 方 法 ， 可 
以 异步 传递 消息 事件 〈 可 以 用 onmessage 事 件 句 处 理 程 序 函 数 来 处 理 
它 ) 到 窗口 的 文档 里 。 一 个 文档 里 的 脚本 还 是 不 能 调用 在 其 他 文档 里 的 
方法 和 读 取 属 性 ， 但 它们 可 以 用 这 种 消息 传递 技术 来 实现 安全 的 通信 。 
参见 22.3 节 获得 更 多 关于 跨 文档 消 轧 API 的 细 市 。 


13.6.3 ”脚本 化 插件 和 ActiveX 控 件 


尽管 核心 JavaScript 语 言 和 基本 的 客户 端 对 象 模 型 缺乏 大 多 数 恶 意 代 
码 所 需要 的 文件 系统 功能 和 网 络 功能 ， 但 情况 并 不 像 看 上 去 那么 简单 。 
在 很 多 Web 浏 览 喜 中 ，JavaScript 亦 被 用 做 很 多 软件 或 插件 的 “脚本 引 
擎 ”， 这 样 的 组 件 有 正中 的 ActiveX 控 件 和 其 他 浏览 器 的 插件 。Flash 和 
ee 它们 为 客户 端 脚本 提供 了 非常 重要 且 强 大 
生性 。 




















脚本 化 ActiveX 控 件 和 插件 的 能 力也 存在 着 安全 性 的 问题 。 例 如 ， 
Java applet 具 有 访问 底层 网 络 的 能 力 。Java 安 全 “ 沙 箱 ” 阻 止 applet 和 载 入 
它 的 服务 器 之 外 的 任何 服务 器 进行 通信 ， 因 此 ， 这 并 未 打开 一 个 安全 漏 
洞 。 但 是 ， 它 暴露 了 一 个 根本 的 问题 : 如 果 插 件 是 可 以 脚本 化 的 ， 我 们 
不 仅 要 无 条 件 相 信 Web 浏 览 器 的 安全 架构 ， 还 要 相信 插件 的 安全 架构 。 
实际 上 ，Java 和 Flash 插 件 看 上 去 具有 健壮 的 安全 性 ， 并 且 不 会 为 客户 端 
JavaScript 引 来 安全 问题 。 然 而 ，ActiveX 脚 本 化 有 着 更 加 糟糕 的 历史 遗 
留 问 题 。IE 浏 览 右 已 经 能 够 访问 各 种 各 样 的 脚本 化 ActiveX 控 件 ， 而 这 
些 控 件 是 Windows 操 作 系 统 的 一 部 分 ， 并 且 在 过 去 ， 操 作 系 统 还 存在 很 
多 可 被 控件 利用 的 安全 漏洞 。 


13.6.4” 跨 站 脚本 


跨 丫 脚本 (Cross-site scripting) ， 或 者 叫做 XSS， 这 个 术语 用 来 表 
示 一 类 安全 问题 ， 也 就 是 攻击 者 癌 目标 Web 站 点 注入 HIML 标 俭 或 者 脚 
本 。 防 止 XSS 攻 击 是 服务 器 端 Web 开 发 者 的 一 项 基本 工作 。 然 而 ， 客 户 
端 JavaScript 程 序 员 也 必须 意识 到 或 者 能 够 预防 路 站 脚本 。 


如 果 Web 页 面 动 态 地 产生 文档 内 容 ， 并 且 这 些 文档 内 容 是 基于 用 户 
提交 的 数据 的 ， 而 并 没有 通过 从 中 移 除 任何 嵌入 的 HTML 标 签 来 “ 消 
毒 ” 的 话 ， 那 么 这 个 Web 页 面 很 容易 遭 到 路 站 脚本 攻击 。 来 看 一 个 小 例 
考虑 如 下 的 Web 页 面 ， 它 使 用 JavaScript 通 过 用 户 的 名 字 来 向 用 户 问 
了 : 





























<script> 

var name=decodeURIComponent(window.1location.search.substring(1))||""; 
document .write("Hello"+name); 

</script> 








这 两 行 脚本 使 用 window.location.search 来 获得 它们 自己 的 URL 中 
以 “?” 开 始 的 部 分 。 它 使 用 document.write() 来 回 文档 添加 动态 生成 的 内 
容 。 这 个 页 面 专门 通过 如 下 的 一 个 URL 来 调用 : 





http://www.example.com/greet.html?David 








这 么 使 用 的 时 候 ， 它 会 显示 文本 "Hello David"。 但 考虑 一 下 ， 当 用 
下 面 的 URL 来 调用 它 ， 会 发 生 什 么 情况 : 





http://www.example.com/greet.html?%3Cscript%3Ealert('David' )%3C/script%3E 





只 用 这 个 URL， 脚 本 会 动态 地 生成 男 一 个 脚本 〔%3C 和 %3E 是 一 个 
尖 括 号 的 编码 )。 在 这 个 例子 中 ， 注 入 的 脚本 只 显示 一 个 对 话 框 ， 这 还 
是 相对 较 好 的 情况 。 但 是 ， 如 果 考 虑 以 下 的 情况 : 





http://siteA/greet.html?name=%3Cscript src=siteB/evil.]js%3E%3C/script%3E 








之 所 以 叫做 里 站 脚本 攻击 ， 束 是 因为 它 涉 及 多 个 站 点 。 站 扣 B (或 
者 站 点 C) 包含 一 个 专门 构造 的 到 站 点 A 的 链接 (就 像 上 面 的 那个 》， 
它 会 注入 一 个 来 目 站 点 B 的 脚本 。 脚 本 eval.js 驻 留 在 恶意 站 点 B 中 ， 但 现 
在 ， 它 丛 入 到 站 点 A 中 ， 并 且 可 以 对 站 点 A 的 内 容 进 行 任 何 想 要 的 操 
作 。 它 可 能 损坏 这 个 页 面 或 者 使 其 不 能 正 第 工作 例如， 局 动 下 一 市 所 
要 介绍 的 拒绝 服务 攻击 ) 。 这 可 能 会 对 站 点 A 的 用 户 市 来 不 少 坏处 。 更 
危险 的 是 ， 恶 意 脚 本 可 以 读 取 站 点 A 所 存储 的 cookie( 可 能 是 统计 数据 
或 者 其 他 的 个 人 验证 信息 ) ， 然 后 把 数据 发 送 回 站 点 B。 注 入 的 脚本 其 
至 可 以 诱 驴 用 户 击 键 并 将 数据 友 送 回 站 后 B。 


通常 ， 防 止 XSS 攻 击 的 方式 是 ， 在 使 用 任何 不 可 信 的 数据 来 动态 的 
创建 文档 内 容 之 前 ， 从 中 移 除 HTML 标 签 。 可 以 通过 添加 如 下 一 行 代 码 
人 














name=name.replace(/</g,"&1t;").replace(/>/g,"&gt;"); 








上 面 的 简单 代码 蔡 换 把 字符 串 中 所 有 的 尖 插 号 蔡 换 成 它们 对 应 的 
HTML 实 体 ， 也 就 是 说 将 字符 串 中 任意 HTML 标 签 进行 转 义 和 过 滤 删 除 
Cdeactivate) 处理。IE8 定 义 了 一 个 更 加 微妙 的 toStaticHTMLO 方 法 ， 可 
以 移 除 二 script 二 标签 (和 其 他 洪 在 的 可 执行 内 容 〉 而 不 修改 不 可 执行 
的 HTML。toStaticHTML() 是 不 标准 的 ， 但 在 JavaScript 核 心 代码 中 自己 
实现 一 个 HTML 安 全 函数 也 非常 简单 。 


HTML5 的 内 容 安全 策略 则 更 进一步 ， 它 为 二 iframe> 之 元 素 定 义 了 一 
个 sandbox 属 性 。 在 实现 之 后 ， 它 允许 显示 不 可 信 的 内 容 ， 并 上 自动 禁用 
脚本 


跨 站 脚本 使 得 一 个 有 害 的 漏洞 能 够 立足 于 Web 的 架构 之 中 。 深 入 理 
解 这 些 路 站 脚本 的 知识 是 值得 的 ， 但 是 更 深入 的 讨论 超出 了 本 书 的 范 
围 。 有 很 多 在 线 资源 可 以 帮助 你 预防 路 站 脚本 融 来 的 危险 。 其 中 一 个 最 
重要 的 参考 资料 出 自 原 始 CERT Advisory: 
http://www.cert.org/advisories/CA-2000-02.html。 


13.6.5 ”拒绝 服务 攻击 


这 里 描述 的 同 源 集 略 和 其 他 的 安全 限制 可 以 很 好 地 预防 恶意 代码 左 
坏 数 据 或 者 防止 侵犯 隐私 这 种 问题 。 然 而 ， 它 们 并 不 能 防止 另外 一 种 攻 
击 : 拒绝 服务 攻击 ， 这 种 攻击 手法 非常 暴力 。 如 果 访 问 了 局 用 JavaScript 
功能 的 一 个 恶意 Web 站 点， 这 个 站 反 可 以 使 用 一 个 alert() 对 话 框 的 无 限 
循环 占用 浏览 器 ， 或 者 用 一 个 无 限 循环 或 没有 意义 的 计算 来 占用 CPU。 


某 些 浏览 器 可 以 检测 运行 时 间 很 长 的 脚本 ， 并 且 让 用 户 选 择 终止 它 
们 。 但 是 恶意 脚本 可 以 使 用 window.setIntervalO 这 样 的 方法 来 占用 
CPU， 并 通过 分 配 很 多 的 内 存 来 攻击 你 的 系统 。Web 浏 览 器 并 没有 通用 
的 办 法 来 防止 这 种 笨重 的 攻击 手法 。 实 际 上 ， 由 于 没有 人 会 返回 一 个 小 
用 这 种 脚本 的 网 站 ， 因 此 这 在 Web 上 不 是 一 个 常见 的 问题 。 


13.7 客户 问 框 淋 


一 些 Web 开 发 者 发 现 基于 客户 端 框架 或 类 库 来 创建 它们 的 Web 应 用 
非常 便捷 。 从 某 种 意义 上 讲 类 库 也 是 框架 ， 它 们 对 Web 浏 览 器 提供 的 标 
准 和 专用 API 进 行 了 封 狼 ， 同 上 提供 更 高 级 别 的 API， 用 以 更 高 效 地 进 
行 客户 端 编程 开发 。 一 旦 使 用 一 个 框架 ， 就 要 用 框架 定义 的 API 来 写 代 
码 ， 使 用 框架 的 一 个 明显 的 好 处 是 高 级 的 API 可 以 用 更 简洁 的 代码 完成 
更 复杂 的 功能 。 此 外 ， 完 善 的 框架 也 会 帮 有 我 们 处 理 上 文 提 到 的 很 多 兼容 
性 、 安 全 性 和 可 访问 性 问题 。 


第 19 章 会 介绍 jQuery，jQuery 是 当前 最 流行 的 框架 之 一 。 如 果 你 决 
定 在 你 的 项 目 中 使 用 jQuery， 还 应 该 阅读 第 19 章 的 内 容 ; 理解 底层 API 
会 帮助 你 成 为 更 加 优秀 的 Web 开 发 者 ， 即 使 你 很 少 直接 使 用 它们 。 


除了 jQuery 以 外 ， 还 有 一 些 其 他 的 JavaScript 框 架 一 一 远 超过 在 这 里 
列 出 的 框架 。 其 中 有 些 开源 框架 非常 有 名 且 广 泛 使 用 : 


























Prototype 


Prototype 类 库 〈http:/prototypejs.org ) 和 jQuery 类 似 ， 是 专门 针对 
DOM 和 Ajax 实现 的 一 套 实 用 工具 ， 此 外 还 为 语言 核心 扩展 了 很 多 实用 
工具 ，Scriptaculous (http:/scriptaculo.us) 类 库 是 基于 Prototype 来 实现 
的 ， 可 以 用 来 做 动画 和 各 种 视觉 特效 。 


Dojo 


Dojo (http://dojotoolkit.org〉 是 一 个 大 型 的 框架 ， 它 宣称 自己 “ 深 不 
可 测 ?”。 它 包含 一 个 种 类 繁多 的 UI 组 件 集合 、 包 管理 系统 、 数 据 抽象 层 
答 
“i 


YUI 


YUI (http://developer.yahoo.com/yui/) 是 Yahoo! 使 用 的 一 个 著名 框 
架 ， 是 Yahoo! 的 工程 师 团队 开发 的 ， 己 经 应 用 在 包含 Yahoo! 主 页 在 内 的 
诸多 项 目 中 。YUI 和 Dojo 一 样 庞 大 ， 是 一 个 无 所 不 包 的 类 库 ， 包 括 语言 
工具 、DOM 工 具 ，UI 组 件 等 。 目 前 已 经 有 两 个 不 兼容 版 本 的 YUI 存 在 ， 
分 别 为 YUI 2 和 YUI 3。 





Closure 


Closure 类 库 (http://code.google.com/closure/library/〉 是 Google 应 用 
于 Gmail、Google Docs 和 其 他 Web 应 用 的 客户 端 类 库 。 这 个 类 库 是 打算 
和 Closure 编 译 器 (http://code.google.com/closure/compiler/〉 配合 使 用 
的 ， 画 除 没 有 用 的 类 库 函 数 。 因 为 没有 用 的 代码 会 在 部 敬之 前 被 移 除 ， 
Closure 类 库 的 设计 者 不 需要 保持 特性 集合 的 紧凑 ， 所 以 Closure 包 含 一 
个 庞大 的 实用 工具 集 。 


GWT 


GWT， 即 Google Web 
Toolkit (http:Wcode.google.com/webtoolkiVy) ， 是 一 个 完全 不 同类 型 的 客 
户 端 框架 。 它 用 JAVA 定义 了 Web 应 用 接口 ， 并 提供 编译 器 ， 将 JAVA 程 
序 翻译 成 兼容 的 客户 端 JavaScript。GWT 在 一 些 Google 产 品 中 使 用 ， 但 
是 不 如 它们 自己 的 Closure 类 库 使 用 得 那么 广泛 。 


[利用 HTML 表 单 提 交 的 方式 和 服务 器 端 CGI 脚本 进行 通信 的 交互 式 


Web 页 面 ， 是 原始 的 “Web 应 用 ”， 可 以 不 用 JavaScript 来 实现 。 但 是 ， 我 
们 不 会 在 本 书 中 讨论 这 种 Web 应 用 类 型 。 
[JUnobtrusive JavaScript 是 一 种 将 JavaScript 从 HTML 结 构 中 抽 离 的 设计 
概念 ， 避 免 在 HTML 标 签 中 夹杂 一 堆 onchange、onclick 等 属性 去 挂 载 
JavaScript 事 件 ， 让 HTML 与 Javascript 分 离 ， 依 MVC 的 原则 将 功能 权 责 
区 分 清楚 ， 使 HTML 也 变 得 结构 化 容易 阅读 。 
[3] 有 时 我 们 会 看 到 诸如 这 种 代码 : 

=~ script src="core.js"> 

config={...}; 

=/script> 

看 起 来 这 上 段 代 码 定义 了 一 些 配 置 项 ， 由 core.js 来 读 取 ， 这 是 一 种 将 
页 面 参 数 传 入 库 文 件 的 方法 ， 在 JavaScript 库 的 开发 中 非常 常见 ， 其 中 去 
script> 和 过 /script 二 之 间 的 代码 是 一 段 纯 文本 ， 在 core.js 执 行 时 读 取 这 
ee 浏览 器 不 会 自动 执行 script 二 标签 之 间 的 
[4] 这 些 类 库 文件 通常 放 在 Google 提 供 的 CDN 上 。 
[51Steven Souder 著 名 的 ControlJS 框 架 就 是 利用 了 script 元 素 的 这 一 特性 来 
控制 JavaScript 代 码 的 执行 ， 更 多 信息 请 阅读 : 
http://stevesouders.com/controljs/。 
[6] 作 者 在 这 里 的 表述 很 模糊 ， 所 谓 “ 不 会 出 现在 浏览 器 中 ”是 指 文档 的 文 
本 内 容 已 经 载 入 ， 但 是 并 未 被 浏览 器 引擎 解析 为 DOM 树 ， 而 DOM 树 的 
左 受 JavaScript 代 码 执 行 的 影响 的 ，JavaScript 代 码 会 “阻塞 ”页 面 UI 
和 泻 染 。 
[7 茶 些 浏览 器 能 够 防范 拒绝 服务 攻击 和 偶然 的 无 限 循 环 ， 如 果 脚 本 或 事 
件 处 理 程序 运行 时 间 太 长 ， 它 会 提示 用 户 。 这 就 给 用 户 一 个 选择 中 止 运 
行 脚本 的 机 会 。 
[8] 值 得 微软 称赞 的 是 ， 正 9 现在 同时 文 持 生 canvas 之 元 素 和 
addEventListener() 方 法 。 
[9] 根 据 2011 年 第 四 季度 的 统计 ，Yahool 已 经 不 再 将 浏览 器 划分 为 A 级 和 
C 级 ， 而 是 统一 给 出 一 个 测试 基准 ， 根 据 这 次 更 新 ， 可 以 明显 感觉 到 测 
试 基准 同 移动 终端 倾斜。 
[0] 作 者 在 这 里 的 提示 非常 重要 ， 我 们 不 能 基于 浏览 器 写 出 一 个 “服务 
器 ”， 网 络 中 的 浏览 器 和 浏览 器 之 间 无 法 直接 进行 通信 。 
te Wh 问 口 或 协议 ， 更 详细 内 容 请 参 
照 13.6.2。 














第 14 章 ”Window 对象 


第 13 章 介绍 了 Window 对 象 及 其 在 客户 端 JavaScript 中 所 扮演 的 核心 
角色 : 它 是 客户 端 JavaScript 程 序 的 全 局 对 象 。 本 章 介 绍 Window 对 象 的 
属性 和 方法 ， 这 些 属性 定义 了 许多 不 同 的 API， 但 是 只 有 一 部 分 实际 上 
和 浏览 器 窗口 相关 。Window 对 象 是 以 窗口 命名 的 。 本 章 介 绍 以 下 方 
面 : 





.14.1 节 展示 如 何 使 用 setTimeoutO0 和 setInterval(0) 来 注册 一 个 函数 ， 并 
在 指定 的 时 间 后 调用 它 。 


14.2 市 讲解 如 何 使 用 location 属 性 来 获取 当前 显示 文档 的 URL 和 载 
入 新 的 文档 。 


:14.3 节 介绍 history 属 性 ， 并 展示 如 何在 历史 记录 中 辣 前 和 辐 后 移 
动 。 


14.4 广 展示 如 何 使 用 navigator 属 性 来 获取 浏览 器 厂商 和 版 本 信息 ， 
以 及 如 何 使 用 screen 属 性 来 查询 窗口 尺寸 。 


:14.5 节 展示 如 何 用 alert0)、promptO0 和 confirm(0) 方 法 来 显示 简单 的 文 
本 对 话 框 ， 以 及 如 何 用 showModalDialog0 显 示 HTML 对 话 框 。 


:14.6 节 讲解 如 何 注册 onerror 处 理 方法 ， 这 个 方法 在 未 捕获 的 
JavaScript 异 常 发 生 时 调用 。 


.14.7 节 讲解 HTMEL 元 素 的 ID 和 name 作 为 Window 对 象 的 属性 来 使 
用 。 























:14.8 节 是 一 个 很 长 的 节 ， 讲 解 如 何 打 开 和 关闭 浏览 器 窗口 ， 以 及 如 
何 编号 可 以 在 多 个 窗口 和 纶 和 套 窗 体 中 工作 的 JavaScript 代 码 。 


14.1 计时 器 
setTimeout() 和 setInterval() 可 以 用 来 注册 在 指定 的 时 间 之 后 单 次 或 重 


复 调用 的 函数 。 因 为 它们 都 是 客户 端 JavaScript 中 重要 的 全 局 函数 ， 所 以 
定义 为 Window 对 象 的 方法 ， 但 作为 通用 函数 ， 其 实 不 会 对 窗口 做 什么 





事情 。 


Window 对 象 的 setTimeout(0) 方 法 用 来 实现 一 个 函数 在 指定 的 坚 秒 数 
之 后 运行 。setTimeoutO 返 回 一 个 值 ， 这 个 值 可 以 传递 给 clearTimeoutO 用 
于 取消 这 个 函数 的 执行 。 


setInterval0 和 setTimeoutO 一 样 ， 只 不 过 这 个 函数 会 在 指定 毫秒 数 的 
间隔 里 重复 调用 : 

















setInterval(updateCclock,60000) ;// 每 69 秒 调用 一 次 updateClock() 





和 setTimeoutO 一 样 ，setIntervalO 也 返回 一 个 值 ， 这 个 值 可 以 传递 给 
clearInterval()， 用 于 取消 后 续 函 数 的 调用 。 


例 14-1 定 义 的 应 用 函数 会 在 等 竺 指定 的 时 间 之 后 ， 开 始 重 复 调 用 茶 


个 函数 ， 然 后 又 过 了 一 段 时 间 之 后 取消 函数 调用 。 该 例子 演示 了 
setTimeout()、setInterval() 和 clearInterval() 的 用 法 。 


例 14-1: 定时 器 应 用 函数 





ys 

* 安 排 函 数 f( ) 在 未 来 的 调 模式 
* 在 等 待 了 若干 毫秒 之 后 调用 f( ) 
* 如 果 设置 了 interval 并 没有 设置 end 参 数 ， 则 对 f( ) 调 用 将 不 会 停止 
* 如 果 没 有 设 interval 和 end， 只 在 若干 毫秒 后 调用 f( ) 一 次 

* 只 有 指定 了 f( )， 才 会 从 start=0 的 时 刻 开始 
* 注 意 ， 调 用 invoke( ) 不 会 阻塞 ， 它 会 立即 返 匠 






















































































































































































function invoke(f,start, Interval,end){ 
if(!start)start=0;// 默 认 设置 为 0 毫秒 
if(arguments, Length<=2)// 单 次 调用 模式 
setTimeout(f, start);// 若 干 毫 秒 后 的 单 次 调用 模式 
else{// 多 次 调用 模式 
setTimeout(repeat,start) ;// 在 若干 毫秒 后 调用 repeat() 
function repeat(){// 在 上 一 行 所 示 的 setTimeout( ) 中 调用 
var h=setInterval(f, interval) ;// 循 环 调用 f() 
// 在 end 毫 秒 后 停止 调用 ， 前 提 是 end 已 经 定义 了 
if(end)setTimeout(function(){clearIinterval(h);},end); 


} 
} 
























































































































































由 于 历史 原因 ，setTimeout() 和 setInterval0) 的 第 一 个 参数 可 以 作为 字 
符 串 传 入 。 如 果 这 么 做 ， 那 这 个 字符 串 会 在 指定 的 超时 时 间或 间隔 之 后 


进行 求 值 (相当 于 执行 eval0) 。 除 前 两 个 参数 之 外 ，HITML5 规 范 《〈 除 
IE 之 外 的 所 有 浏览 器 ) 还 允许 setTimeout() 和 setInterval0 传 入 额外 的 参 

数 ， 并 在 调用 函数 时 把 这 些 参 数 传 递 过 去 。 然 而 ， 如 果 和 需要 文 持 下 的 

话 ， 就 不 要 应 用 此 特性 了 。 


如 果 以 0 毫秒 的 超时 时 间 来 调用 setTimeout()， 那 么 指定 的 函数 不 会 
立刻 执行 。 相 反 ， 会 把 它 放 到 队列 中 ， 等 到 前 面 处 于 等 待 状态 的 事件 处 
理 程序 全 部 执行 完成 后 ， 再 “立即 ”调用 它 山 。 

14.2 ”浏览 器 定位 和 导航 


Window 对 象 的 location 属 性 引用 的 是 Location 对 象 ， 它 表示 该 窗口 
中 当前 显示 的 文档 的 URL， 并 定义 了 方法 来 使 窗口 载 入 新 的 文档 。 


Document 对 象 的 location 属 性 也 引用 到 Location 对 象 : 




















window,1ocation===document .1Location/V/ 总 是 返回 true 








Document 对 象 也 有 一 个 URL 属 性 ， 是 文档 首次 载 入 后 保存 该 文档 的 
URL 的 静态 字符 串 。 如 果 定 位 到 文档 中 的 片段 标识 符 〈( 如 #table-of- 
contents ) ，Location 对 象 会 做 相应 的 更 新 ， 而 document.URL 属 性 却 不 会 
Br 


14.2.1 解析 URL 








Window 对 象 的 location 属 性 引用 的 是 Location 对 象 ， 它 表示 该 窗口 
中 当前 显示 的 文档 的 URL。Location 对 象 的 href 属 性 是 一 个 字符 串 ， 后 者 
包 仿 URL 的 完整 文本 。Location 对 象 的 toString() 方 法 返回 href 属 性 的 值 ， 
此 在 会 隐 式 调用 toString() 的 情况 下 ， 可 以 使 用 location 代 蔡 


location.href 。 


这 个 对 象 的 其 他 属性 一 一 protocol，host，hostname，Pport， 
pathname 和 Search， 分 别 表示 URL 的 各 个 部 分 。 它 们 称 为 “URL 分 解 * 属 
性 ， 同 时 被 Link 对 象 〈 通 过 HTML 文 档 中 的 入 a> 和 <<area 之 元 素 创 建 ) 
支持 。 人 参阅 本 书 第 四 部 分 的 Location 和 Link 项 获取 详细 信息 。 


Location 对 象 的 hash 和 search 属 性 比较 有 趣 。 如 果 有 的 话 ，hash 属 性 





返回 URL 中 的 “片段 标识 符 ” 部 分 。search 属 性 也 类 似 ， 它 返回 的 是 问号 
之 后 的 URL， 这 部 分 通常 是 某 种 类 型 的 查询 字符 串 。 一 般 来 说 ， 这 部 分 
内 容 是 用 来 参数 化 URL 并 在 其 中 舱 入 参数 的 。 虽然 这 些 参 数 通 冲 用 于 运 
行 在 服务 器 上 的 脚本 ， 但 在 启用 JavaScript 的 页 面 中 当 甸 尖 也 可 以 使 用 它 
们 。 例 14-2 展 示 了 一 个 通用 函数 urlArgsO 的 定义 ， 可 以 用 这 这 个 函数 将 参 
数 从 URL 的 search 属 性 中 提取 出 来 。 该 例子 用 到 了 
decodeURIComponentO0， 后 者 是 在 客户 义 的 全 局 函数 。 
《参见 本 书 第 三 部 分 中 的 Global 获取 详细 内 容 。 


例 14-2: 提取 URL 的 搜索 字符 串 中 的 参数 

















/* 

“这 个 函数 来 解析 来 自 URL 的 查询 串 中 的 name=value 参 数 对 
它 将 name=value 对 存储 在 一 个 对 象 的 属性 中 ， 并 返回 该 对 象 

“这 样 FE 来 使 用 它 

































































*var args=urlArgs();// 从 URL 中 解析 参数 

*Var qd=args.9q||"";// 如 果 参 数 定义 了 的 话 就 使 用 参数 ， 否 则 使 用 一 个 默认 值 
*var n=args.n?parseInt(args.n):10; 

*/ 

function urlArgs(){ 

var args={};// 定 义 一 个 空 对 象 

var query=location.search.substring(1);// 查 找到 查询 串 ， 并 去 掉 '?' 
var pairs=query.split("&");// 根 据 "&' ' 符 号 将 查询 字符 串 分 隔 开 
for(var i=0;i<pairs.length; 工 ++){// 对 于 每 个 片段 

var pos= pairs[i]. index0f('=' );// 查 找 "'name=value" 
if(pos==-1)continue;// 如 果 没 有 找到 的 话 ， 就 跳 过 
var name=pairs[i].substring(0,pos);// 提 取 name 
var value=pairs[i].substring(pos+1);// 提 取 value 
value=decodeURIComponent (value);// 对 value 进 行 解码 
args[name]=value;// 存 储 为 属性 
} 


return args;// 返 回 解 析 后 的 参数 
} 

























































































14.2.2” 载 入 新 的 文档 


Location 对 象 的 assign() 方 法 可 以 使 窗口 载 入 并 显示 你 指定 的 URL 中 
的 文档 。replace() 方 法 也 类 似 ， 但 它 在 载 入 新 文档 之 前 会 从 浏览 历史 中 
把 当前 文档 删除 。 如 果 脚 本 无 条 件 地 载 入 一 个 新 文档 ，replace() 方 法 可 
能 是 比 assgin() 方 法 更 好 的 选择 。 人 否则 ， 后退" 按钮 会 把 浏览 器 带 回 到 原 
人 文档， 而 相同 的 脚本 则 会 再 次 载 入 新 文档 。 如 果 检 测 到 用 户 的 浏览 中 
不 文 持 某 些 特性 来 显示 功能 齐全 的 版 本 ， 可 以 用 location.replace() 来 载 入 
静态 的 HTML 版 本 。 








// 如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 
// 则 将 其 重 定向 到 一 个 不 需要 Ajax 的 静态 页 面 
if(!XMLHttpRequest)location.replace("staticpage.html"); 
































注意 ， 在 这 个 例子 中 传 入 replace() 的 是 一 个 相对 URL。 相 对 URL 是 
相对 于 当前 页 面 所 在 的 目录 来 解析 的 ， 就 像 将 它们 用 于 一 个 超 链接 中 。 


除了 assgin0 和 replace0) 方 法 ，Location 对 象 还 定义 了 reload() 方 法 ， 
后 者 可 以 让 浏览 器 重新 载 入 当前 文档 。 


使 浏览 占 跳 转 到 新 页 面 的 一 种 更 传统 的 方法 是 下 接 把 新 的 URL 赋 给 


location 属 性 : 





location="http://www.oreilly .com";// 在 此 网 站 购买 书 ! 





还 可 以 把 相对 URL 赋 给 location， 它 们 会 相对 当前 URL 进 行 解析 : 








location="page2.html";// 载 入 下 一 个 页 面 




















纯粹 的 片段 标识 符 是 相对 UREL 的 一 种 类 型 ， 它 不 会 让 浏览 融 载 入 新 
文档， 但 只 会 使 它 滚动 到 文档 的 茶 个 位 置 。 厅 op 标识 符 是 个 特殊 的 例 
子 : 如 果 文 档 中 没有 元 素 的 ID 是 "top"， 它 会 让 浏览 器 跳 到 文档 开始 处 。 





location="#top";// 跳 转 到 文档 的 顶部 





Location 对 象 的 URL 分 解 属性 是 可 写 的 ， 对 它们 重新 赋值 会 改变 
URL 的 位 置 ， 并 且 导 致 浏览 器 载 入 一 个 新 的 文档 (如 果 改 变 的 是 hash 属 
性 ， 则 在 当前 文档 中 进行 跳 转 〉: 


























location.search="?page="+(pagenum+1);// 载 入 下 一 个 页 面 





14.3 浏览 历史 


Window 对 象 的 history 属 性 引用 的 是 该 窗口 的 History 对 象 。History 
对 象 是 用 来 把 窗口 的 浏览 历史 用 文档 和 文档 状态 列表 的 形式 表示 。 








History 对 象 的 langth 属 性 表示 浏览 历史 列表 中 的 元 素数 量 ， 但 出 于 安全 
的 因素 ， 脚 本 不 能 访问 已 保存 的 URL。 《如 果 人 允许 ， 则 任意 脚本 都 可 以 
蜂 探 你 的 浏览 历史 。 ) 


History 对 象 的 back0 和 forward0) 方 法 与 浏 宽 如 的 0 退 " 和 “前 进 ” 按 钮 





























一 样 : 它们 使 浏览 器 在 浏览 历史 中 前 后 跳 转 一 格 。 第 三 个 方法 一 一 go() 
接受 一 个 整数 参数 ， 可 以 在 历史 列表 中 向 前 ( 正 参 数 ) 或 向 后 ( 负 参 
数 ) 跳 过 任意 多 个 页 。 

history.go(-2);// 后 退 两 个 历史 记录 ， 相 当 于 单 击 “ 后 退 ” 按 钮 两 次 

如 果 和 窗口 包含 多 个 子 窗口 (比如 二 iframe 二 元 素 见 14.8.2 节 )， 子 








窗口 的 浏览 历史 会 按时 间 顺 序 穿插 在 主 窗口 的 历史 中 。 这 意味 着 在 主 窗 
口 调用 history.back()〈 举 例 〉 可 能 会 导致 其 中 一 个 子 窗口 往 回 跳 转 到 前 
一 个 显示 的 文档 ， 但 主 窗口 保留 当前 状态 不 变 。 


现代 Web 应 用 可 以 不 通过 载 入 新 文档 而 动态 地 改变 自身 内 容 〈 见 第 
15 章 和 第 18 间 ) 。 这 么 做 可 能 希望 用 户 能 用 “后 退 ” 和 “前 进 ， 按钮 在 这 些 
动态 创建 的 应 用 状态 之 间 进 行 跳 转 。 HTML5 将 这 种 技术 标准 化 ， 请 参 
有 照 22.2 节 。 


HTML5 之 前 的 历史 管理 是 个 更 复杂 的 难题 。 应 用 程序 必须 要 在 窗 
口 浏览 历史 中 创建 一 个 新 的 条 昌 来 管理 自身 的 访 史 记录 ， 用 历史 条 目 关 
联 自身 的 状态 信息 ， 判 断 什 么 时 候 用 户 使 用 了 “后 退 ” 按 钮 来 移动 到 不 同 
的 历史 条 目 ， 联合 那个 条 目 获取 状态 信息 ， 并 且 重 新 创建 应 用 程序 之 前 
的 状态 。 一 种 方式 是 用 隐藏 的 和 iframe> 来 保存 状态 信息 并 在 浏览 器 的 
历史 中 创建 条 目 。 为 了 创建 新 的 历史 和 条目， 需要 用 Document 对 象 的 
open0 和 write0) 方 法 〈 见 15.10.2 节 ) 动态 地 把 一 个 新 文档 写 入 这 个 隐藏 
的 窗 体 。 不 管 怎样 ， 文 档 内 容 应 该 包含 重新 创建 应 用 状态 所 需要 的 状态 
信息 。 当 用 户 单 击 *“ 后 退 ” 按 钮 ， 隐 藏 的 窗 体 的 内 容 会 改变 。 在 HIML5 
之 前 ， 没 有 生成 事件 来 通知 你 这 个 改变 ， 因 此 ， 为 了 检测 用 户 是 人 否 单 击 
了 “后 退 ” 按 钮 ， 可 能 要 用 setInterval0 〈 见 14.1 节 ) 每 秒 对 隐藏 的 窗 体 检 
测 两 到 三 次 ， 来 看 它 是 否 改变 了 。 


在 实际 工作 中 ， 在 那些 需要 以 前 的 HTML5 历 史 管 理 的 项 目 中 ， 开 
发 者 通常 会 使 用 一 些 现成 的 解决 方案 。 很 多 JavaScript 框 架 都 实现 了 这 种 
功能 。 比 如 ，jQuery 有 history 插 件 ， 男 外 也 有 些 单独 的 管理 历史 记录 的 






































类 库 。RSH (Really Simple History) 是 其 中 一 个 比较 流行 的 示例 ， 可 以 
在 这 里 找到 ，http:Wcode.google.comy/pmeallysimplehistory/。22.2 节 解释 如 
何 用 HTML5 进 行 历史 管理 。 
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脚本 有 时 候 需 要 获取 和 和 它们 所 在 的 web 浏览 器 或 浏览 器 所 在 的 昌 面 
相关 的 信息 。 本 节 介 WI nd | Tnavigator Meereen 性 。 它们 分 列 
引用 的 是 Navigator 和 Screen 对 象 ， 而 这 些 对 象 提供 的 信息 允许 脚本 来 根 
据 环境 定制 自己 的 行为 。 


14.4.1 _ Navigator 对 象 


Window 对 象 的 navigator 属 性 引用 的 是 包含 浏览 器 广 商 和 版 本 信息 
的 Navigator 对 象 。Navigator 对 象 的 命名 是 为 了 纪念 Netscape 之 后 
Navigator 浏 览 器 内 ， 不 过 所 有 其 他 的 浏览 器 也 支持 它 〈 正 还 个 文 持 
clientInformation 属 性 ， 它 作为 navigator 的 厂商 中 立 同 义 词 。 遗 憾 的 是 ， 
其 他 浏览 器 并 不 文 持 这 一 更 直观 的 属性 命名 ) 。 


过 去 ，Navigator 对 象 通 弟 被 脚本 用 来 确定 它们 是 在 正中 还 是 在 
Netscape 中 运行 。 这 种 浏览 器 咒 探 方法 有 问题 ， 因 为 它 要 求 随 着 新 浏览 
器 和 现 有 浏览 器 的 新 版 本 的 引入 而 不 断 地 调整 。 如 今 ， 有 一 种 更 好 的 功 
能 测试 方法 〈 参 见 13.4.3 节 ) ， 只 需要 测试 所 需 要 的 功 和 EE 《 即 ， 方 法 或 
属性 ) ， 而 不 是 假设 特定 的 浏览 器 版 本 及 其 功能 。 


然而 ， 浏 览 占 咒 探 有 时 候 仍 然 有 价值 。 这 样 的 一 种 情况 是 ， 当 需要 
解决 存在 于 某 个 特定 的 浏览 右 的 特定 版 本 中 的 特殊 的 bug 时 。Navigator 
对 象 有 4 个 属性 用 于 提供 关于 运行 中 的 浏览 占 的 版 本 信息 ， 并 且 可 以 使 
用 这 些 属性 进行 浏览 器 嗅 探 。 

















appName 


Web 浏 览 器 的 全 称 。 在 正中 ， 这 就 是 "Microsoft Internet Explorer"。 
| 性 束 是 "Netscape"。 为 了 兼容 现存 的 浏览 器 咒 探 代 
马 ， 其 他 浏览 占 通 常 也 取 值 为 "Netscape"。 


app Version 








此 属性 通常 以 数字 开始 ， 并 跟着 包含 浏览 器 三 商 和 版 本 信息 的 详细 
字符 串 。 字 符 串 前 面 的 数字 通常 是 4.0 或 5.0， 表 示 它 是 第 4 或 第 5 代 兼 容 
的 浏览 器 。appVersion 字 符 串 没有 标准 的 格式 ， 所 以 ， 没 有 办 法 直接 用 
它 来 判断 浏览 器 的 类 型 。 











userAgent 


浏览 器 在 它 的 USER-AGENTHTTP 头 部 中 发 送 的 字符 串 。 这 个 属性 
通常 包 食 appVersion 中 的 所 有 信息 ， 并 且 和 常常 也 可 能 包含 其 他 的 细节 。 
和 appVersion 一 样 ， 它 也 没有 标准 的 格式 。 由 于 这 个 属性 包含 绝 大 部 分 
言 息 ， 因 此 浏览 器 串 探 代码 通常 用 它 来 嗅 探 。 





platform 
在 其 上 运行 浏览 器 的 操作 系统 (并 且 可 能 是 硬件 ) 的 字符 串 。 


Navigator 属 性 的 复杂 性 正 说 明了 浏览 器 嗅 探 对 于 处 理 客户 端 兼容 性 
问题 是 没有 太 大 帮助 的 。 在 Web 的 早期 ， 人 们 写 了 大 量 的 浏览 器 特定 代 
码 用 于 测 试 类 似 于 navigator.appName 的 属性 。 在 开发 新 浏览 器 的 时 候 ， 
浏览 器 厂商 发 现 为 了 让 现 有 网 站 显示 正确 ， 它 们 需要 把 appName 设 置 
Netscape", 类 似 的 做 法 使 得 appVersion 的 起 始 数字 失去 了 意义 ， 而 现 
在 的 浏览 器 串 探 代码 必须 要 依赖 于 比 之 前 复杂 很 多 的 navigator.userAgent 
字符 串 。 例 14-3 展 示 了 如 何 用 正则 表达 式 〈 摘 自 jQuery) 从 
navigator.userAgent 中 抽取 浏览 嚣 名称 和 版 本 号 的 方法 。 


例 14-3: 使 用 navigator.userAgent 来 进行 浏览 器 嗅 探 
























































// 为 客户 端 噢 探 定义 browser .name 和 browser .version， 这 里 使 用 了 jQuery 1.4.1 中 的 代码 
//name 和 number 都 是 字符 串 ， 对 于 不 同 的 浏览 器 输出 的 结 打 也 是 不 样 的 ， 检 测 结果 如 下 : 
// 


//"webkit" :Safari 或 Chrome ;版 本 号 是 webkit 的 版 本 号 

//"opera":0pera; 版 本 号 就 是 软件 的 版 本 号 

Poa 'mozilla" :Firefox 或 者 其 他 基于 gecko 内 核 的 浏览 器 ;版 本 号 是 Gecko 的 版 本 
//"msie" :IE; 版 本 号 就 是 软件 的 版 本 

// 

// 比 如 Firefox 3.6 返 回 : {name:"mozilla",version:"1.9.2"} 

var browser=(function(){ 

var s=navigator.userAgent.toLowerCase(); 

var match=/(webkit)[\/]1([\w.]1+)/.exec(s)|| 
/(opera)(?:.*version)?[\/]([\w.]+)/.exec(s)|| 
/(msie)([\w.]+)/.exec(s)|| 
I!/compatible/.test(s)&&/(mozilla)(?:.*?rv:([\w.]+))?/.exec(s)|| 
return{name:match[1]||"",version:match[2]||"0"}; 


























}()); 





除了 浏览 器 厂商 和 版 本 信息 的 属性 之 外 ，Navigator 对 象 还 包含 一 些 
i 性 和 方法 。 以 下 是 一 些 标准 化 的 属性 以 及 广泛 应 用 但 未 标准 化 





onLine 


navigator.onLine 属 性 (如 果 存 在 的 话 〉 表示 浏览 器 当前 是 否 连 接 到 
Re 应 用 程序 可 在 全 信众 起 仙人 不 保 站 在 不 风 《用 第 20 章 的 


geolocation 


Geolocation 对 象 定 义 用 于 确定 用 户 地 理 位 置信 息 的 接口 。 参 见 22.1 
节 的 更 多 细节 。 


javaEnabled() 
一 个 非 标准 的 方法 ， 当 浏览 右 可 以 运行 Java 小 程序 时 返回 true。 
cookieEnablel() 


非 标 准 的 方法 ， 如 果 浏 览 器 可 以 保存 永久 的 cookie 时 ， 返 回 true。 
当 cookie 配 置 为 “ 视 具 体 情 况 而 定 ”* 时 可 能 会 返回 不 正确 的 值 。 


14.4.2 Screen 对 象 


Window 对 象 的 screen 属 性 引用 的 是 Screen 对 象 。 它 提供 有 关 窗 口 显 
示 的 大 小 和 可 用 的 颜色 数量 的 信息 。 属性 width 和 height 指 定 的 是 以 像素 
为 单位 的 窗口 大 小 。 属 性 availWidth 和 availHeight 指 定 的 是 实际 可 用 的 显 
示 大 小 ， 它 们 排除 了 像 更 面 任务 栏 这 样 的 特性 所 占用 的 空间 。 属 性 
colorDepth 指 定 的 是 显示 的 BPP (bits-per-pixel) 值 ， 典 型 的 值 有 16、24 
和 32。 


window.screen 属 性 和 它 引用 的 Screen 对 象 都 是 非 标 准 但 广泛 实现 
的 。 可 以 用 Screen 对 象 来 确定 web 应 用 是 否 运行 在 一 个 小 屏幕 的 设备 
上 ， 比 如 上 网 本 。 如 果 屏 幕 空间 有 限 ， 可 能 要 选择 用 更 小 的 字体 和 图 片 
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14.5 ”对 话 框 


Window 对 象 提供 了 3 个 方法 来 同 用 户 显示 简单 的 对 话 框 。alert() 问 
用 户 显示 一 条 消息 并 等 竺 用 户 关 闭 对 话 框 。confirm(0 也 显示 一 条 消息 ， 
要 求 用 户 单 击 “ 确 定 ? 或 “取消 ?按钮 ， 并 返回 一 个 布尔 值 。promptO 同 样 
也 显示 一 条 消息 ， 等 竺 用户 输入 字符 串 ， 并 返回 那个 字符 串 。 下 面 的 代 
人 码 全 用 了 这 3 种 方法 : 




















dof 

var name=prompt("wWhat is your name?");// 得 到 一 个 字符 串 输 入 

var correct=confirm("You entered'"+name+"'.\n"+// 得 到 一 个 布尔 值 
"Click Okay to proceed or Cancel to re-enter."); 

}while( !correct) 

alert("Hello, "+name);// 输 出 一 个 纯 文本 消息 











尽管 alert()、confirm() 和 promptO 方 法 都 很 容易 使 用 ， 但 是 恨 好 的 设 
计 还 是 需要 有 节制 地 使 用 它们 ， 要 尽量 做 到 这 一 点 。 像 这 样 的 对 话 框 并 
非 wWeb 的 常见 功能 ， 大 多 数 用 户 会 发 现 这 些 对 话 框 会 破坏 它们 的 浏览 体 
验 。 如 今 ， 对 这 些 方法 唯一 常见 的 应 用 就 是 调试 ，JavaScript 程 序 员 常 常 
在 代码 中 插入 一 个 alert0 方 法 ， 用 来 查看 某 个 变量 的 输出 结果 是 什么 。 


注意 ， 这 些 对 话 框 中 显示 的 文本 是 纯 文本 ， 而 不 是 HTML 格 式 的 文 
本 。 只 能 使 用 空格 、 换 行 符 和 各 种 标点 符 写 来 格式 化 这 些 对 话 框 。 


方法 confirm() 和 prompt() 都 会 产生 阻 寨 ， 也 就 是 说 ， 在 用 户 关 挥 它 
们 所 显示 的 对 话 框 之 前 ， 它 们 不 会 返回 。 这 就 意味 着 在 弹出 一 个 对 话 框 
前 ， 代 码 束 会 停止 运行 。 如 果 当 前 正在 载 入 文档 ， 也 会 停止 载 入 ， 直 到 
用 户 用 要 求 的 输入 进行 啊 应 为 止 。 在 大 多 数 的 浏览 器 里 ，alert0) 方 法 也 
会 产生 阻塞 ， 并 等 竺 用户 关 闭 对 话 框 ， 但 并 不 总 是 这 样 。 完 整 细节 请 参 
考 第 四 部 分 的 Window.alert()、Window.confirm() 和 Window.prompt() 方 
读 。 


除了 Window 的 alert()、confirm() 和 prompt0O 方 法 ， 还 有 个 更 复杂 的 
方法 showModalDialog0， 显 示 一 个 包含 HTML 格 式 的 “ 模 态 对 话 框 >D， 
可 以 给 它 传 入 参数 ， 以 及 从 对 话 杠 里 返回 值 。showModalDialog0 在 浏览 
器 当前 窗口 中 显示 一 个 模 态 窗口 。 第 一 个 参数 用 以 指定 提供 对 话 框 
HTML 内 容 的 URL。 第 二 个 参数 是 一 个 任意 值 〈 数 组 和 对 象 均 可 ) ， 这 






































个 值 在 对 话 框 里 的 脚本 中 可 以 通过 window.dialogArguments 属 性 的 值 访 
问 。 第 三 个 参数 是 一 个 非 标准 的 列表 ， 包 含 以 分 号 隔 开 的 name=value 
对 ， 如 果 提 供 了 这 个 参数 ， 可 以 配置 对 话 框 的 尺寸 或 其 他 属性 。 

用 "dialogwidth" 和 "dialogheight" 来 设置 对 话 框 窗口 的 大 小 ， 

用 "resizable=yes" 来 允许 用 户 改 变 窗口 大 小 。 


用 这 个 方法 显示 的 窗口 是 “ 模 态 的 "，showModalDialog() 这 个 方法 直 
到 窗口 关闭 之 前 不 会 返回 。 当 窗口 关闭 后 ，window.returnValue 属 性 的 
值 就 是 此 方法 返回 的 值 。 对 话 框 的 HTML 内 容 往往 必须 包含 用 来 设置 
returmValue 的 “人 确认” 按钮， 如果 需要 则 调用 window.close() (参见 14.8.1 
i 





例 14-4 是 一 个 适合 用 于 showModalDialog() 的 HTML 文 件 。 六 页 部 
的 注释 包含 调用 showModalDialog() 的 样 例 ， 而 图 14-1 显 示 了 通过 示例 代 
码 创 建 的 对 话 框 。 注 意 对 话 框 里 显示 的 大 量 文本 都 来 自 
showModalDialog() 的 第 二 个 参数 ， 而 不 是 写 死 在 HTML 里 。 





\w http:/ldavidflanagan.com/multiprompt.html - Google Chrome ~ Ox 
http.iiidavidflanagan. tom/multiprompt. htm 


Enter 3D pomt coordinates 


"| 
， | 二 


rr 


2 6 





Okay | Gancel 





图 14-1 使 用 showModalDialog0 方 法 显示 出 的 对 话 框 
例 14-1: 使 用 showModalDialog0 的 HTML 文件 





< 
这 个 HTML 文 件 并 不 是 独立 的 ， 这 个 文件 由 showModalDialog( ) 所 调用 
它 希 望 window.dialogArguments 是 一 个 由 字符 串 组 成 的 数组 





















































数组 的 第 一 个 元 素 将 放置 在 对 话 框 的 顶部 
剩 下 的 每 个 元 素 是 每 行 的 输入 框 的 标识 
当 单 击 0key 按 钮 的 时 候 ， 返 回 一 个 数组 ， 这 个 数组 是 由 每 个 输入 框 的 值 组 成 

使 用 诸如 这 样 的 代码 来 调用 : 

var p=showModalDialog("multiprompt.html", 

["Enter 3D point coordinates", "x","y", "zo] ， 
"dialogwidth:400;dialogheight:300;resizable:yes"); 

-> 

<form> 

<fieldset id="fields" 之 </fieldset> 雪 !- -对话 框 的 正文 部 分 - - > 

<div style="text-align:center"><!-- 关 闭 这 个 对 话 框 的 按钮 - - > 

<button onclick="okay()">0kay=/button> 

去 !- -设置 返回 值 和 关闭 事件 - - > 

<button onclick="cancel()">cCancel</button><<!- -关闭 时 不 带 任何 返回 值 - - > 

</div> 

<script> 之 // 创 建 对 话 框 的 主体 部 分 ， 并 在 fieldset 中 显示 出 来 

var args=dialogArguments; 

Var text="<legend>"+args[0]+"<=/legend>"， 

for(var i=1;i<args.length;i++) 

text+="<]label>"+args[i]+":<input id='f"+i+"'></label><br>"; 

document .getElementById("fields").innerHTML=text;// 直 接 关 闭 这 个 对 话 框 ， 不 设置 返回 值 
function cancel( ) {window.close();}// 读 取 输 入 框 的 值 ， 然 后 设置 一 个 返回 值 ， 之 后 关闭 
function okay(){ 

window.returnValue=[];// 返 回 一 个 数组 

for(var i=1;i<args.length;i+t+)// 设 置 输入 框 的 元 素 
window.returnValue[i-1]=document.getElementById("f"+i).value,; 

window.close( );// 关 闭 对 话 框 ， 使 showModalDialog( ) 返 区 
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</script> 
</form> 





14.6 ”错误 处 理 


Window 对 象 的 onerror 属 性 是 一 个 事件 处 理 程序 ， 当 未 捕获 的 异 
传播 到 调用 栈 上 时 就 会 调用 它 ， 并 把 和 上 误 消 息 输出 到 浏览 器 的 JavaSeript 
控制 台 上 。 如 果 给 这 个 属性 赋 一 个 函数 ， 那 么 只 要 这 个 窗口 中 发 生 了 
JavaScript 错 误 ， 束 会 调用 该 函数 ， 即 它 成 了 窗口 的 错误 处 理 程 序 。 


由 于 历史 原因 ， OY ts 
个 字符 串 参 数 ， 而 不 是 通过 通常 传递 的 一 个 事件 对 象 。 (其 他 客户 端 对 
象 的 onerror 处 理 程 序 所 需要 的 错误 条 件 是 不 一 样 的 ， 和 作者 是 下 
的 事件 处 理 程 序 ， 回 这 个 函数 只 须 传 入 一 个 事件 对 象 。 
window.onerror 的 第 一 个 参数 是 描述 和 音 误 的 一 条 消息 。 0 
个 字符 串 ， 它 存放 引发 错误 的 JavaScript 代 码 所 在 的 文档 的 URL。 第 三 个 
参数 是 文档 中 发 生 错 误 的 行 数 。 


除了 这 三 个 参数 之 外 ， ed 的 返回 值 也 很 重要 。 如 果 
onerror 处 理 程 序 返 回 false， 它 通知 浏览 器 事件 处 理 程序 已 经 处 理 了 错 





误 ， 不 需要 其 他 操作 。 换 名 话说， 浏览 器 不 应 该 显示 它 自 己 的 错误 消 
息 。 遗 憾 的 是 ， 由 于 历史 原因 ，Firefox 里 的 错误 处 理 程 序 必 须 返 回 true 
来 表示 它 已 经 处 理 了 错误 。 


onerror 处 理 程序 是 早期 JavaScript 的 遗物 ， 那 时 语言 核心 不 包含 
try/catch 异 和 常 处 理 语 句 。 现 代 代 码 已 经 很 少 使 用 它 。 但 是 ， 在 开发 阶 
en 
地 通知 你 : 











// 在 一 个 对 话 框 中 弹出 错误 消息 ， 但 不 超过 三 次 
window.onerror=function(msg,url,1ine)t{ 
if(onerror .num++<onerror .max){ 
alert("ERROR:"+mSg+"\n"+url+":"+]ine); 
return true; 


onerror .max=3; 
onerror .num=0; 


14.7 ”作为 Window 对 象 属性 的 文档 元 素 


如 果 在 HTML 文 档 中 用 id 属 性 来 为 元 素 命 名 ， 并 且 如 果 Window 对 象 
没有 此 名 字 的 属性 ，Window 对 象 会 赋予 一 个 属性 ， 它 的 名 字 是 id 属 性 
的 值 ， 而 它们 的 值 指 向 表示 文档 元 素 的 HTMLElement 对 象 。 


我 们 已 经 说 过 ， 在 客户 端 JavaScript 中 ，Window 对 象 是 以 全 局 对 象 
的 形式 存在 于 作用 域 链 的 最 上 层 ， 这 就 意味 着 在 HTML 文 档 中 使 用 的 id 
属性 会 成 为 可 以 被 脚本 访问 的 全 局 变量 。 如 果 文 档 包 含 一 个 二 button 
id="okay"/ 过 元素， 可 以 通过 全 局 变量 okay 来 引用 此 元 素 。 


但 是 ， 有 一 个 重要 的 警告 ， 如 果 Window 对 象 已 经 具有 此 名 字 的 属 
性 ， 这 就 不 会 发 生 。 比 如 ，id 是 "history"、"location" 或 "navigator" 的 元 
素 ， 就 不 会 以 全 局 变量 的 形式 出 现 ， 因 为 这 些 ID 已 经 占用 了 。 同 样 ， 如 
果 HTML 文 档 包 含 一 个 id 为 "x" 的 元 素 ， 并 且 还 在 代码 中 声明 并 赋值 给 全 
局 变量 x， 那 么 显 式 声明 的 变量 会 隐藏 隐 式 的 元 素 变量 。 如 果 脚 本 中 的 
变量 声明 出 现在 命名 元 素 之 前 ， 那 这 个 变量 的 存在 就 会 阻止 元 素 获 取 它 
的 window 属 性 。 而 如 果 脚 本 中 的 变量 声明 出 现在 命名 元 系 之 后 ， 那 么 
变量 的 显 式 赋值 会 履 盖 该 属性 的 隐 式 值 。 


在 15.2 节 中 ， 你 会 学 到 通过 document.getElementById() 方 法 ， 用 


















































HTML 的 id 属性 来 查找 文档 元 素 。 见 下 面 的 例子 : 








var ui=["input", "prompt", "heading"];// 数 组 中 存放 要 查找 的 元 素 id 
ui.forEach(function(id){// 用 每 个 id 查找 对 应 的 元 素 
ui[id]=document .getElementById(id);// 将 其 存放 在 一 个 属性 中 
}); 





















































运行 完 这 段 代码 之 后 ，ui.input、ui.prompt 和 ui.heading 会 引用 文档 元 
素 。 脚 本 可 以 用 全 局 变量 input 和 heading 来 代 蔡 ui.input 和 ui.heading。 但 
记得 14.5 节 里 的 Window 对 象 有 个 方法 的 名 字 是 promptO0， 所 以 脚本 中 不 
能 用 全 局 变量 prompt 代 蔡 ui.prompt。 


元 素 ID 作为 全 局 变量 的 隐 式 应 用 是 web 浏 览 器 演化 过 程 中 遗留 的 怪 
辛 。 它 主要 是 出 于 与 已 有 Web 页 面 后 同 莱 容 性 的 考虑 。 但 这 里 并 不 推荐 
使 用 这 种 做 法 一 ”浏览 器 厂 商 可 以 在 任何 时 候 为 Window 对 象 定义 新 属 
性 ， 而 这 些 新 属性 都 会 破坏 使 用 了 此 属性 名 的 隐 式 定义 的 代码 。 反 之 ， 
用 document.getElementById() 来 显 式 查找 元 素 。 如 果 给 它 一 个 更 简单 的 
名 字 ， 这 种 用 法 会 变 得 更 加 简便 。 














var$=function(id){return document.getElementById(id);}; 
ui.prompt=$("prompt"); 





很 多 客户 端 类 库 都 定义 了 $ 函 数 ， 类 似 上 面 一 样 来 通过 ID 得 找 元 
素 。 我 们 会 在 第 19 章 里 看 到 jQuery 的 $ 函 数 作 为 通用 的 元 素 选 择 方 
法 ， 基 于 ID、 标 签名 、class 属 性 或 其 他 标准 ， 返 回 一 个 或 多 个 元 素 。) 


假设 ID 并 没有 被 Window 对 象 使 用 的 话 ， 那 么 任何 有 id 属性 的 HIML 
元 素 都 会 成 为 全 局 变量 的 值 。 以 下 HTML 元 素 如 果 有 name 属 性 的 话 ， 也 
会 这 样 表现 : 





<a> 过 applet> 之 <area> 二 embed> 雪 form> 坟 frame 之 天 frameset> 之 <Iiframe 之 <img 之 <object 
> 











id 元 素 在 文档 中 必须 是 唯一 的 ， 两 个 元 素 不 能 有 相同 的 id。 但 是 ， 
这 对 name 属 性 无 效 。 如 果 上 面 的 元 素 有 多 于 一 个 有 相同 的 name 属 性 
(或 者 一 个 元 素 有 name 属 性 ， 而 男 一 个 元 素 有 相同 值 的 id 属 性 ) ， 具 有 
该 名 称 的 隐 式 全 局 变量 会 引用 一 个 类 数组 对 象 ， 这 个 类 数组 对 象 的 元 素 
是 所 有 命名 的 元 素 。 











有 name 或 id 属性 的 二 iframe> 元 素 是 个 特殊 的 例子 。 为 它们 隐 式 创 
建 的 变量 不 会 引用 表示 元 素 自 身 的 Element 对 象 ， 而 是 引用 表示 所 iframe 
之 元 系 创 建 的 能 艾 浏 览 器 窗 体 的 Window 对 象 。 我 们 会 在 14.8.2 节 再 次 谈 
Ws 


14.8 多 窗口 和 窗 体 


一 个 web 浏览 器 窗口 可 能 在 条 面 上 包含 多 个 标签 页 。 每 一 个 标签 页 
都 是 独立 的 “浏览 上 下 文 ”(browsing context) ， 每 一 个 上 下 文 都 有 独立 
的 Window 对 象 ， 而 且 相 互 之 间 互 不 干扰 。 每 个 标签 页 中 运行 的 脚本 通 
党 并 不 知道 其 他 标签 页 的 存在 ， 更 不 用 说 和 其 他 标签 页 的 Window 对 象 
进行 交互 操作 或 者 操作 其 文档 内 容 了 。 如 果 Web 浏 览 器 不 支持 多 标签 
页 ， 或 者 把 标签 页 关 近 了 ， 可 能 在 某 一 时 刻 架 面 上 会 有 很 多 打开 的 Web 
浏览 器 窗口 。 而 使 用 标签 页 ， 每 个 保 面 窗口 中 的 Window 对 象 都 是 独 江 
的 ， 也 就 是 说 彼此 就 是 完全 独立 的 ， 和 其 他 蝎 面 窗口 没有 任何 联系 。 


但 是 窗口 并 不 总 是 和 其 他 窗口 完全 没关系 。 一 个 窗口 或 标签 页 中 的 
脚本 可 以 打开 新 的 窗口 或 标签 页 ， 当 一 个 脚本 这 样 做 时 ， 这 样 多 个 窗口 
或 窗口 与 另 一 个 窗口 的 文档 之 间 就 可 以 互 操作 (可 以 参照 13.6.2 节 中 讲 
解 的 同 源 策略 约束 ) 。14.8.1 节 介绍 关于 窗口 打开 和 关闭 的 更 多 内 容 。 


HTML 文 档 经 常 使 用 二 iframe 二 来 黄 套 多 个 文档 。 由 过 iframe 二 所 创 
建 的 藤 套 浏览 上 下 文 是 用 它 自 己 的 Window 对 象 所 表示 的 。 上 废弃 的 < 
frameset 和 二 frame 放 元 素 同 样 创建 了 一 个 舱 套 的 浏览 上 下 文 ， 每 一 个 
二 frame 二 都 由 一 个 独立 的 Window 对 象 表 示 。 对 于 客户 端 JavaScript 来 
说 ， 窗 口 、 标 签 页 、iframe 和 框架 都 是 浏览 上 下 文 ; 对 于 JavaScript 来 
说 ， 它 们 都 是 Window 对 象 。 和 相互 独立 的 标签 页 不 同 ， 髓 套 的 浏览 
下 文 之 间 并 不 是 相互 独立 的 。 在 一 个 窗 体 中 运行 的 JavaScript 程 序 总 是 可 
以 看 到 它 的 祖先 和 子孙 和 窗 体 ， 尽 管 脚本 查看 这 些 窗 体 中 的 文档 受到 同 源 
策略 的 限制 。14.8.2 节 会 讲 到 花 套 的 窗 体 。 


因为 Window 是 客户 端 JavaScript 的 全 局 对 象 ， 每 个 窗口 或 窗 体 都 包 
含 独立 的 JavaScript 执 行 上 下 文 。 不 过 ， 在 一 个 窗口 中 的 JavaScript 代 
码 ， 如 果 有 同 源 策 略 的 限制 ， 则 可 以 使 用 另外 一 个 窗口 中 定义 的 对 象 、 
属性 和 方法 。 与 此 相关 的 细节 会 在 14.8.3 节 中 详细 讨论 。 当 由 于 同 源 策 
略 的 限制 导致 窗口 之 间 无 法 直接 交互 时 ，HIML5 提 供 一 个 基于 事件 的 
消息 传输 API， 可 以 用 于 间接 的 通信 。 这 在 22.3 节 中 会 有 详细 讨论 。 
























































14.8.1 打开 和 关闭 窗口 


使 用 Window 对 象 的 open0 方 法 可 以 打开 一 个 新 的 浏览 器 窗口 (或 标 
签 页 ， 这 通常 和 浏览 器 的 配置 选项 有 关 ) 。Window.open(0) 载 入 指定 的 
URL 到 新 的 或 已 存在 的 窗口 中 ， 并 返回 代表 那个 窗口 的 Window 对 象 。 
它 有 4 个 可 选 的 参数 。 


open() 的 第 一 个 参数 是 要 在 新 窗口 中 显示 的 文档 的 URL。 如 果 这 个 
参数 省 略 了 《也 可 以 是 空 字 符 串 ) ， 那 么 会 使 用 空 页 面 的 URL 
about:blank。 


open0 的 第 二 个 参数 是 新 打开 的 窗口 的 名 字 。 如 果 指定 的 是 一 个 已 
经 存在 的 窗口 的 名 字 (并 且 脚 本 允许 跳 转 到 那个 窗口 》， 会 直接 使 用 已 
存在 的 窗口 。 和 否则， 会 打开 新 的 窗口 ， 并 将 这 个 指定 的 名 字 赋值 给 它 。 
如 果 省 略 此 参数 ， 会 使 用 指定 的 名 字 "_blank" 打 开 一 个 新 的 、 未 命名 的 
窗口 。 


需要 注意 的 是 ， 脚 本 是 无 法 通过 简单 地 猜测 窗口 的 名 字 来 操控 这 个 
窗口 中 的 Web 应 用 的 ， 只 有 设置 了 “允许 导航 ”(allowed to navigate) 
CHIML5 规 范 中 的 术语 ) 的 页 面 才 可 以 这 样 。 宽 泛 地 讲 ， 当 且 仅 当 窗 
口 包 含 的 文档 来 自 相 同 的 源 或 者 是 这 个 脚本 打开 了 那个 窗口 (或 者 递归 
地 打开 了 窗口 中 打开 的 窗口 ) ， 脚 本 才 可 以 只 通过 名 字 来 指定 存在 的 窗 
口 。 还 有 ， 如 果 其 中 一 个 窗口 是 内 骨 在 男 一 个 窗口 里 的 窗 体 ， 那 么 在 它 
们 的 脚本 之 间 惑 可 以 相互 导航 。 这 种 情况 下 ， 可 以 使 用 保留 的 名 
字 "_top"〔 顶 级 祖先 窗口 ) 和 "parent" (直接 父 级 窗口 ) 来 获取 彼此 的 
齐 览 上 下文。 


























窗口 名 字 


窗口 的 名 字 是 非常 重要 的 ， 因 为 它 人 允许 open() 方 法 引用 已 存在 的 窗 
口 ， 并 同时 可 以 作为 a 二 和 二 form 元 素 上 HTMIL target 属 性 的 值 ， 用 
来 表示 引用 的 文档 (或 表单 提交 结果 ) 应 该 显示 在 命名 的 窗口 中 。 这 个 
target 属 性 的 值 可 以 设置 为 "_blank"、"_parent" 或 "_top"， 从 而 使 引用 的 
文档 显示 在 新 的 空白 窗口 、 父 窗口 / 窗 体 或 顶层 窗口 中 。 


Window 对 象 如 果 有 name 属 性 ， 束 用 它 保存 名 字 。 该 属性 是 可 写 
的 ， 并 且 脚 本 可 以 随意 设置 它 。 如 果 传 递 给 window.open( 一 个 
除 "_blank" 之 外 的 名 字 ， 通 过 该 调用 创建 的 窗口 将 以 该 名 字 作 为 name 属 














性 的 初始 值 。 如 果 <<iframe 之 元 素 有 name 属 性 ， 表 示 该 iame 的 Window 
对 象 会 用 它 作 为 name 属 性 的 初始 值 。 


open() 的 第 三 个 可 选 参 数 是 一 个 以 逗号 分 阳 的 列表 ， 包 伟大 小 和 各 
种 属性 ， 用 以 表明 新 窗口 是 如 何 打 开 的 。 如 果 省 略 这 个 参数 ， 那 么 新 窗 
口 就 会 用 一 个 默认 的 大 小 ， 而 且 带 有 一 整 组 标准 的 UI 组 件 ， 即 菜单 栏 、 
状态 栏 、 工 具 栏 等 。 在 标签 式 浏览 器 中 ， 会 创建 一 个 新 的 标签。 


另 一 方面 ， 如 果 指 定 这 个 参数 ， 就 可 以 指定 窗口 的 太 寸 ， 以 及 筷 包 
含 的 一 组 属性 。 ( 显 式 指定 窗口 尺寸 更 像 是 创建 新 窗口 ， 而 不 是 新 标 
签 。) 例如 ， 要 打开 人 允许 改变 大 小 的 浏览 露 窗口， 并 且 包 含 状 态 栏 、 工 
具 栏 和 地 址 栏 ， 就 可 以 这 样 写 : 








var w=window.open("smallwin.html","smallwin", 
"width=400,height=350, status=yes,resizable=yes"); 





第 三 个 参数 是 非 标准 的 ，HTML5 规 范 也 主张 浏览 器 应 该 忽略 它 。 
参见 第 四 部 分 中 的 Window.open0O 查 看 在 此 参数 中 可 以 指定 什么 内 容 。 
注意 ， 当 指定 第 三 个 参数 时 ， 所 有 没有 显 式 指定 的 功能 都 会 忽略 。 出 于 
各 种 安全 原因 ， 浏 览 器 包含 对 可 能 指定 的 功能 的 限制 。 例 如 ， 通 常 不 人 允 
许 指定 一 个 太 小 的 或 者 位 于 屏幕 之 外 的 窗口 ， 并 且 一 些 浏览 右 不 允许 创 
召 一 个 没有 状态 栏 的 窗口 。 


open() 的 第 四 个 参数 只 在 第 二 个 参数 命名 的 是 一 个 存在 的 窗口 时 才 
有 用 。 它 是 一 个 布尔 值 ， 声 明了 由 第 一 个 参数 指定 的 URL 是 应 用 蔡 换 挥 
窗口 浏览 历史 的 当前 条 目 〈true) ， 还 是 应 该 在 窗口 浏览 历史 中 创建 一 
个 新 的 条 目 (false〉， 后 者 是 默认 的 设置 。 


open() 的 返回 值 是 代表 命名 或 新 创建 的 窗口 的 Window 对 象 。 可 以 在 
自己 的 JavaScript 代 码 中 使 用 这 个 Window 对 象 来 引用 新 创建 的 窗口 ， 就 
像 使 用 隐 式 的 Window 对 象 window 来 引用 运行 代码 的 窗口 一 样 : 





























var w=window.open();// 扩 个 新 的 空白 窗 
w.alert("About to visit http://example.com");// 调 用 alert() 方 法 
w.location="http://example.com";// 设 置 它 的 location 属 性 













































































在 由 window.open() 方 法 创建 的 窗口 中 ，opener 属 性 引用 的 是 打开 它 
的 脚本 的 Window 对 象 。 在 其 他 窗口 中 ，opener 为 null: 




















w.opener!1==null;//true， 对 于 由 w 创 建 的 任意 窗 
w.open().opener===w;//true， 对 于 任意 窗口 w 



































Window.open() 是 广告 商用 来 在 你 浏览 网 页 时 采用 的 “页 面 之 前 弹 
出 ”或 “页 面 之 后 弹出 ”窗口 的 一 种 方法 。 由 于 对 于 这 种 烦人 的 弹出 窗口 
的 滥用 ， 因 此 大 部 分 浏览 器 都 增加 了 弹出 窗口 过 小 系统 。 通 常 ，open() 
方法 只 有 当 用 户 手动 单 击 按钮 或 者 链接 的 时 候 才 会 调用 。JavaScript 代 三 
尝试 在 浏览 圳 初始 载 入 《或 秋 载 ) 时 开局 一 个 弹出 窗口 时 ， 通 溃 会 失 
败 。 将 上 面 的 代码 粘贴 到 浏览 器 的 JavaScript 控 制 台 里 进行 测试 ， 可 能 会 
由 于 同样 的 原因 而 失败 。 


关闭 窗口 
就 像 方法 open0 打 开 一 个 新 窗口 一 样 ， 方 法 close0 将 关闭 一 个 窗 
口 。 如 果 已 经 创建 了 Window 对 象 w， 可 以 使 用 如 下 的 代码 将 它 关 掉 : 


w.close( ); 


运行 在 那个 窗口 中 的 JavaScript 代 码 则 可 以 使 用 下 面 的 代码 关闭 : 


window.close(); 


注意 ， 要 显 式 地 使 用 标识 符 window， 这 样 可 以 避免 混淆 Window 对 
象 的 close0 方 法 和 Document 对 象 的 close() 方 法 一 一 如 果 正 在 从 事件 处 理 
程序 调用 close0， 这 很 重要 。 


大 多 数 浏览 器 只 允许 自动 关闭 由 自己 的 JavaScript 代 码 创 建 的 窗口 。 
如 果 要 关闭 其 他 窗口 ， 可 以 用 一 个 对 话 框 提示 用 户 ， 要 求 他 对 关闭 窗口 
的 请 求 进行 确认 (或 取消 ) 。 在 表示 窗 体 而 不 是 顶级 窗口 或 标签 页 上 的 
Window 对 象 上 执行 dose0) 方 法 不 会 有 任何 效果 ， 它 不 能 关闭 一 个 窗 体 

《反之 可 以 从 它 包 含 的 文档 中 删除 iframe) 。 


即使 一 个 窗口 关闭 了 ， 代 表 它 的 Window 对 象 仍然 存在 。 己 关闭 的 
窗口 会 有 个 值 为 true 的 closed 属 性 ， 它 的 document 会 是 null， 它 的 方法 通 
常 也 不 会 再 工作 。 











14.8.2” 窗 体 之 间 的 关系 


我 们 已 经 知道 ，Window 对 象 的 方法 open0 返 回 代 表 新 创建 的 窗口 的 
Window 对 象 。 而 且 这 个 新 窗口 具有 opener 属 性 ， 该 属性 可 以 打开 它 的 原 
台 窗 口 。 这 样 ， 两 个 窗口 就 可 以 相互 引用 ， 彼 此 都 可 以 读 取 对 方 的 属性 
或 是 调用 对 方 的 方法 。 窗 体 也 是 这 样 的。 窗口 或 窗 体 中 运行 的 代码 都 可 
以 通过 下 面 介 绍 的 属性 引用 到 自己 的 窗口 或 窗 体 ， 以 及 髓 套 的 子 窗 体 。 


任何 窗口 或 窗 体 中 的 JavaScript 代 码 都 可 以 将 自己 的 窗口 和 窗 体 引 用 
为 window 或 self。 窗 体 可 以 用 parent 属 性 引用 包含 它 的 窗口 或 窗 体 的 
Window 对 象 : 











parent history.back()， 


如 果 一 个 窗口 是 顶级 窗口 或 标签 ， 而 不 是 窗 体 ， 那 么 其 parent 属 性 
引用 的 就 是 这 个 窗口 本 身 : 




















parent==self;// 只 有 顶级 窗口 才 会 返回 true 























如 果 一 个 窗 体 包含 在 男 一 个 窗 体 中 ， 而 后 者 又 包含 在 顶级 窗口 中 ， 
那么 该 窗 体 就 可 以 使 用 parent.parent 来 引用 顶级 窗口 。top 属 性 是 一 个 通 
用 的 快捷 方式 ， 无 论 一 个 窗 体 被 蔡 套 了 几 层 ， 它 的 top 属 性 引用 的 都 是 
指 癌 包含 它 的 顶级 窗口 。 如 果 一 个 Window 对 象 代 表 的 是 一 个 顶级 窗 
口 ， 那 么 它 的 top 属 性 引用 的 就 是 窗口 本 丑 。 对 于 那些 顶级 窗口 的 直接 
子 窗 体 ，top 属 性 就 等 价 于 parent 属 性 。 


parent 和 top 属 性 允许 脚本 引用 它 的 窗 体 的 祖先 。 有 不 止 一 种 方法 可 
以 引用 窗口 或 窗 体 的 子孙 窗 体 。 窗 体 是 通过 二 iframe 放 元 素 创 建 的 。 可 
以 用 获取 其 他 元 素 的 方法 来 获取 一 个 表示 二 iframe> 的 元素 对 象 。 假 定 
文档 里 有 二 iframe id="fl">。 那 么 ， 表 示 访 iframe 的 元 素 对 象 天 是 : 














var iframeElement=document.getElementById("f1"); 





二 iframe 放 元 素 有 contentWindow 属 性 ， 引 用 该 窗 体 的 Window 对 
象 ， 所 以 此 窗 体 的 Window 对 象 就 是 : 





var childFrame=document ,getEJementById("f1") .contentWindow 














可 以 进行 反 回 操作 从 表示 窗 体 的 Window 对 象 来 获取 该 窗 体 的 
<iframe 之 元 素 用 Window 对 象 的 frameElement 属 性 。 表 示 顶 级 窗口 


的 Window 对 象 的 frameElement 属 性 为 null， 窗 体 中 的 Window 对 象 的 
frameElement 属 性 不 是 null: 





var elt=document .getElementById("f1"); 

var win=elt.contentWwindow; 
win.frameElement===elt// 对 于 帧 来 说 永远 是 true 
window.frameElement===null1// 对 于 顶级 窗口 来 说 永远 是 true 


























尽管 如 此 ， 通 常 不 需要 使 用 getElementById() 方 法 和 contentWindow 
属性 来 获取 窗口 中 子 窗 体 的 引用 。 每 个 Window 对 象 都 有 一 个 frames 属 
性 ， 它 引用 自身 包含 的 窗口 或 窗 体 的 子 窗 体 。frames 属 性 引用 的 是 类 数 
组 对 象 ， 并 可 以 通过 数字 或 窗 体 名 进行 索引 。 要 引用 窗口 的 第 一 个 子 窗 
体 ， 可 以 用 frames[0]。 要 引用 第 二 个 子 窗 体 的 第 三 个 子 窗 体 ， 可 以 用 
frames[1].frames[2]。 窗 体 里 运行 的 代码 可 以 用 parent.frames[1] 引 用 兄 第 
窗 体 。 注 意 frames[] 数 组 里 的 元 素 是 Window 对 象 ， 而 不 是 二 iframe 过 元 
过 


如 果 指 定 二 iframe 放 元 素 的 name 或 id 属 性 ， 那 么 除了 用 数字 进行 索 
引 之 外 ， 还 可 以 用 名 字 来 进行 索引 。 例 如 ， 名 字 为 "f1" 的 帧 应 该 用 
frames["f1"] 或 frames.f1。 


刚刚 在 14.7 节 中 讲 到 ， 二 iframe 放 以 及 其 他 元 素 的 name 和 ID 都 可 以 
自动 通过 Window 对 象 的 属性 来 应 用 ， 而 天 iframe> 之 元 素 和 其 他 的 元 素 有 
所 不 同 : 对 于 窗 体 来 说 ， 通 过 Window 对 象 的 属性 引用 的 二 iframe 二 是 指 
窗 体 中 的 Window 对 象 ， 而 不 是 元 素 对 象 。 也 就 是 说 ， 可 以 通过 窗 体 的 
名 字 "f1" 来 代替 frames.f1。 实 际 上 ，HTML5 规 范 指出 frames 属 性 是 一 个 
目 引 用 (self-referential〉 的 属性 ， 束 像 window 和 self 一 样 。 而 这 个 
Window 对 象 看 起 来 像 一 个 由 窗 体 组 成 的 数组 。 也 就 是 说 可 以 通过 windo 
w[0] 来 获取 第 一 个 子 窗 体 的 引用 ， 可 以 通过 window. 人 
窗 体 的 编号 。 但 是 这 里 我 们 使 用 frames 来 代 共 window 全 a 
尽管 这 种 方法 有 些 传统 。 需 要 注意 的 是 ， 当 前 的 浏览 右 不 会 
frame==window， 但 在 frame 和 window 不 相等 的 情况 下 ， 窗 
体 的 索引 或 名 字 来 获取 其 他 对 象 的 引用 。 














可 以 使 用 志 iframe> 的 元 素 的 name 或 id 属性 作为 JavaScript 代 码 中 的 
引用 标识 。 但 如 果 使 用 name 属 性 的 话 ， 所 指定 的 name 同 样 也 会 成 为 代 
表 这 个 窗 体 的 Window 对 象 的 name 属 性 。 以 这 种 方式 给 出 的 名 字 可 以 用 
做 一 个 链接 的 target 属 性 ， 而 且 它 可 以 用 做 window.open0 的 第 二 个 参 
数 。 





14.8.3 ”交互 窗口 中 的 JavaScript 


每 个 窗口 和 窗 体 都 是 它 自身 的 JavaScript 执 行 上 上 下文， 以 Window 作 
为 全 局 对 象 。 但 是 如 果 一 个 窗口 或 窗 体 中 的 代码 可 以 应 用 到 其 他 窗口 或 
窗 体 (并 且 同 源 集 略 没有 阻止 它 )， 那 么 一 个 窗口 或 窗 体 中 的 脚本 就 可 
以 和 其 他 窗口 或 窗 体 中 的 脚本 进行 交互 。 

设想 一 个 Web 页 面 里 有 两 个 <iframe 二 元 素 ， 分 别 叫 "A" 和 "B"， 并 


假设 这 些 窗 体 所 包含 的 文档 来 自 于 相同 的 一 个 服务 器 ， 并 且 包 含 交 互 脚 
本 。 窗 体 A 里 的 脚本 定义 了 一 个 变量 i: 





Var i=3; 








这 个 变量 只 是 全 局 对 象 的 一 个 属性 ， 也 是 window 对 象 的 一 个 局 
性 。 窗 体 A 中 的 代码 可 以 用 标识 符 i 来 引用 变量 ， 或 者 用 window 对 象 显 
式 地 引用 这 个 变量 : 





window.i 


由 于 窗 体 B 中 的 脚本 可 以 引用 窗 体 A 的 Window 对 象 ， 因 此 它 也 可 以 
引用 那个 window 对 象 的 属性 : 








parent ,A.i=4;// 改 变 窗 体 A 中 的 变量 i 的 值 














我 们 知道 ， 定 义 函 数 的 关键 字 function 可 以 声明 一 个 变量 ， 就 像 关 
键 字 var 所 做 的 那样 。 如 果 窗 体 B 中 的 脚本 声明 了 一 个 〈( 非 租 套 的 ) 函数 
f， 这 个 函数 在 窗 体 B 中 是 全 局 变量 ， 并 且 窗 体 B 中 的 代码 可 以 用 f0 调 用 
人 但 是 窗 体 A 中 的 代码 必须 将 f 作 为 窗 体 B 的 Window 对 象 的 f 属 性 来 引 

















parent.B.f();// 调 用 窗 体 B 中 定义 的 一 个 函数 























如 果 窗 体 A 中 的 代码 需要 很 频繁 地 使 用 这 个 函数 ， 则 可 以 将 这 个 函 
数 赋值 给 窗 体 A 中 的 一 个 变量 ， 这 样 束 可 以 经 常 使 用 这 个 变量 来 引用 窗 
体 中 的 函数 了 : 





Var f=parent.B.f; 


现在 窗 体 A 中 的 代码 就 可 以 像 窗 体 B 中 的 代码 那样 调用 函数 f() 了 。 


当 采 用 这 种 方式 在 窗 体 或 窗口 间 共 享 函 数 时 ， 牢 记 词 法 作用 域 的 规 
则 非常 重要 。 函 数 在 定义 它 的 作用 域 中 执行 ， 而 不 是 在 调用 它 的 作用 域 
中 执行 。 就 上 面 那个 例子 来 说 ， 如 果 函 数 f{ 引 用 了 全 局 变量 ， 那 么 将 在 
窗 体 B 的 属性 中 查找 这 些 变 量 ， 即 使 函数 是 由 窗 体 A 调 用 的 。 

要 记 住 构造 函数 也 是 函数 ， 所 以 当 用 构造 函数 和 相关 的 原型 对 象 定 
义 一 个 类 ( 见 第 9 章 〉 时 ， 那 个 类 只 在 一 个 单独 的 窗口 中 定义 。 假 设 在 
例子 9-6 中 的 窗口 包含 窗 体 A 和 窗 体 B， 并 且 包 含 Set 类 。 


顶级 窗口 中 的 脚本 可 以 创建 新 的 Set 对 象 ， 类 似 这 样 : 

















Var S=new Set(); 





相反 ， 每 个 窗 体 中 的 代码 必须 显 式 地 用 父 级 窗口 的 属性 来 引用 SetO 
构造 函数 : 


var s=new parent .Set()， 





另外 ， 每 个 窗 体 中 的 代码 还 可 以 定义 上 自己 的 变量 来 引用 构造 函数 ， 
这 样 束 更 方便 了 : 


Var Set=top.Set();var s=new Set(); 


和 用 户 定义 的 类 不 同 ， 内 置 的 类 《〈 比 如 String，Date 和 RegExp) 都 
会 在 所 有 的 窗口 中 自动 预定 义 。 但 是 要 注意 ， 每 个 窗口 都 有 构造 函数 的 











一 个 独立 副本 和 构造 函数 对 应 原型 对 象 的 一 个 独立 副本 。 例 如 ， 每 个 窗 
口 都 有 自己 的 String0 构 造 函 数 和 String.prototype 对 象 的 副本 。 因 此 ， 如 
果 编 写 一 个 操作 JavaScript 字 符 串 的 新 方法 ， 并 且 通 过 把 它 赋值 给 当前 窗 
口中 的 String.prototype 对 象 而 使 它 成 为 String 类 的 一 个 方法 ， 那 么 该 窗口 
中 的 所 有 字符 串 就 都 可 以 使 用 这 个 新 方法 。 但 是 ， 别 的 窗口 中 定义 的 字 
符 串 不 能 使 用 这 个 新 方法 。 


事实 上 ， 每 个 Window 都 有 自己 的 原型 对 象 ， 这 意味 着 instanceof 操 
作 符 不 能 路 窗口 工作 。 例 如 ， 当 用 instanceof 来 比较 窗 体 B 的 一 个 字符 串 
和 窗 体 A 的 String0) 构 造 函 数 时 ， 结 果 会 为 false。7.10 节 介绍 了 决定 跨 窗 
口 数组 的 类 型 时 的 相关 困难 。 


WindowProxy 对 象 


我 们 已 经 讲 过 很 多 次 ，Window 对 象 是 客户 端 JavaScript 的 全 局 变 
量 。 但 是 从 技术 上 来 看 ， 并 不 是 这 样 的 。Web 浏 览 占 每 次 回 窗口 或 窗 体 
中 载 入 新 的 内 容 ， 它 都 会 开始 一 个 新 的 JavaScript 执 行 上 下 文 ， 包含 一 个 
新 创建 的 全 局 对 象 。 但 是 当 多 个 窗口 或 窗 体 在 使 用 时 ， 有 一 个 重要 的 概 
念 ， 尺 管 窗 体 或 窗口 载 入 了 新 的 文档 ， 但 是 引用 窗 体 或 窗口 的 Window 
对 象 还 仍然 是 一 个 有 效 的 引用 。 


所 以 客户 端 JavaScript 有 两 个 重要 的 对 象 。 客 户 端 全 局 对 象 处 于 作用 
域 链 的 顶级， 并 且 是 全 局 变量 和 函数 所 定义 的 地 方 。 事 实 上 ， 全 局 对 象 
会 在 窗口 或 窗 体 载 入 新 内 容 时 被 蔡 换 。 我 们 称 为 “Window 对 象 * 的 对 象 
实际 上 不 是 全 局 对 象 ， 而 是 全 局 对 象 的 一 个 代理 。 每 当 查 询 或 设置 
Window 对 象 的 属性 时 ， 就 会 在 窗口 或 窗 体 的 当前 全 局 对 象 上 查询 或 设 
置 相同 的 属性 。HTML5 规 范 称 这 个 代理 对 象 为 WindowProxy， 但 在 本 书 
中 我 们 会 继续 使 用 名 词 Window 对 象 。 


由 于 它 的 代理 行为 ， 除 了 有 更 长 的 生命 周期 之 外 ， 代 理 对 象 表现 得 
像 真 正 的 全 局 对 象 。 如 果 可 以 比较 两 个 对 象 ， 那 么 区 分 它们 会 很 困难 。 
但 是 事实 上 ， 没 有 办 法 可 以 引用 到 真正 的 客户 端 全 局 对 象 。 全 局 对 象 处 
于 作用 域 链 的 顶端 ， 但 是 window、self、top、parent 以 及 窗 体 的 属性 全 
部 返回 代理 对 象 。window.open() 方 法 也 返回 代理 对 象 。 甚 至 顶级 函数 里 
this 关 键 字 的 值 都 是 代理 对 象 ， 而 不 是 真正 的 全 局 对 象 包 。 


LUJjQuery 的 作者 John Resig 曾 经 写 过 一 篇 文章 来 解释 这 个 “队列 ”， 详 情 
请 参照 http://ejohn.org/blog/how-javascript-timers-work/。 
































已 INetscape Navigator( 网 景 浏览 器 〉 是 一 个 著名 的 Web 浏 览 器 ， 更 多 信 
居 可 阅读 : http://en.wikipedia.org/wiki/Netscape_Navigator。 

[3] 模 态 对 话 框 就 是 指 那 种 “显示 出 来 就 不 可 以 点 选 位 于 其 下 面 的 对 话 
框 ” 的 对 话 框 。 

[4 最 后 点 对 于 ES3 和 ES5 规 范 稍 有 违背 ， 但 客户 端 JavaScript 是 需要 文 
持 这 种 多 重 执行 上 下 文 的 。 








第 15 章 ”脚本 化 文档 

客户 端 JavaScript 的 存在 使 得 静态 的 HTML 文 档 变 成 了 交互 式 的 Web 
应 用 。 脚 本 化 Web 页 面 内 容 是 JavaScript 的 核心 目标 。 本 章 一 一 本 书 中 最 
重要 的 章节 之 一 前 述 了 它 是 如 何 做 到 的 。 

第 13 章 和 第 14 章 解释 了 每 一 个 Web 浏 览 器 窗口 、 标 签 页 和 框架 由 一 
个 Window 对 象 所 表示 。 每 个 Window 对 象 有 一 个 document 属 性 引用 了 
Document 对 象 。Document 对 象 表示 窗口 的 内 容 ， 它 就 是 本 章 的 主题 。 
尽管 如 此 ，Document 对 象 并 非 独 立 的 ， 它 是 一 个 巨大 的 API 中 的 核心 对 
象 ， 叫 做 文档 对 象 模型 (Document Object Model，DOM) ， 它 代表 和 
操作 文档 的 内 容 。 

本 章 开 始 部 分 解释 DOM 的 基本 架构 ， 然 后 进一步 解释 以 下 内 容 : 

:如 何在 文档 中 碍 询 或 选取 单独 的 元 素 。 


如何 将 文档 作为 节点 树 来 过 历 ， 如 何 找到 任何 文档 元 素 的 祖先 、 
兄弟 和 后 代 元 素 。 


如何 查 询 和 设置 文档 元 素 的 属性 。 

如何 查询 、 设 置 和 修改 文档 内 容 。 

如何 通过 创建 、 插 入 和 删除 节点 来 修改 文档 结构 。 
:如 何 与 HTML 表 单一 起 工作 。 


本 章 最 后 一 节 涵 盖 其 他 各 种 文档 特性 ， 包 含 referrer 属 性 、write() 方 
法 和 查询 当前 文档 中 选取 的 文档 文本 的 技术 等 。 


15.1 DOM 概 览 


文档 对 象 模型 (DOM) 是 表示 和 操作 HTML 和 XML 文档 内 容 的 基 
础 API。API 不 是 特别 复杂 ， 但 是 需要 理解 大 量 的 架构 细节 。 首 先 ， 应 
该 理解 HTML 或 XML 文档 的 磐 套 元 素 在 DOM 树 对 象 中 的 表示 。HTML 
文档 的 树 状 结构 包含 表示 HTML 标 签 或 元 素 〈 如 所 body 之 、<p 之 ) 和 



































表示 文本 字符 串 的 广 扩 ， 它 也 可 能 包含 表示 HTML 注 释 的 节点 。 考 虑 以 
下 简单 的 HTML 文 档 : 





<html> 

<head> 

<title>Sample Document<=/title> 
</head> 

<body> 

<h1i>An HTML Document<=/hi> 

<p>This is a<i>simple</i>document. 
</html> 





图 15-1 是 此 文档 DOM 表 示 的 树 状 图 。 


"Sample Document' 


"An HTML Document" 





图 15-1 HTML 文 档 的 树 状 表示 


如 果 还 未 熟悉 计算 机 编程 中 的 树 状 结构 ， 借 用 家 谱 图 来 形容 是 比较 
有 用 的 方法 。 在 一 个 节点 之 上 的 直接 节点 是 其 父 节 点 ， 在 其 下 一 层 的 直 














接 节 点 是 其 子 市 把 。 在 同一 层 上 上 其 有 相同 父 节 点 的 节点 是 兄 第 节 反 。 在 
一 个 节点 之 下 的 所 有 层级 的 一 组 节点 是 其 后 代 节 点 。 一 个 节点 的 任何 父 
节点 、 祖 父 节 氮 和 其 上 层 的 所 有 节点 是 祖先 节点 。 


图 15-1 中 的 每 个 方 框 是 文档 的 一 个 节点 ， 它 表示 一 个 Node 对 象 。 我 
们 将 在 后 续 几 节 中 讨论 Node 的 属性 和 方法 ， 并 且 可 以 在 第 四 部 分 查找 这 
些 属 性 和 方法 。 注 意 ， 图 15-1 包 含 3 种 不 同类 型 的 节点 。 树 形 的 根部 是 
Document 节 点 ， 它 代表 整个 文档 。 代 表 HTML 元 素 的 节点 是 Element 节 
点 ， 代 表 文 本 的 节点 是 Text 节 点 。Document、Element 和 Text 是 Node 的 
子 类 ， 在 第 四 部 分 中 它们 有 自己 的 条 目 。Document 和 Element 是 两 个 重 
要 的 DOM 类 ， 本 章 大 部 分 内 容 将 阐述 它们 的 属性 和 方法 。 


图 15-2 展 示 了 Node 及 其 在 类 型 层次 结构 中 的 子 类 型 。 注 意 ， 通 用 的 
Document 和 Element 类 型 与 HTMLDocument 和 HTMLElement 类 型 之 间 是 
有 严格 的 区 别 的 。Document 类 型 代表 一 个 HIML 或 XML 文档 ，Element 
类 型 代表 该 文档 中 的 一 个 元 素 。HTMLDocument 和 HTMLElement 子 类 只 
是 针对 于 HIMEL 文 要 和 元 素 。 此 书 中 ， 我 们 经 党 使 用 通用 类 名 Document 
和 Element， 甚 至 在 指 代 HTML 文 档 时 也 不 例外 。 在 第 四 部 分 中 也 是 如 
此 : HTMLDocument 和 HTMLElement 类 型 的 属性 和 方法 记录 于 
Document 和 Element 参 考 页 中 。 
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图 15-2 文档 节点 的 部 分 层次 结构 


值得 注意 的 是 ， 在 图 15-2 中 有 HTMLElement 的 很 多 子 类 型 代表 
HTML 元 素 的 具体 类 型 。 每 个 类 型 定义 多 个 JavaScript 属 性 ， 它 们 对 应 具 
体 的 元 素 或 元 素 组 (参照 15.4.1 节 ) 的 HTML 属 性 。 有 些 具体 元 素 类 也 
定义 额外 的 属性 和 方法 ， 它 们 并 不 是 简单 地 映射 HTML 语 法 。 第 四 部 分 
涵盖 这 些 类 型 及 其 人 额外 的 特性 。 


最 后 ， 请 注意 图 15-2 也 展示 了 到 目前 为 止 还 未 提 及 的 一 些 节 点 类 
型 。Comment 节 点 代表 HTML 或 XML 的 注释 。 由 于 注释 基本 上 是 文本 字 
符 串 ， 因 此 它们 很 像 表 示 文 档 中 显示 文本 的 Text 节 点 。CharacterData 通 
常 是 Text 和 Comment 的 祖先 ， 它 定义 这 两 种 节点 所 共享 的 方法 。Attr 市 
点 类 型 代表 XML 或 HTML 属 性 ， 但 它 几 乎 从 不 使 用 ， 因 为 和 文档 节点 不 
同 ，Element 类 型 定义 了 将 属性 当做 “名 / 值 ” 对 使 用 的 方法 。 
DocumentFragment 类 (未 在 图 15-2 上 显示 ) 在 实际 文档 中 并 不 存在 的 一 
种 节点 : 它 代表 一 系列 没有 常规 父 节 点 的 节点 。 对 一 些 文档 操作 来 说 
DocumentFragment 非 常 有 用 ，15.6.4 节 涵盖 这 部 分 内 容 。DOM 也 定义 了 









































一 些 不 经 常 使 用 的 类 型 ， 如 像 代表 doctype 声 明和 XML 处 理 指令 等 类 


15.2 ”选取 文档 元 素 

大 多 数 客户 端 JavaScript 程 序 运行 时 总 是 在 操作 一 个 或 多 个 文档 元 
素 。 当 这 些 程序 启动 时 ， 可 以 使 用 全 局 变量 document 来 引用 Document 对 
象 。 但 是 ， 为 了 操作 文档 中 的 元 素 ， 必 须 通 过 某 种 方式 获得 或 选取 这 些 
引用 文档 元 素 的 Element 对 象 。DOM 定 义 许多 方式 来 选取 元 素 ， 查 询 文 
档 的 一 个 或 多 个 元 素 有 如 下 方法 : 

.用 指定 的 id 属性 ; 

:用 指定 的 name 属 性 ; 

:用 指定 的 标签 名 字 ; 

:用 指定 的 CSS 类 ，; 

.匹配 指定 的 CSS 选 择 器 。 

随后 几 节 解释 每 一 种 元 素 选 取 技 术 。 
15.2.1 通过 ID 选取 元 素 

任何 HTML 元 系 可 以 有 一 个 id 属性 ， 在 文档 中 该 值 必须 唯一 ， 即 同 
一 个 文档 中 的 两 个 元 素 不 能 有 相同 的 ID。 可 以 用 Document 对 象 的 


getElementById() 方 法 选取 一 个 基于 唯一 ID 的 元 素 。 此 方法 我 们 在 第 13 
章 和 第 14 章 都 已 经 使 用 过 了 : 











var sectioni=document.getElementById("section1"); 


这 是 最 简单 和 常用 的 选取 元 素 的 方法 。 如 果 想 要 操作 某 一 组 指定 的 
文档 元 素 ， 提 供 这 些 元 素 的 id 属性 值 ， 并 使 用 ID 查找 这 些 Element 对 象 。 
如 果 需 要 通过 TD 查找 多 个 元 素 ， 会 发 现 例 15-1 中 的 getElements() 函 数 非 
和 常 有 用 : 





例 15-1: 通过 ID 查找 多 个 元 素 





pA 

* 函 数 接受 任意 多 的 字符 串 参 数 

* 每 个 参数 将 当做 元 素 的 id 传 给 document .getElementById() 
* 返 回 一 个 对 象 ， 它 把 这 些 id 映 射 到 对 应 Element 对 象 

* 如 任何 一 个 id 对 应 的 元 素 未 定义 ， 则 抛 出 一 个 Error 对 象 
































function getElements(/*ids...*/){ 

var elements={}; // 开 始 是 一 个 空 map 陕 射 对 象 

for(var i=0;i<arguments.length;i++){// 循 环 每 个 参数 
var id=arguments[i] ;// 参 数 是 元 素 的 id 

var elt=document .getElementById(id);// 查 找 元 素 
if(elt==nul1)// 如 果 未 定义 

throw new Error("No element with id:"+id);// 折 
elements[id]=elt;//id 和 元 素 之 间 映 射 
} 











河 
于 





return elements;// 对 于 元 素 映射 返回 id 





在 低 于 IE 8 版 本 的 浏览 器 中 ，getElementById0 对 匹配 元 素 的 ID 不 区 
分 大 小 写 ， 而 且 也 返回 匹配 name 属 性 的 元 素 。 


15.2.2 ”通过 名 字 选 取 元 素 


HTML 的 name 属 性 最 初 打算 为 表单 元 素 分 配 名 字 ， 在 表单 数据 提交 
到 服务 器 时 使 用 该 属性 的 值 。 类 似 id 属性 ，name 是 给 元 素 分 配 名 字 ， 但 
是 区 别 于 id，name 属 性 的 值 不 是 必须 唯一 : 多 个 元 素 可 能 有 同样 的 名 
字 ， 在 表单 中 ， 单 选 和 复 选 按钮 通常 是 这 种 情况 。 而 且 ， 和 id 不 一 样 的 
是 name 属 性 只 在 少数 HTML 元 素 中 有 效 ， 包 括 表 单 、 表 单元 素 、< 
iframe 之 和 <img> 之 元 素 。 


基于 name 属 性 的 值 选取 HTML 元素， 可 以 使 用 Document 对 象 的 
getElementsByName() 方 法 。 




















var radiobuttons=document.getElementsByName("favorite color"); 





getElementsByName() 定 义 在 HTMLDocument 类 中 ， 而 不 在 
on 中 ， 所 以 它 只 针对 HIML 文 档 可 用 ， 在 XML 文档 中 不 可 
用 。 它 返回 一 个 NodeList 对 象 ， 后 者 的 行为 类 似 一 个 包含 否 干 Element 对 
象 的 只 读数 组 。 在 正中 ，getElementsByName0 也 返回 id 属性 匹配 指定 值 
的 元 素 。 为 了 兼容 ， 应 该 小 心 齐 慎 ， 不 要 将 同样 的 字符 串 同 时 用 做 名 字 





和 ID。 


在 14.7 节 中 我 们 看 到 ， 为 某 些 HTML 元素 设 置 name 属 性 值 将 自动 为 
Window 对 象 中 创建 对 应 的 属性 ， 对 Document 对 象 也 类 似 。 为 二 form 
>、<img>、<iframe>、<=applet、 二 embed 放 或 二 object 二 元 素 
(其 中 只 有 二 object 二 元 素 没有 后 备 对 象 ) 设置 name 属 性 值 ， 即 在 
Document 对 象 中 创建 以 此 name 属 性 值 为 名 字 的 属性 (当然 ， 假 设 此 文 
档 还 没有 该 名 字 的 属性 ) 。 


如 果 给 定 的 名 字 只 有 一 个 元 素 ， 日 动 创建 的 文档 属性 对 应 的 该 值 是 
元 素 本 身 。 如 果 有 多 个 元 素 ， 该 文档 属性 的 值 是 一 个 NodeList 对 象 ， 它 
表现 为 一 个 包含 这 些 元 素 的 数组 。 如 14.7 节 所 示 ， 为 奇 干 命名 二 iframe 
二 元 素 所 创建 的 文档 属性 比较 特殊 : 它们 指 代 这 些 框 架 的 Window 对 象 
而 不 是 Element 对 象 。 


这 就 意味 着 有 些 元 素 可 以 作为 Document 属 性 仪 通过 名 字 来 选取 : 























// 针 对 二 form name="shipping_address"> 之 元 素 ， 得 到 Element 对 象 
var form=document ,shipping_address ; 








在 14.7 节 介绍 了 为 什么 不 要 用 为 窗口 对 象 自动 创建 的 属性 ， 这 同样 
适用 于 为 文档 对 象 自 动 创建 的 属性 。 如 果 需 要 查找 命名 的 元 素 ， 最 好 显 
式 地 调用 getElementsByName() 来 查找 它们 。 


15.2.3 ”通过 标签 名 选取 元 素 
Document 对 象 的 getElementsByTagName() 方 法 可 用 来 选取 指定 类 型 


(标签 名 ) 的 所 有 HTML 或 XML 元 素 。 例 如 ， 如 下 代码 ， 在 文档 中 获得 
包含 所 有 span 之 元 素 的 只 读 的 类 数组 对 象 : 














var spans=document.getElementsByTagName("span"); 





类 似 于 getElementsByName()，getElementsByTagName() 返 回 一 个 
NodeList 对 象 〈 关 于 NodeList 类 ， 见 本 节 的 补充 信息 ) 。 在 NodeList 中 返 
回 的 元 素 按 照 在 文档 中 的 顺序 排序 的 ， 所 以 可 用 如 下 代码 选取 文档 中 的 
第 一 个 <p> 元 素 : 








var firstpara=document.getElementsByTagName("p")[0]; 





HTML 标 签 是 不 区 分 大 小 写 的 ， 当 在 HTML 文 档 中 使 用 
getElementsByTagName() 时 ， 它 进行 不 区 分 大 小 写 的 标签 名 比较 。 例 
如 ， 上 述 的 变量 span 将 包含 所 有 写成 <SPAN> 的 span 标 签 。 


给 getElementsByTagName() 传 递 通配符 参数 “*” 将 获得 一 个 代表 文档 
中 所 有 元 素 的 NodeList 对 象 。 


Element 类 也 定义 getElementsByTagName() 方 法 ， 其 原理 和 
Document 版 本 的 一 样 ， 但 是 它 只 选取 调用 该 方法 的 元 素 的 后 代 元 素 。 
此 ， 要 查找 文档 中 第 一 个 <p 二 元 素 里 面 的 所 有 二 span 放 元 素 ， 代 人 码 如 











var firstpara=document.getElementsByTagName("p")[0]; 
var firstParaSspans=firstpara.getElementsByTagName("span"); 





由 于 历史 的 原因 ，HTMLDocument 类 定义 一 些 快捷 属性 来 访问 各 种 
各 样 的 节点 。 例 如 ，images、formns 和 1links 等 属性 指 同 行为 类 似 只 读数 组 
的 和 img>、<form 之 和 <a> 〈 但 只 包含 那些 有 href 属 性 的 本 a> 标 签 ) 
元 素 集合 。 这 些 属 性 指 代 HTMLCollection 对 象 ， 它 们 很 像 NodeList 对 
象 ， 但 是 除 此 之 外 它们 可 以 用 元 素 的 ID 或 名 字 来 索引 。 早 些 时 候 ， 我 们 
己 经 看 到 用 如 下 的 表达 式 来 引用 一 个 命名 的 二 form 之 元 素 : 











document ,shipping_address 





用 document.forms 属 性 也 可 以 更 具体 地 引用 命名 (或 有 ID 的 ) 表 
单 ， 如 下 : 





document ,forms ,shipping_address ; 








HTMLDocument 也 定义 embeds 和 plugins 属 性 ， 它 们 是 同义词 ， 都 是 
HTMLCollection 类 型 的 <embed> 元 素 的 集合 。anchors 是 非 标准 属性 ， 
它 指 代 有 一 个 name 属 性 的 二 a 二 元 素 而 并 不 是 一 个 href 属 性 。scripts 在 
HTML5 中 是 标准 属性 ， 它 是 HTMLCollection 类 型 的 二 script 二 元 素 的 集 
合 ， 但 是 在 写本 书 的 时 候 ， 它 还 未 普遍 实现 。 














HTMLDocument 对 象 还 定义 两 个 属性 ， 它 们 指 代 特 丈 的 单个 元 素 而 
不 是 元 素 的 集合 。document.body 是 一 个 HTML 文档 的 <body> 元 素 ， 
document.head 是 二 head> 元 素 。 这 些 属性 总 是 会 定义 : 如 果 文 档 源 代码 
未 显 式 地 包含 二 head> 和 二 body 二 元 素 ， 浏 览 器 将 隐 式 地 创建 它们 。 
Document 类 的 documentElement 属 性 指 代 文档 的 根 元 素 。 在 HTML 文档 
中 ， 它 总 是 指 代 二 html 二 元 素 。 


节点 列表 和 HTML 集 合 


getElementsByName() 和 getElementsByTagName() 都 返回 NodeList 对 
象 ， 而 类 似 document.images 和 document.forms 的 属性 为 HTMLCollection 
对 象 o 


这 些 对 象 都 是 只 读 的 类 数组 对 象 〈 见 7.11 节 ) 。 它 们 有 length 属 
性 ， 也 可 以 像 真 正 的 数组 一 样 索引 《只 是 读 而 不 是 写 ) 。 可 以 对 一 个 
NodeList 或 HTMLCollection 的 内 容 用 如 下 标准 的 循环 进行 迭代 : 

















for(var ii=0;1i<document .images.Llength;i++)V/ 循 环 所 有 的 图 
document ,images[i].style.display="none";//…. 隐 藏 它们 














不 能 直接 在 NodeList 和 和 HTML 集合 上 调用 Array 的 方法 ， 但 可 以 间接 
地 使 用 : 





var content=Array,prototype.map.call(document .getE1LementSByTagName("p")， 
function(e){return e.innerHTML;}); 





HTMLCollection 对 象 也 有 额外 的 命名 属性 ， 也 可 以 通过 数字 和 字符 
串 来 索引 。 


由 于 历史 的 原因 ，NodeList 和 HTMLCollection 对 象 也 都 能 当做 函 
数 : 以 数字 或 字符 串 为 参数 调用 它 就 如 同 使 用 数字 或 字符 串 索 引 它 们 一 
般 。 不 鼓励 使 用 这 种 怪异 的 方式 。 


NodeList 和 HTMLCollection 接 口 都 不 是 为 像 JavaScript 这 样 的 动态 语 
言 设 计 的 。 它 们 都 定义 了 item(0) 方 法 ， 期 望 输入 一 个 整数 ， 并 返回 此 各 
引 处 的 元 素 。 在 JavaScript 中 根本 没有 必要 调用 此 方法 ， 因 为 简单 地 使 用 
数组 索引 就 能 替代 。 类 似 地 ，HTMLCollection 定 义 了 namedItem() 方 法 ， 





的 值 ， 但 在 JavaScript 程 序 中 可 以 用 数组 索引 或 常规 属 
性 来 访问 。 


NodeList 和 HTMLCollection 对 象 不 是 历史 文档 状态 的 一 个 静态 快 
照 ， 而 通常 是 实时 的 ， 并 且 当 文档 变化 时 它们 所 包含 的 元 素 列表 能 随 之 
改变 ， 这 是 其 中 一 个 最 重要 和 令 人 惊讶 的 特性 。 假 设 在 一 个 没有 二 div 
二 元 素 的 文档 中 调用 getElementsByTagName('div)， 此 时 返回 值 是 一 个 
length 为 0 的 NodeList 对 象 。 如 果 再 在 文档 中 插入 一 个 新 的 div 二 元 素 ， 
此 元 素 将 自动 成 为 NodeList 的 一 个 成 员 ， 并 且 它 的 length 属 性 变 成 1。 


通常 ，NodeList 和 HTMLCollection 的 实时 性 非常 有 有 用。 但是， 如 果 
要 在 迭代 一 个 NodeList 对 象 时 在 文档 中 添加 或 删除 的 元 素 ， 首 先 会 需要 
对 NodeList 对 象 生成 一 个 静态 的 副本 : 

















var snapshot=Array.prototype.slice.call(nodelist, 0); 





15.2.4 ”通过 CSS 类 选取 元 素 


HTML 元 素 的 class 属 性 值 是 一 个 以 空格 隔 开 的 列表 ， 可 以 为 空 或 包 
含 多 个 标识 符 。 它 描述 一 种 方法 来 定义 多 组 相关 的 文档 元 素 : 在 它们 的 
class 属 性 中 有 相同 标识 符 的 任何 元 素 属 于 该 组 的 一 部 分 。 在 JavaScript 中 
class 是 保留 字 ， 所 以 客户 端 JavaScript 使 用 className 属 性 来 保存 HITML 
的 class 属 性 值 。class 属 性 通常 与 CSS 样 式 表 一 起 使 用 ， 对 某 组 内 的 所 有 
元 素 应 用 相同 的 样式 ， 在 第 16 间 中 将 再 次 看 到 它 。 尺 管 如 此 ，HTML 定 
义 了 getElementsByClassName() 方 法 ， 它 基于 其 class 属 性 值 中 的 标识 符 
来 选取 成 组 的 文档 元 素 。 


类 似 getElementsByTagName()， 在 HTML 文 档 和 HTML 元 素 上 都 可 
以 调用 getElementsByClassName()， 它 的 返回 值 是 一 个 实时 的 NodeList 对 
象 ， 包 含 文 档 或 元 素 所 有 区 配 的 后 代 闻 点 。getElementsByClassName() 
只 需要 一 个 字符 串 参 数 ， 但 是 该 字符 串 可 以 由 多 个 空格 隔 开 的 标识 符 组 
成 。 只 有 当 元 陛 的 class 属 性 值 包含 所 有 指定 的 标识 符 时 才 匹 配 ， 但 是 标 
识 符 的 顺序 是 无 关 紧 要 的 。 注 意 ，class 属 性 和 
getElementsByClassName() 方 法 的 类 标识 符 之 间 都 是 用 空格 隅 开 的 ， 而 
不 是 逗号 。 如 下 是 使 用 getElementsByClassName() 的 一 些 例子 : 





























// 查 找 其 class 属 性 值 中 包含 "warning" 的 所 有 元 素 






































Var warnings=document .getElementsByClassName("warning");// 查 找 以 "lo0g" 命 名 并 且 
有 "error" 和 "fatal" 类 的 元 素 的 所 有 后 代 

var Log=document ,getEJLementById("1og") ， 

var fatal=log.getElementsByClassName("fatal error"); 




















如 今 的 Web 浏 览 费 依赖 于 文档 开头 处 对 二 !DOCTYPE 二 声明 的 严格 
程度 来 选择 “怪异 模式 ”或 “标准 模式 ”方式 显示 HTML 文 档 。 怪 异 模式 是 
为 了 回 后 兼容 性 而 存在 的 ， 其 中 一 个 怪异 行为 就 是 在 class 属 性 中 和 CSS 
样式 表 中 的 类 标识 符 不 区 分 大 小 写 。getElementsByClassName() 方 法 使 
用 样式 表 的 匹配 算法 。 如 果 文 档 以 怪异 模式 泻 染 ， 访 方法 将 执行 不 区 分 
大 小 写 的 字符 串 比 较 ; 否则 ， 该 比较 区 分 大 小 写 。 


在 写本 书 这 段 时 间 内 ， 除 了 正 8 及 其 较 低 的 版 本 ， 
getElementsByClassName() 在 所 有 当前 的 浏览 器 中 都 实现 了 。IE 8 确实 文 
持 querySelectorAll() 方 法 ， 下 一 节 会 介绍 它 ， 而 
getElementsByClassName() 方 法 是 可 以 在 其 之 上 实现 的 。 


15.2.5 ”通过 CSS 选 择 器 选取 元 素 


CSS 样 式 表 有 一 种 非 第 强大 的 语法 ， 那 就 是 选择 器 ， 它 用 来 插 述 文 
档 中 的 若干 或 多 组 元 素 。CSS 选 择 器 语法 的 全 部 细节 介绍 超出 了 本 书 的 
范围 山 ， 但 是 这 里 有 一 些 例子 来 说 明基 本 的 语法 。 元 素 可 以 用 ID、 标 签 
名 或 类 来 描述 : 








#nav//id="nav" 的 元 素 
div// 所 有 二 div 过 元素 
.Warning// 所 有 在 class 属 性 值 中 包含 了 "warning" 的 元 素 



































更 一 般 地 ， 元 系 可 以 基于 属性 值 来 选取 : 





























p[lang="fr"]// 所 有 使 用 法 语 的 段落 ， 如 : <p lang="fr">> 
*[name="x"]// 所 有 包含 name="x" 属 性 的 元 素 























这 些 基本 的 选择 器 可 以 组 合 使 用 : 














span.fatal.error// 其 class 中 包含 "fatal" 和 "error" 的 所 有 二 span 二 元 素 
span[lang="fr"] .warning// 所 有 使 用 法 语 的 且 其 class 中 包含 "warning" 的 span 二 元 素 









































选择 器 可 以 指定 文档 结构 : 








#10g span//id="10g" 元 素 的 后 代 元 素 中 的 所 有 二 span 二 元 素 
#1Log>Sspan//id="1og" 元 素 的 子 元 素 中 的 所 有 <span 之 元 素 
body>h1:first-child//<body> 的 子 元 素 中 的 第 一 个 <h1> 元 素 


















































选择 器 可 以 组 合 起 来 选取 多 个 或 多 组 元 素 : 





div,#1og// 所 有 雪 div> 元 素 ， 以 及 id="1og" 的 元 素 





如 你 所 见 ，CSS 选 择 器 可 以 使 用 上 述 所 有 方法 选取 元 素 : 通过 ID、 
名 字 、 标 签名 和 类 名 。 与 CSS3 选 择 器 的 标准 化 一 起 的 另 一 个 称 做 “选择 
器 API”* 的 W3C 标 准 定义 了 获取 逻 配 一 个 给 定 选 择 器 的 元 素 的 JavaScript 
方法 四。 该 API 的 关键 是 Document 方 法 querySelectorAl10。 它 接受 包含 一 
个 CSS 选 择 器 的 字符 串 参 数 ， 返 回 一 个 表示 文档 中 匹配 选择 器 的 所 有 元 
素 的 NodeList 对 象 。 与 前 面 描述 的 选取 元 素 的 方法 不 同 ， 
querySelectorAll() 返 回 的 NodeList 对 象 并 不 是 实时 的 : 它 包 含 在 调用 时 
刻 选 择 器 所 匹配 的 元 素 ， 但 它 并 不 更 新 后 续 文 档 的 变化 。 如 采 没 有 匹配 
的 元 素 ，querySelectorAll() 将 返回 一 个 空 的 NodeList 对 象 。 如 果 选 择 器 
字符 串 非 法 ，querySelectorAl10 将 抛 出 一 个 异常 。 





除了 querySelectorAll()， 文 档 对 象 还 定义 了 querySelector() 方 法 。 与 
querySelectorAll() 的 工作 原理 类 似 ， 但 它 只 是 返回 第 一 个 匹配 的 元 素 
《以 文档 顺序 ) 或 者 如 果 没 有 还 配 的 元 素 就 返回 null。 


这 两 个 方法 在 Element 节 点 中 也 有 定义 〈 并 且 也 在 
DocumentFragment 节 点 中 ， 见 15.6.4 节 ) 。 在 元 素 上 调用 时 ， 指 定 的 选 
择 器 仍然 在 整个 文档 中 进行 匹配 ， 然 后 过 滤 出 结果 集 以 便 它 只 包含 指定 
元 素 的 后 代 元 素 。 这 看 起 来 是 违反 常规 的 ， 因 为 它 意 味 着 选择 器 字符 串 
能 包含 元 素 的 祖先 而 不 仅仅 是 上 述 所 匹配 的 元 素 。 


注意 ，CSS 定 义 了 "first-line" 和 ":first-letter" 等 伪 元 素 。 在 CSS$ 中 ， 它 
们 匹配 文本 节点 的 一 部 分 而 不 是 实际 元 素 。 如 果 和 querySelectorA110 或 
querySelector() 一 起 使 用 它们 是 不 匹配 的 。 而 且 ， 很 多 浏览 器 会 拒绝 返 
回 ":link" 和 ":visited" 等 伪 类 的 匹配 结果 ， 因 为 这 会 泄露 用 户 的 浏览 历史 
他 




















所 有 当前 的 浏览 器 都 支持 querySelector0 和 querySelectorAl1(0) 方 法 。 
但 是 注意 ， 这 些 方法 的 规范 并 不 要 求 文 持 CSS3 选 择 器 : 辟 励 浏览 髓 文 
持 和 在 样式 表 中 一 样 的 选择 器 集合 。 当 前 的 浏览 器 除了 正 都 文 持 CSS3 
选择 器 。IE 7 和 8 支持 CSS2 选 择 器 。 期望 IE 9 能 支持 CSS3 选 择 器 。) 


querySelectorAHO 是 终极 的 选取 元 素 的 方法 : 它 是 一 种 非常 强大 的 
技术 ， 通 过 和 它 客 户 端 JavaScript 程 序 能 够 选择 它们 想 要 操作 的 元 素 。 季 运 
的 是 ， 甚 至 在 没有 querySelectorAll0 的 原生 支持 的 浏览 器 中 也 可 以 使 用 
CSS 选 择 器 。jQuery 库 〈 见 第 19 章 ) 使 用 这 种 基于 CSS 选 择 器 的 查询 作 
为 它 的 核心 编程 范式 。 基 于 jQuery 的 Web 应 用 程序 使 用 一 个 轻便 的 、 跨 
浏览 器 的 、 和 querySelectorAll0 等 效 的 方法 ， 命 名 为 $0。 


jQuery 的 CS S 选 择 器 匹配 代码 已 经 作为 一 个 独立 的 标准 库 提出 来 并 
发 布 了 ， 命 名 为 Sizzle。 它 已 经 被 Dojo 和 其 他 一 些 客户 端 库 所 采纳 印 。 
使 用 一 个 类 似 Sizzle 的 库 ( 或 一 个 包含 Sizzle 的 库 ) 的 好 处 就 是 在 老式 浏 
哆 占 中 选取 元 素 也 能 正常 工作 ， 并 保证 一 个 基准 的 选择 器 集合 在 所 有 的 
浏览 右 中 都 能 运行 。 





15.2.6 document.all[l] 


在 DOM 标 准 化 之 前 ，IE 4 引入 了 document.all[] 集 合 来 表示 所 有 文档 
中 的 元 素 〈 除 了 Text 节 点 ) 。document.all[] 已 经 被 标准 的 方法 (如 
getElementById0 和 getElementsByTagName0O) 等 所 取代 ， 现 在 已 经 废弃 
不 应 该 再 使 用 了 。 但 是 ， 在 引入 之 时 它 是 革命 性 的 ， 它 在 以 各 种 方式 使 
用 的 已 有 代码 中 仍然 可 以 看 到 : 

















document .all[0]// 文 档 中 第 一 个 元 素 
document .all["navbar"]//id 或 name 为 "navbar" 的 元 素 (或 多 个 元 素 ) 
document .all.navbar// 同 上 

document .all.tags("div")Vv 文 档 中 所 有 的 过 div> 之 元 素 

document .all.tags("p")[9]/v 文 档 中 第 一 个 <p 之 元 素 


15.3 ”文档 结构 和 遍历 


一 旦 从 文档 中 选取 了 一 个 元 素 ， 有 时 需要 查找 文档 中 与 之 在 结构 上 
相关 的 部 分 (父亲 、 兄 弟 和 子女 ) 。 文 档 从 概念 上 可 以 看 做 是 一 棵 节点 
对 象 树 ， 如 图 15-1 所 示 。 节 点 类 型 定义 了 通 历 该 树 所 需 的 属性 ， 我 们 将 
在 节 15.3.1 中 介绍 。 另 一 个 API 人 允许 文 档 作 为 元 素 对 象 树 来 壳 历 。15.3.2 



































节 介 绍 这 个 新 的 〈 通 种 也 更 容易 使 用 的 ) API。 
15.3.1 ”作为 证 把 树 的 文档 


Document 对 象 、 它 的 Element 对 象 和 文档 中 表示 文本 的 Text 对 象 都 
是 Node 对 象 。Node 定 义 了 以 下 重要 的 属性 : 








parentNode 


该 节点 的 父 节 点 ， 或 者 针对 类 似 Document 对 象 应 该 是 null， 因 为 它 
没有 父 节点 。 


childNodes 


只 读 的 类 数组 对 象 (NodeList 对 象 》， 它 是 该 节点 的 子 节 点 的 实时 
表示 。 


firstChild、lastChild 


该 节点 的 子 节 点 中 的 第 一 个 和 最 后 一 个 ， 如 果 该 节点 没有 子 节 点 则 
为 null。 











nextSibling、 previoursSibling 


该 节 反 的 兄 第 市 点 中 的 前 一 个 和 下 一 个 。 具 有 相同 父 市 点 的 两 个 市 
友 为 兄 第 记 后。 节点 的 顺序 反映 了 它们 在 文档 中 出 现 的 顺序 。 这 两 个 属 
性 将 节点 之 间 以 双向 链表 的 形式 连接 起 来 。 














nodeType 


该 节点 的 类 型 。9 代 表 Document 节 点 ，1 代 表 Element 节 点 ，3 代 表 
Text 节 点 ，8 代 表 Comment 节 点 ，11 代 表 DocumentFragment 节 点 。 


nodeValue 
Text 节 点 或 Comment 节 点 的 文本 内 容 。 


nodeName 





元 素 的 标签 名 ， 以 大 写 形式 表示 。 


使 用 这 些 Node 属 性 ， 可 以 用 以 下 类 似 的 表达 式 得 到 文档 的 第 一 个 子 
节点 下 面 的 第 二 个 子 节 点 的 引用 : 





document .childNodes[0].childNodes[1] 
document .firstChild,.firstChild.nextSibling 





假设 上 述 提 到 的 文档 代码 如 下 : 





<html><head><title>Test</title></head><body~>Hello World!</body><=/html> 





那么 第 一 个 子 节 点 下 面 的 第 二 个 子 市 点 就 是 body 二 元 素 ， 它 的 
nodeType 为 1，nodeName 为 "BODY"。 


但 请 注意 ， 访 API 对 文档 文本 的 变化 及 其 敏感 。 例 如 ， 如 果 修 改 了 
文档 ， 在 <html 之 和 妆 head> 标 签 之 间 插 入 一 个 新 行 ， 那 么 表示 该 新 行 
的 Text 节 点 束 是 文档 的 第 一 个 子 节 点 下 面 的 第 一 个 子 节 点 ， 并 且 天 head 
元 素 束 是 第 二 个 子 节 点 而 不 是 之 body 放 元 素 了 了。 


15.3.2 ”作为 元 素 树 的 文档 


当 将 主要 的 兴趣 点 集中 在 文档 中 的 元 素 上 而 非 它 们 之 间 的 文本 〈 和 
它们 之 间 的 空白 ) 上 时 ， 我 们 可 以 使 用 另外 一 个 更 有 用 的 API。 它 将 文 
档 看 做 是 Element 对 象 树 ， 忽 略 部 分 文档 : Text 和 Comment 节 点 。 


该 API 的 第 一 部 分 是 Element 对 象 的 children 属 性 。 类 似 ChildNodes， 
它 也 是 一 个 NodeList 对 象 ， 但 不 同 的 是 children 列 表 只 4 包含 Element 对 
象 。children 并 非 标准 属性 ， 但 是 它 在 所 有 当前 的 浏览 器 中 都 让 ee 
IE 己 经 实现 有 一 段 很 长 的 时 间 了 ， 其 他 大 多 数 浏览 器 也 已 如 法 炮制 。 
后 采纳 它 的 主流 浏览 器 是 Firefox 3.5。 











注意 ，Text 和 Comment 节 点 没有 children 属 性 ， 它 意味 着 上 述 
Node. 属性 不 可 能 返回 Text 或 Comment 节 点 。 任 何 Element 的 


parentNode 总 是 另 一 个 Element， 或 者 ， 追 溯 到 树 根 的 ee 
DocumentFragment 节 点 。 


基于 元 素 的 文档 裔 历 API 的 第 二 部 分 是 Element 属 性 ， 后 者 类 似 Node 
对 象 的 子 属性 和 兄弟 属性 : 


firstElementChild,lastElementChild 

类 似 firstChild 和 lastChild， 但 只 代表 子 Element。 
nextElementSibling,previousElementSibling 

类 似 nextSibling 和 previousSibling， 但 只 代表 兄弟 Element。 
childElementCount 

子 元 素 的 数量 。 返 回 的 值 和 children.length 值 相等 。 


子 元 素 和 兄弟 元 素 的 属性 是 标准 属性 ， 并 在 除了 IE 儿 之 外 的 浏览 器 
中 都 已 实现 。 


由 于 逐个 元 素 的 文档 过 有 历 的 API 并 未 完全 标准 化 ， 我 们 仍然 可 以 通 
过 像 例 15-2 中 可 移植 的 过 历 函 数 那样 来 实现 这 种 功能 : 


例 15-2: 可 移植 的 文档 过 历 函 数 











A/** 

* 返 回 元 素 e 的 第 n 层 祖先 元 素 ， 如 果 不 存在 此 类 祖先 或 祖先 不 是 Element， 
* 〈 例 如 Document 或 者 DocumentFragment ) 则 返回 nu11 
* 如 果 n 为 9， 则 返回 e 本 身 。 如 果 n 为 1〈 或 省 略 ) ， 则 返回 其 父 元 素 
* 如 果 n 为 2， 则 返回 其 祖父 元 素 ， 依 次 类 推 
















































































function parent(e,n)t{ 

if(n===undefined)n=1; 
while(n--&&e)e=e.parentNode; 
if(!e|lle.nodeType!==1)return null; 

return e; 

}7** 

* 返 回 元 素 e 的 第 n 个 兄弟 元 素 

* 如 果 n 为 正 ， 返 回 后 续 的 第 n 个 兄弟 元 素 

* 如 果 n 为 负 ， 返 回 前 面 的 第 n 个 兄弟 元 素 

* 如 果 n 为 零 ， 返 回 e 本 身 

function Sibling(e,n){ 
while(e&&n!==0){// 如 果 e 未 定义 ， 即 刻 返回 它 
if(n>9){// 查 找 后 续 的 兄弟 元 素 
if(e.nextElementSibling)e=e.nextElementSibling,; 
elsef{ 
for(e=e.nextSibling;e&&e.nodeType!==1;e=e.nextSibling)/* 空 循环 */; 
} 





















































Nn--; 


} 

else{// 查 找 前 面 的 兄弟 元 素 
if(e.previousElementSibing)e=e.previousElementSibling; 

elsef{ 

for(e=e.previousSibling;e& &e.nodeType!==1;e=e.previousSibling)/* 空 循环 */; 


n++， 
} 
} 


return e; 

7 

* 返 回 元 素 e 的 第 n 代 子 元 素 ， 如 果 不 存 在 则 为 hull 

* 负 值 n 代 表 从 后 往 前 计数 。9 表 示 第 一 个 子 元 素 ， 而 -1 代表 最 后 一 个 ，- 2 代表 倒数 第 二 个 ， 依 次 类 推 
2 

function child(e,n)t{ 
if(e,children){t// 如 果 children 数 组 存在 
if(n<=0)n+=e.children.length;// 转 换 负 的 n 为 数组 索引 
if(n<=0)return null;// 如 果 它 仍然 为 负 ， 说 明 没 有 子 元 素 
return e. children[n] // 返 回 指定 的 子 元 素 





































































































} 

// 如 果 e 没 有 children 数 组 ， 找 到 第 一 个 子 元 素 并 向 前 数 ， 或 找到 最 后 一 个 子 元 素 并 往 回 数 
if(n>=0){//n 非 负 :， 从 第 一 个 子 元 素 向 前 数 

// 找 到 元 素 e 的 第 一 个 子 元 素 

if(e.firstElementChild)e=e.firstElementChild; 

elsef{ 

for(e=e.firstcChild;e& &e.nodeType!==1;e=e.nextSibling)/* 空 循环 */; 


























} 
return sibling(e,n);// 返 回 第 一 个 子 元 素 的 第 n 个 兄弟 元 素 


} 

else{//n 为 负 ， 从 最 后 一 个 子 元 素 往 回 数 
if(e.lastElementChild)e=e.lastElementChild; 

elsef{ 

for(e=e.lastchild;e& &e.nodeType!==1;e=e.previousSibling)/* 空 循环 */; 
} 

return sibling(e,n+1);//+1 来 转化 最 后 1 个 子 元 素 为 最 后 1 个 兄弟 元 素 

} 

} 





























自 定义 Element 的 方法 


所 有 当前 的 浏览 器 (包含 8， 除 了 下 7 及 其 更 早 的 版 本 ) 都 实现 
了 DOM， 故 类 似 Element 和 HTMLDocumentbl 等 类 型 都 像 String 和 Array 
一 样 是 类 。 它 们 不 是 构造 函数 (将 在 本 章 后 面 看 到 如 何 创建 新 的 
Element 对 象 ) ， 但 它们 有 原型 对 象 ， 可 以 用 自 定义 方法 扩展 它 





Element.prototype.next=function(){ 

if(this.nextEljementSibling)return this.nextElementSibling;var 
sib=this.nextSibling; 

while(sib& &sib,.nodeType!==1)sib=sib.nextSibling;return Sib， 

}; 





例 15-2 中 的 函数 并 没有 定义 为 Element 的 方法 是 因为 这 种 技术 在 IE 7 


中 不 支持 。 


尽管 如 此 ， 如 果 希 望 将 正 专 有 的 特性 在 除了 IE 之 外 的 其 他 浏览 器 中 
得 以 实现 ， 这 种 扩展 DOM 类 型 的 能 力 是 非常 有 用 的 。 从 上 面 注意 到 ， 
Element 的 非 标 准 children 属 性 由 于 首先 引入 ， 并 已 经 被 其 他 浏览 器 所 采 
类 似 Firefox 3.0 不 支持 它 的 浏览 右 中 可 以 使 用 以 下 代码 模拟 此 属 








// 在 不 包含 此 属性 的 非 TE 浏 览 器 中 模拟 Element .children 属 性 
// 注 意 ， 返 回 值 为 静态 数组 ， 而 不 是 实时 的 NodeList 对 象 
if(!document.documentElement.children){ 
Element.prototype. defineGetter_ ("children",function(){ 
var kids=[]; 

for(var c=this.firstchild;c!=null;c=c.nextSibling) 
if(c.nodeType===1)kids.push(c); 

return kids; 

}); 

} 
































defineGetter ee 绍 ) 完全 是 非 标准 的 ， 但 它 用 
来 移植 类 似 的 代码 非常 


15.4 属性 


HTML 元 素 由 一 个 标签 和 一 组 称 为 属性 〈attribute) 的 名 / 值 对 组 
成 。 例 如 ，==a 二 元 素 定 义 了 一 个 超 链 接 ， 它 的 href 属 性 值 作为 链接 的 目 
的 地 址 。HTML 元 素 的 属性 值 在 代表 这 些 元 素 的 HTMLElement 对 象 的 属 
性 〈property) 中 是 可 用 的 。DOM 还 定义 了 另外 的 API 来 获取 或 设置 
XML 属性 值 和 非 标准 的 HTML 属 性 。 详 细 信 息 见 以 下 各 节 。 


15.4.1 HTML 属 性 作为 Element 的 属性 


表示 HTML 文 档 元 素 的 HTMLElement 对 象 定义 了 读 / 写 属性 ， 它 们 
映射 了 元 素 的 HTML 属 性 。HTMLElement 定 义 了 通用 的 HTTP 属 性 (如 
id、 标 题 lang 和 dir) 的 属性 ， 以 及 事件 处 理 程序 属性 〈 如 onclick) 。 特 
定 的 Element 子 类 型 为 其 元 素 定 义 了 特定 的 属性 。 例 如 ， 查 询 一 张 图 片 
的 URL， 可 以 使 用 表示 <img 二 元 素 的 HTMLElement 对 象 的 src 属 性 : 





var image=document. | myimage" ) ; 
var imgurl=image.src;//src 属 性 是 图 片 的 URL 
image.id==="myimage" // 判 定 要 查找 图 片 的 id 


















































同样 地 ， 可 以 为 一 个 <<form> 之 元素 设置 表单 提交 的 属性 ， 代 码 如 
下 





var f=document .forms[9] ;// 文 档 中 第 一 个 <form>> 
f.action="http://www.example.com/submit.php";// 设 置 提交 至 的 URL 
f.method="POST";//HTTP 请 求 类 型 





























HTML 属 性 名 不 区 分 大 小 写 ， 但 JavaScript 属 性 名 则 大 小 写 敏感 。 从 
HTML 属 性 名 转换 到 JavaScript 属 性 名 应 该 采用 小 写 。 但 是 ， 如 果 属 性 名 
包含 不 止 一 个 单词 ， 则 将 除了 第 一 个 单词 以 外 的 单词 的 首 字 母 大 写 ， 例 
如 : defaultChecked 和 tabIndex。 


有 些 HIML 属 性 名 在 JavaScript 中 是 保留 字 。 对 于 这 些 必 性， 一 般 的 
规则 是 为 属性 名 加 前 级 "html"。 例 如 ，HTML 的 for 属 性 (二 lable> 元 
素 ) 在 JavaScript 中 变 为 htmlFor 属 性 。"class" 在 JavaScript 中 是 保留 字 
(但 还 未 使 用 ) ， 它 是 HTML 非 常 重要 的 class 属 性 ， 是 上 面 规 则 的 一 个 
例外 : 在 JavaScript 代 码 中 它 变 为 className。 我 们 将 在 第 16 章 中 再 次 见 
到 className 属 性 。 


表示 HTML 属 性 的 值 通常 是 字符 串 。 当 属性 为 布尔 值 或 数值 〈 例 
如 ，<input> 元 素 的 defaultChecked 和 maxLength 属 性 ) ， 属 性 也 是 布尔 
值 或 数值 ， 而 不 是 字符 串 。 事 件 处 理 程序 属性 值 总 是 为 Function 对 象 
〈 或 null) 。HIML5 规 范 定义 了 一 个 新 的 属性 《如 过 input 之 和 相关 元 素 
的 form 属 性 ) 用 以 将 元 素 ID 转换 为 实际 的 Element 对 象 。 最 后 ， 任 何 
HTML 元 素 的 style 属 性 值 是 CSSStyleDeclaration 对 象 ， 而 不 是 字符 串 。 
我 们 将 在 第 16 章 中 看 到 关于 这 个 重要 属性 的 更 多 信息 。 


注意 ， 这 个 基于 属性 的 API 用 来 获取 和 设置 属性 值 ， 但 没有 定义 任 
何 从 元 素 中 删除 属性 的 方法 。 和 奇怪 的 是 ，delete 操 作 符 也 无 法 完成 此 目 
的 。 下 一 节 描 述 一 种 可 以 实现 此 目的 的 方法 。 


15.4.2 ”获取 和 设置 非 标 准 HTML 属 性 


如 上 所 述 ，HTMLElement 和 其 子 类 型 定义 了 一 些 属性 ， 它 们 对 应 于 
元 素 的 标准 HTML 属性 。Element 类 型 还 定义 了 getAttribute0 和 
setAttribute() 方 法 来 得 询 和 设置 非 标 准 的 HIML 属 性 ， 也 可 用 来 查询 和 
设置 XML 文档 中 元 素 上 的 属性 。 


























var image=document.images[0]; 
var width=parseInt(image.getAttribute("wIDTH")); 
image.setAttribute("class", "thumbnail"); 





上 述 代码 给 出 了 这 些 方法 和 前 面 的 基于 属性 的 API 之 间 两 个 重要 的 
区 别 。 首 先 ， 属 性 值 都 被 看 做 是 字符 串 。 getAttributeO) 个 退回 数值 、 布 
尔 值 或 对 象 。 其 次 ， 方 法 使 用 标准 属性 名 ， 甚 至 当 这 些 名 称 为 JavaScript 
保留 字 时 也 不 例外 。 对 HTML 元 素来 说 ， 属 性 名 不 区 分 大 小 写 。 


Element 类 型 还 定义 了 两 个 相关 的 方法 ，hasAttribute() 和 
removeAttribute()， 它 们 用 来 检测 命名 属性 是 否 存 在 和 完全 删除 属性 。 
当 属 性 为 布尔 值 时 这 些 方法 特别 有 用 : 有 些 属 性 (如 HTML 的 表单 元 素 
的 disabled 属 性 ) 在 一 个 元 素 中 是 否 存在 是 重点 关键 ， 而 其 值 却 无 关 紧 
0o 

















如 果 操 作 包 含 来 自 其 他 命名 空间 中 属性 的 XML 文 档 ， 可 以 使 用 这 4 
个 方法 的 命名 空间 版 本 : getAttributeNS()、setAttributeNS()、 
hasAttributeNS() 和 removeAttributeNS()。 这 些 方法 需要 两 个 属性 名 字符 
串 作 为 参数 ， 而 不 是 一 个 。 第 一 个 是 标识 命名 空间 的 URI， 第 二 个 通 前 
是 属性 的 本 地 名 字 ， 在 命名 空间 中 是 无 效 的 。 但 特别 地 ， 
setAttributeNS() 的 第 二 个 参数 应 该 是 属性 的 有 效 名 字 ， 它 包含 命名 空间 
lo 可 以 在 本 书 的 第 四 部 分 中 阅读 更 多 关于 命名 空间 识别 的 属性 的 
方 # 


15.4.3 ”数据 集 属性 


有 时 候 在 HTML 元 素 上 绑 定 一 些 额 外 的 信息 也 是 很 有 帮助 的 ， 当 
oa 
况 。 有 时 可 以 通过 给 class 属 性 添加 特殊 的 标识 符 来 完成 。 
更 复杂 的 数据 ， 客 户 端 程序 员 会 借助 使 用 非 标准 的 属性 。 如 上 所 述 ， 可 
以 使 用 getAttribute() 和 setAttribute() 来 读 和 写 非 标 准 属性 的 值 。 但 为 此 而 
付出 的 代价 是 文档 将 不 再 是 合法 有 效 的 HTML。 


HTML5 提 供 了 一 个 解决 方案 。 在 HTML5 文 档 中 ， 任 意 以 "data-" 为 

前 级 的 小 写 的 属性 名 字 都 是 合法 的 。 这 些 “ 数 据 集 属性 ”将 不 会 对 其 元 素 

的 表现 产生 影响 ， 它们 定义 了 一 种 标准 的 、 附 加 额外 数据 的 方法 ， 并 不 
是 在 文档 合法 性 上 做 出 让 步 。 





























HTML5 还 在 Element 对 象 上 定义 了 dataset 属 性 。 该 属性 指 代 一 个 对 
象 ， 它 的 各 个 属性 对 应 于 去 挥 前 级 的 data- 属 性 。 因 此 dataset.x 应 该 保存 
data-x 属 性 的 值 。 市 连 字符 的 属性 对 应 于 驳 峰 命名 法 属性 名 : data- 
jquery-test 属 性 束 变 成 dataset.jqueryTest 属 性 


看 一 个 更 具体 的 例子 ， 假 设 文档 包含 如 下 标记 : 





<span class="sparkline"data-ymin="O"data-ymax="10"> 
111223455435677421 
</span> 





火花 线 (sparkline〉 是 个 小 图 案 一 一 通常 是 一 条 线 一 一 设计 用 来 在 
文本 流 中 显示 。 一 条 火花 线 ， 也 许可 以 同 如 下 代码 提取 上 述 
dataset 属 性 的 值 : 























// 假 设 ES5 的 Array .map() 方 法 (或 类 似 能 工作 的 方法 ) 有 定义 

var sparklines=document.getElementsByClassName("sparkline"); 
for(var i=0;i<sparklines.length;i++){ 

var dataset=sparklines[i].dataset; 

var ymin=parseFloat(dataset .ymin); 

var ymax=parseFloat(dataset .ymax); 

var data=sparklines[i].textContent.split("").map(parseFloat); 
drawSparkline(sparklines[i],ymin,ymax,data);// 该 方法 未 实现 

} 














在 写本 书 的 这 段 时 间 中 ，dataset 属 性 还 没有 在 当前 的 浏览 絮 中 实 
现 ， 上 述 代码 应 该 写成 这 样 : 





var sparklines=document.getElementsByClassName("sparkline"); 
for(var i=0;i<sparklines.length;i++){ 

var elt=sparklines[i]; 

var ymin=parseFloat(elt.getAttribute("data-ymin")); 

var ymin=parseFloat(elt.getAttribute("data-ymax")); 

var points=elt.getAttribute("data-points"); 

var data=elt.textContent.split("").map(parseFloat); 
drawSparkline(elt, ymin,ymax, data);// 该 方法 未 实现 

} 











时 、 双 向 接口 。 设 置 或 删除 dataset 的 一 个 属性 就 等 同 于 设置 或 移 除 对 应 
元 素 的 data- 属 性 


述 例子 中 的 drawSparklineO 函 数 是 虚构 的 ， 但 例 21-13 给 出 了 用 去 


canvas 之 元 素 绘制 类 似 火 花 线 的 标记 代码 。 
15.4.4， 作 为 Attr 节 点 的 属性 


还 有 一 种 使 用 Element 的 属性 的 方法 。Node 类 型 定义 了 attributes 属 
性 。 针 对 非 Element 对 象 的 任何 节点 ， 该 属性 为 null。 对 于 Element 对 
象 ，attributes 属 性 是 只 读 的 类 数组 对 象 ， 它 代 表 元 素 的 所 有 属性 。 
NodeLists，attributes 对 象 也 是 实时 的 。 它 可 以 用 数字 索引 访问 ， 这 意味 
着 可 以 枚 举 元 素 的 所 有 属性 。 并 且 ， 它 也 可 以 用 属性 名 索引 : 











document .body ,attributes[9]//<body> 元 素 的 第 一 个 属性 
document .body.attributes. bgcolor body 全 六 的 pucodir 居 性 
document .body,attributes["ONLOAD"]//<body> 元 素 的 onLload 属 性 























当 索 引 attributes 对 象 时 得 到 的 值 是 Attr 对 象 。Attr 对 象 一 类 特殊 的 
Node， 但 从 来 不 会 像 Node 一 样 去 用 。Attr 的 name 和 value 属 性 返回 该 属 
性 的 名 字 和 值 。 


15.5 “元 素 的 内 容 


再 看 一 下 图 15-1， 并 问 上 自己 一 个 问题 : 二 p 二 元素 的 “内 容 ? 是 什 
么 ? 回答 这 个 问题 也 许 有 3 个 方法 : 


:内 容 是 HTML 字 符 串 "This is a<i>simple</i>document"。 





:内 容 是 纯 文本 字符 串 "This is a simple document"。 


:内 容 是 一 个 Text 节 点 、 一 个 包含 了 一 个 Text 子 节点 的 EBlement 节 点 
和 另外 一 个 Text 节 点 。 


每 一 种 回答 都 有 效 ， 并 且 各 有 干 秋 。 后 面 几 市 解释 如 何 使 用 HTML 
表示 、 纯 文本 表示 和 元 系 内 容 的 树 状 表示 。 


15.5.1 作为 HTML 的 元 素 内 容 
读 取 Element 的 innerHTML 属 性 作为 字符 串 标 记 返 回 那 个 元 素 的 内 


容 。 在 元 素 上 设置 该 属性 调用 了 Web 浏 览 器 的 解析 器 ， 用 新 字符 串 内 容 
的 解析 展现 形式 蔡 换 元 素 当 前 内 容 。〔 不 要 管 它 的 名 字 ， 除 了 在 HTML 





元 素 上 ，innerHTML 也 可 以 在 XML 元 素 上 使 用 。 ) 


Web 浏 览 器 很 擅长 解析 HIML， 通 常设 置 imnerHTML 效 率 非 常 高 ， 
甚至 在 指定 的 值 需 要 解析 时 效率 也 是 相当 不 错 。 但 注意 ， 对 innerHTML 
属性 用 “+=” 操 作 符 重复 妃 加 一 小 段 文本 通常 效率 低下 ， 因 为 它 既 要 序列 
化 又 要 解析 。 


innerHTML 是 在 IE 4 中 引入 的 。 虽 然 所 有 的 浏览 器 都 支持 它 已 经 有 
很 长 一 段 时 间 了 ， 但 随 着 HTML5 的 到 来 它 才 变 得 标准 化 。HTML5 说 
innerHTML 应 该 在 Document 节 点 以 及 Element 节 点 上 工作 正常 ， 但 这 还 
未 被 普 裔 地 支持 。 


HTML5 还 标准 化 了 outerHTML 属 性 。 当 查询 outerHTML 时 ， 返 回 的 
HTML 或 XML 标记 的 字符 串 包 含 被 查询 元 素 的 开头 和 结尾 标签 。 当 设置 
元 素 的 outerHTML 时 ， 元 素 本 身 被 新 的 内 容 所 替换 。 只 有 Element 节 ， 点 
定义 了 outerHTML 属 性 ，Document 节 点 则 无 。 在 写本 书 的 这 段 时 间 里 ， 
outerHTML 在 除了 Firefox 的 所 有 当前 浏览 器 中 都 支持 。( 见 本 间 后 面 的 
例 15-5， 基 于 innerHTML 实 现 outerHTML。) 

















IE 引 入 的 另 一 个 特性 是 insertAdjacentHTML0O 方 法 ， 它 将 在 HTML5 
中 标准 化 ， 它 将 任意 的 HTML 标 记 字 符 串 插入 到 指定 的 元 素 “ 相 邻 ” 的 位 
置 。 标 记 是 该 方法 的 第 二 个 参数 ， 并 且 “ 相 邻 ” 的 精确 含义 依赖 于 第 一 个 
参数 的 值 。 第 一 个 参数 为 具有 以 下 值 之 一 的 字符 
串 : a "afterbegin"、"beforeend" 和 "afterend"。 这 些 值 对 应 
的 插入 乓 如 图 15-3 所 示 。 





|<div id= target >|This is the element content|</div>| 


beforebegin afterbegin beforeend 。 afterend 





图 15-3 insertAdjacentHTMLO 的 插入 点 


insertAdjacentHTML() 在 当前 版 本 的 Firefox 中 不 支持 。 本 章 后 面 的 
内 容 ， 例 15-6 展 示 了 如 何 用 innerHTMEL 属 性 实现 insertAdjacentHTML0， 
也 展示 了 如 何 写 出 不 需要 一 个 字符 串 参 数 来 指定 插入 点 的 HIML 插 入 方 





于 。 
15.5.2 ”作为 纯 文 本 的 元 素 内 容 
有 时 需要 查询 纯 文本 形式 的 元 素 内 容 ， 或 者 在 文档 中 插入 纯 文本 


(不 必 转 义 HTML 标 记 中 使 用 的 尖 插 号 和 & 和 人 符号) 。 标 准 的 方法 是 用 
Node 的 textContent 属 性 来 实现 : 














var para=document .getElementsByTagName("p")[0];// 文 档 中 第 一 个 <p 
var text=para.textcontent;// 文 本 是 "This is a simple document." 
para.textContent="Hello World!";// 修 改 段 落 内 容 








textContent 属 性 在 除了 I 于 的 所 有 当前 的 浏览 器 中 都 支持 。 在 下 中， 
可 以 用 Element 的 innerText 属 性 来 代 奉 。 微 软 在 正 4 中 引入 了 innerText 属 
性 ， 写 在 除了 Firefox 的 所 有 当前 浏览 右 中 都 文 持 。 


textContent 和 innerText 必 性 非 党 相似 ， 通 名 可 以 互相 蔡 换 使 用 。 不 
(在 JavaScript 中 字符 串 "" 是 假 值 ) 和 未 定义 的 属性 之 间 
入 区别 : 








pe 

* 一 个 参数 ， 返 回 元 素 的 textContent 或 innerText 

* 两 个 参数 ， 用 value 人 参数 的 值 设置 元 素 的 textContent 或 innerText 

2 

function textContent(elLement, Value ){ 

var content=element ,textContent ;// 检 测 textContent 是 否 有 定义 
if(value===undefined){// 没 传递 value， 因 此 返回 当前 文本 
if(content!==undefined)return content; 

else return element.innerText,; 







































































} 

else{// 传 递 了 value， 因 此 设置 文本 
if(content!==undefined)element.textContent=value; 
else element.innerText=value; 

} 

} 





























textContent 属 性 就 是 将 指定 元 素 的 所 有 后 代 Text 节 点 简单 地 串联 在 
一 起 。innerText 没 有 一 个 明确 指定 的 行为 ， 但 是 和 textContent 有 一 些 不 
同 。innerText 不 返回 <script> 元 素 的 内 容 。 它 忽略 多 余 的 空白 ， 并 试图 
保留 表格 格式 。 同 时 ，innerText 针 对 基 些 表格 元 素 〈 如 <<table 之 、<< 
tbody> 之 和 <tr> ) 是 只 读 的 属性 。 


<script 之 元 系 中 的 文本 


内 联 的 二 script 二 元 素 〈 也 束 是 那些 没有 src 属 性 的 ) 有 一 个 text 属 性 
用 来 获取 它们 的 文本 。 浏 览 器 不 0 并 且 HTML 
解析 占 忽 略 脚 本 中 的 尖 插 号 和 星 写 。 这 使 得 过 script 二 元 素 成 为 应 用 程 
序 用 来 嵌入 任意 文本 内 容 的 一 个 理想 的 地 方 。 简单 地 将 元 素 的 type 属 性 
设置 为 某 些 值 (如 "text/x-custom-data") ， 就 标明 了 脚本 为 不 可 执行 的 
JavaScript 代 人 码 。 如 果 这 样 做 ， JavaScript 解 释 幽 将 忽 略 该 脚本 ， 但 该 元 
素 将 仍然 存在 于 文档 树 中 ， 它 的 text 属 性 还 将 返回 数据 给 你 。 


15.5.3 ”作为 Text 节 点 的 元 素 内 容 


另 一 种 方法 处 理 元 素 的 内 容 来 是 当做 一 个 子 节 每 个 子 闻 斥 点 
可 能 有 它 自 己 的 一 组 子 节 点 。 当 考虑 元 素 的 内 容 时 ， 通 常 感 兴 趣 的 是 
的 Text 节 点 。 在 XML 文档 中 ， ， 
它 是 Text 的 子 类 型 ， 代 表 了 CDATA 段 的 内 容 。 
例 15-3 展 示 了 一 个 textContentO 函 数 ， 它 递归 地 壳 历 元 素 的 子 节 点 ， 
然后 连接 后 代 节 所 中 所 有 的 Text 节 点 的 文本 。 为 了 理解 代码 ， 回 想 一 下 
nodeValue 属 性 (定义 在 Node 类 型 中 ) ， 它 保存 Text 节 点 的 内 容 。 


例 15-3: 得 找 元 素 的 后 代 中 节点 中 的 所 有 Text 节 点 
































// 返 回 元 素 e 的 纯 文 本 内 容 ， 递 归 进 入 其 子 元 素 
// 该 方法 的 效果 类 似 于 textcontent 属 性 
function textContent(e){ 

var child,type,s="";//s 保 存 所 有 子 节点 的 文本 
for(child=e.firstcChild;child!=null;child=child.nextSibling){ 
type=child.nodeType; 

if(type===3| |type===4)//Text 和 CDATASection 节 点 
s+=child.nodeValue; 

else if(type===1)// 递 归 ELement 节 点 

S+=textContent(child) ; 

















return s; 


} 





nodeValue 属 性 可 以 读 / 写 ， 设 置 它 可 以 改变 Text 或 CDATASection 节 
点 所 显示 的 内 容 。Text 和 CDATASection 都 是 CharacterData 的 子 类 型 ， 可 
以 在 第 四 部 分 查看 相关 信息 。CharacterData 定义 了 data 属 性 ， 它 和 
nodeValue 的 文本 相同 。 以 下 函 数 通 过 设置 data 属 性 将 Text 节 点 的 内 容 转 
换 成 大 写 形 式 : 





// 递 归 地 把 n 的 后 代 子 节点 中 的 所 有 Text 节 点 内 容 转 换 为 大 写 形 式 
function Upcase(n){ 
if(n.nodeType==3||n.nodeTyep==4)// 如 果 n 是 Text 或 CDATA 节 点 
n.data=n.data.toUpperCase();//..…. 转 换 为 大 写 

else// 和 否则 ， 递 归 进 入 其 子 节点 

for(var i=0;i<n.childNodes.1length;i++) 
upcase(n.childNodes[i]); 


} 















































CharacterData 还 定义 了 一 些 在 Text 或 CDATASection 节 点 中 不 太 常 用 
0 、 删 除 、 插 入 和 普 换 文本 。 除 了 修改 已 存在 Text 节 点 的 内 
还 可 以 在 Element 中 插入 全 新 的 Text 节 点 或 用 新 Text 节 点 来 替换 已 有 

点 。 创 建 、 插 入 和 删除 节点 就 是 下 一 节 的 主题 。 


15.6 创建 、 插 入 和 删除 节点 


我 们 已 经 看 到 用 HTML 和 纯 文 本 字符 串 如 何 来 查询 和 修改 文档 内 
容 ， 也 已 经 看 到 我 们 能 够 遍历 Document 来 检查 组 成 Document 的 每 个 
Element 和 Text 节 点 。 在 每 个 节点 级 别 修改 文档 也 是 有 可 能 的 。 
Document 类 型 定义 了 创建 Element 和 Text 对 象 的 方法 ，Node 类 型 定义 了 
在 节点 树 中 插入 、 删 除 和 蔡 换 的 方法 。 例 13-4 展 示 了 节点 的 创建 和 插 
这 里 复制 了 这 个 简短 的 示例 : 














// 从 指定 的 URL， 异 步 加 载 和 执行 脚本 

function loadasync(url)t{ 

var head=document .getElementsByTagName("head")[0];// 查 找 文档 的 <head 二 标签 
var s=document.createElement("script");// 创 建 一 个 script 二 元 素 
s.Ssrc=ur1;// 设 置 它 的 src 属 性 值 

head ,appendCchild(s);// 将 该 <script> 插 入 到 head 中 

} 





























以 下 小 节 包 含 了 市 点 创建 、 插 入 和 删除 的 更 多 细节 和 具体 例子 ， 也 
包含 在 操作 多 个 节点 时 的 一 种 捷径 :使 用 DocumentFragment。 


15.6.1 创建 节点 

如 以 上 代码 所 示 ， 2 的 Element 节 点 可 以 使 用 Document 对 象 的 
createElement() 方 法 。 给 方法 传递 元 素 的 标签 名 : 对 HIML 文 档 来 说 该 
名 字 不 区 分 大 小 写 ， 对 XML 文档 则 区 分 大 小 写 号 3 


Text 节 点 用 类 似 的 方法 创建 : 








var newnode=document ,createTextNode("text node content") ， 





Document 也 定义 了 一 些 其 他 的 工厂 方法 ， 如 不 经 党 使 用 的 
createComment()。 在 15.6.4 节 中 使 用 了 createDocumentFragment() 方 法 。 
在 使 用 了 了 XML 命名 空间 的 文档 中 ， 可 以 使 用 createFElementNS() 来 同时 指 
定 命名 空间 的 URI 和 待 创建 的 Blement 的 标签 名 字 。 


另 一 种 创建 新 文档 节点 的 方法 是 复制 已 存在 的 节点 。 每 个 节点 有 一 
| 0 点 的 一 个 全 新 副本 。 给 方法 传递 参数 true 

能 够 递归 地 复制 所 有 的 后 代 节 点 ， 或 传递 参数 false 只 是 执行 一 个 浅 复 
人 在 除了 下 的 其 他 浏览 器 中 ， Document 对 象 还 定义 了 一 个 类 似 的 方法 
如 果 给 它 传递 男 一 个 文档 的 一 个 节点 ， 它 将 返回 一 个 

合 本 文档 插入 的 节点 的 副本 。 传 递 true 作 为 第 二 个 参数 ， 该 方法 将 递 
eh 


15.6.2 ”插入 市 后 
一 旦 有 了 一 个 新 节点 ， 就 可 以 用 Node 的 方法 appendChild0 或 


insertBefore() 将 它 插 入 到 文档 中 。appendChild0) 是 在 需要 插入 的 Element 
人 它 插 入 指定 的 节点 使 其 成 为 那个 节点 的 最 后 一 个 子 节 











insertBeforeO 就 像 appendChild0 一 样 ， 除 了 它 接 受 两 个 参数 。 第 一 
个 参数 就 是 待 插入 的 节点 ， 第 二 个 参数 是 已 存在 的 节点 ， 新 节点 将 插入 
po 该 方法 应 该 是 在 新 节点 的 父 点 上 调用 ， 方 法 的 第 二 个 
参数 必须 是 该 父 节 点 的 子 节 点 。 如 果 传 递 null 作 为 第 二 个 参数 ， 
i 的 和 行为 类 Daenac ld 它 将 市 点 插入 在 最 后 。 


这 是 一 个 在 数字 索引 的 位 置 插 入 节点 的 简单 函数 。 它 同时 展示 了 
appendChild() 和 insertBefore() 方 法 : 





























// 将 child 节 点 插入 到 parent 中 ， 使 其 成 为 第 n 个 子 节点 

function insertAt(parent,child,n)t{ 
if(n=<=0||n>parent.childNodes.length)throw new Error("invalid index"); 
else if(n==parent.childNodes.1length)parent.appendcChild(child); 

else parent.insertBefore(child,parent.childNodes[n]); 


} 














如 果 调 用 appendChild0 或 insertBefore0O 将 已 存在 文档 中 的 一 个 节点 





再 次 插入 ， 那 个 节点 将 自动 从 它 当 前 的 位 置 删除 并 在 新 的 位 置 重 新 插 
入 : 没有 必要 显 式 删除 该 节点 。 例 15-4 展 示 了 一 个 函数 ， 基 于 表格 指定 
列 中 单元 格 的 值 来 进行 行 排序 。 它 没有 创建 任何 新 的 节点 ， 只 是 用 
appendChild() 来 改变 已 存在 节点 的 顺序 轻 了 。 


例 15-4: 表格 的 行 排序 

















// 根 据 指定 表格 每 行 第 n 个 单元 格 的 值 ， 对 第 一 个 <tbody> 中 的 行进 行 排序 
// 如 果 存 在 comparator 函 数 则 使 用 它 ， 否 则 按 字母 表 顺 序 比 较 

function sortrows(table,n,comparator)t{ 

var tbody=table.tBodies[9];// 第 一 个 <tbody> 之 ， 可 能 是 隐 式 创建 的 
var rows=tbody.getElementsByTagName("tr");//tbody 中 的 所 有 行 
rows=Array.prototype.slice.call(rows,0);// 真 实数 组 中 的 快照 
// 基 于 第 n 个 <td> 元 素 的 值 对 行 排序 
rows ,Sort(function(row1 row2){ 
var cell1=row1.getElementsByTagName("td")[n];// 获 得 第 n 个 单元 格 
var cell2=row2.getElementsByTagName("td")[n];// 两 行 都 是 

var val1l=cell1.textCcontent||cell1.innerText;// 获 得 文本 内 容 
var val2=cell12.textContent| |cell2.innerText;// 两 单元 格 都 是 
if(comparator)return comparator(vall,val2);// 进 行 比 较 
if(vali<=val2)return-1; 

else if(vali>val2)return 1; 

else return 0; 

});// 在 tbody 中 按 它们 的 顺序 把 行 添加 到 最 后 
// 这 将 自动 把 它们 从 当前 位 置 移 走 ， 故 没 必要 预先 删除 它们 

// 如 果 <<tbody> 还 包含 了 除了 <tr> 的 任何 其 他 元 素 ， 这 些 节 点 将 会 悬浮 到 顶部 位 置 
for(var 1I=0;1I<rows. length;i++)tbody,.appendchild(rows[I] )， 













































































0 







































































} 

// 碍 找 表格 的 <th> 元 素 〈 假 设 只 有 一 行 ) ， 让 它们 可 单 击 ， 
// 以 便 单 击 列 标题 ， 按 该 列 对 行 排序 

function makeSortable(table){ 

var headers=table.getElementsByTagName("th"); 
for(var i=0;i<headers.length;i++){ 
(function(n){// 构 套 函 数 来 创建 本 地 作用 域 
headers[i].onclick=function(){sortrows(table,n);}; 
}() ) ; // 将 i 的 值 赋 给 局 部 变量 n 
} 


} 


















































15.6.3 ”删除 和 替换 节点 


removeChild() 方 法 是 从 文档 树 中 删除 一 个 节点 。 但 是 请 小 心 : 该 方 
法 不 是 在 待 删除 的 节点 上 调用 ， 而 是 《就 像 其 名 字 的 一 部 分 "child" 所 暗 
示 的 一 样 ) 在 其 父 节 点 上 调用 。 在 父 节 点 上 调用 该 方法 ， 并 将 需要 删除 
的 子 节点 作为 方法 参数 传递 给 它 。 在 文档 中 删除 n 节 点 ， 代 码 可 以 这 样 
与 : 








n.parentNode.removeChild(n); 





replaceChild0 方 法 删除 一 个 子 节 Ri 一 个 新 的 节点 取而代之 。 在 
父 节 点 上 调用 该 方法 ， 第 一 个 参数 是 新 节点 ， 第 二 个 参数 是 需要 代 丛 的 
节点 。 例 如 ， 用 全 个 文本 字符 串 来 蔡 换 节点 六 代码 可 以 这 样 写 








n.parentNode.replaceChild(document.createTextNode("[REDACTED]"),n); 








以 下 函数 展示 了 replaceChild() 的 另 一 种 用 法 : 























// 用 一 个 新 的 <b 二 元素 替换 n 节 点 ， 并 使 n 成 为 该 元 素 的 子 节点 

function embolden(n){// 假 如 参数 为 字符 串 而 不 是 节点 ， 将 其 当做 元 素 的 id 
if(typeof lestring nadoc unent, getElementById(n); 

var parent=n.parentNode;// 获 得 n 的 父 节 点 

Var b=document.createElement("b"); // 创 | 建 一 个 二 b 二 元 素 

parent ,replacechild(b,n),;// 用 该 <b> 元 素 替 换 节 点 n 
b.appendchild(n);// 使 n 成 为 <b> 元 素 的 子 节点 

} 


















































15.5.1 ” 节 介 绍 过 元 素 的 outerHTML 属 性 ， 也 解释 过 在 当前 版 本 的 
Firefox 中 还 二 已 。 例 15-5 展 示 了 在 Firefox 中 《和 其 ee 
innerHTML 的 浏览 器 ， 要 有 一 个 可 扩展 的 Element.prototype 对 象 ， 

有 一 些 方法 来 定义 属性 的 getter 和 setter) 如 何 来 实现 该 属性 。 
也 展示 了 removeChild0 和 cloneNode0) 方 法 的 实际 用 法 。 











例 15-5: 使 用 innerHTML 实 现 outerHTML 属 性 





// 为 那些 不 支持 它 nn 
// 假 设 浏览 器 确实 支持 innerHTML， 个 可 扩展 的 Element ,prototype， 
// 并 且 可 以 定义 getter 和 setter 
(function(){// 如 果 outerHTML 存 在 ， 则 直接 返 区 
if(document.createElement("div").outerHTML)return;// 返 回 this 所 引用 元 素 的 外 部 HTML 
function outerHTMLGetter(){ 

var container=document.createElement("div");// 虚 拟 元 素 

container .appendChild(this,.,cloneNode(true));// 复 制 到 该 虚拟 节点 

return container.innerHTML;// 返 回 虚拟 节点 的 jnnerHTML 

} 

// 用 指定 的 值 设 置 元 素 的 外 部 HTML 
function outerHTMLSetter(value){// 创 建 一 个 虚拟 元 素 ， 设 置 其 内 容 为 指定 的 值 
var container=document.createElement("div"); 

container .innerHTML=value;// 将 虚拟 元 素 中 的 节点 全 部 移动 到 文档 中 
while(container.firstchild)// 循 环 ， 直 到 container 没 有 子 节点 为 止 
this.parentNode.insertBefore(container .firstCchild,this),;// 删 除 所 被 取代 的 节点 
this,parentNode, removeCchild(this ) ，; 
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} 

// 现 在 使 用 这 两 个 函数 作为 所 有 Element 对 象 的 0uterHTML 属 性 的 getter 和 setter 
// 如 果 它 存在 则 使 用 ES5 的 Object .defineProperty() 方 法 ， 
// 和 否则 ， 退 而 求 其 次 ， 使 用 _defineGetter _() 和 _ defineSetter_() 
if(Object.defineProperty)t{ 







































































Object defineProperty(ELement .prototype, "outerHTML",{ 
get:outerHTMLGetter, 

set:outerHTMLSetter, 
enumerable:false,configurable:true 


}); 
elsef{ 


Element.prototype. defineGetter_ ("outerHTML",outerHTMLGetter ); 
Element.prototype. defineSetter_ ("outerHTML",outerHTMLSetter ); 


} 
}()); 





15.6.4 ”使 用 DocumentFragment 


DocumentFragment 是 一 种 特殊 的 Node， 它 作为 其 他 节点 的 一 个 临时 
的 容器 。 像 这 样 创 建 一 个 DocumentFragment: 





var frag=document ,createDocumentFragment( ) ; 





像 Document 节 点 一 样 ，DocumentFragment 是 独立 的 ， 而 不 是 任何 其 
他 文档 的 ee 。 它 的 parentNode 总 是 为 null。 但 类 似 Element， 它 可 以 
有 任意 多 的 子 节 点 ， 可 以 用 appendChild()、insertBefore() 等 方法 来 操作 
El 


DocumentFragment 的 特殊 之 处 在 于 它 使 得 一 组 节点 被 当做 一 个 节点 
看 待 ， 如果 给 appendChild()、 insertBefore() 或 replaceChild0) 传 递 一 个 
DocumentFragment， 其 实 是 将 该 文档 片段 的 所 有 子 节 点 插入 到 文档 中 ， 
而 非 片 段 本 身 。 《文档 片段 的 子 节点 从 万 段 移动 到 文档 中 ， 文 档 卢 段 清 
空 以 便 重 用 。) 以 下 函数 使 用 DocumentFragment 来 倒序 排列 一 个 节点 的 
子 节 凡 : 








// 倒 序 排列 节点 n 的 子 节点 
function reverse(n){// 创 建 一 个 DocumentFragment 作 为 临时 容器 
var f=document.createDocumentFragment();// 从 后 至 前 循环 子 节 点 ， 将 每 一 个 子 节点 移动 到 文档 片 


//n 的 最 后 一 个 节点 变 成 f 的 第 一 个 节点 ， 反 之 亦 然 

// 注 意 ， 给 f 添 加 一 个 节点 ， 该 节点 自动 地 会 从 n 中 删除 
while(n.lastCchild)f.appendchild(n.lastchild);// 最 后 ， 把 f 的 所 有 子 节点 一 次 性 全 部 移 回 n 中 
n.appendchild(f); 

} 








段 中 















































例 15-6 使 用 innerHTML 属 性 和 DocumentFragment 实 现 
insertAdjacentHTMIL() 方 法 ( 见 15.5.1 节 ) 。 它 还 定义 一 些 名 字 更 符合 


辑 的 HTML 插 入 函数 ， 可 以 替换 让 人 迷惑 的 insertAdjacentHTMLOAPI。 
内 部 工具 函数 fragment(O 可 能 是 代码 中 最 有 用 的 部 分 : 它 返回 一 个 对 指 
定 HTML 字 符 串 文本 进行 解析 后 的 DocumentFragment。 





例 15-6: 使 用 innerHTML 实 现 insertAdjacentHTML() 





// 本 模块 为 不 支持 它 的 浏览 器 定义 了 Element .insertAdjacentHTML 

// 还 定义 了 一 些 可 移植 的 HTML 插 入 函数 ， 它 们 的 名 字 比 ijnsertAdjacentHTML 更 符合 逻辑 : 
//Insert.before()、 Insert.after()、 Insert.atStart() 和 Insert.atEnd() 
var Insert=(function(){// 如 果 元 素 有 原生 的 jnsertAdjacentHTML， 

// 在 4 个 函数 名 更 明了 的 HTML 插 入 函数 中 使 用 它 
if(document.createElement("div").insertAdjacentHTML){ 

returnt 
before:function(e,h)t{e.insertAdjacentHTML("beforebegin",h);}, 
after:function(e,h)t{e.insertAdjacentHTML("afterend",h);}, 
atstart:function(e,h){e.insertAdjacentHTML("afterbegin",h);}, 
atEnd:function(e,h){e.insertAdjacentHTML("beforeend",h);} 

}; 


} 

// 否 则 ， 无 原生 的 ijnsertAdjacentHTML 

// 实 现 同样 的 4 个 插入 函数 ， 并 使 用 它们 来 定义 insertAdjacentHTML 

// 首 先 ， 定 义 一 个 工具 函数 ， 传 入 HTML 字 符 串 ， 返 回 一 个 DocumentFragment， 
// 它 包含 了 解析 后 的 HTML 的 表示 

function fragment(html)t{ 

var elt=document .createElement("div");// 创 建 空 元 素 

var frag=document ,createDocumentFragment();// 创 建 空 文档 片段 
elt.innerHTML=htm1;// 设 置 元 素 内 容 
while(elt.firstchild)// 移 动 所 有 的 节点 
frag.appendCchild(elt,.firstChild);// 从 elt 到 frag 

return frag;// 然 后 返回 frag 

} 

var Insert={ 

before:function(elt,html1){ 
elt.parentNode.insertBefore(fragment(html),elt); 

外 

after:function(elt,html){ 
elt.parentNode.insertBefore(fragment(html),elt.nextSibling); 
外 

atSstart:function(elt,html1){ 
elt.insertBefore(fragment(html),elt.firstchild); 

外 
atEnd:function(elt,html){elt.appendCchild(fragment (html));} 
};// 基 于 以 上 函数 实现 insertAdjacentHTML 

Element .prototype.insertAdjacentHTML=function(pos,html){ 
switch(pos.toLowerCase()){ 

case"beforebegin":return Insert.before(this,html); 
case"afterend":return Insert.after(this,htm]l); 
case"afterbegin":return Insert.atStart(this,html); 
case"beforeend":return Insert.atEnd(this,html); 

} 

}; 

return Insert;// 最 后 返回 4 个 插入 函数 

}()); 


























































































































































































































15.7 例子 : 生成 目录 表 


例 15-7 说 明了 如 何 为 文档 动态 地 创建 一 个 目录 表 。 它 展示 了 上 一 市 
所 描述 的 文档 脚本 化 的 很 多 概念 :元素 选取 、 文 档 授 历 、 元 素 属性 设 
置 、innerHTML 属 性 设置 和 在 文档 中 创建 与 插入 新 节点 等 。 本 例 注释 详 
尽 ， 理 解 代 人 码 应 该 不 会 有 问题 。 


例 15-7: 一 个 自动 生成 的 目录 表 








光 光 尖 
* 这 个 模块 注册 一 个 可 在 页 面 加 载 完 成 后 自动 运行 的 匿名 函数 。 当 执行 这 个 函数 时 会 去 文档 中 查找 
*id 为 "TOC" 的 元 素 。 如 果 这 个 元 素 不 存在 ， 就 创建 一 个 元 素 


* 生 成 的 TOC 目 录 应 当 具 有 自己 的 CSS 样 式 。 整 个 目录 区 域 的 样式 className 设 置 为 "TOCEntry" 
* 同 样 我 们 为 不 同 层级 的 目录 标题 定义 不 同 的 样式 。 二 hi 二 标签 生成 的 标题 
*className 为 "TOCLevel1"，<=h2 标 签 生成 的 标题 className 为 "TOCLevel2"， 以 此 类 推 
* 段 编号 的 样式 为 "TOCSectNum" 

* 


* 完 整 的 CSS 样 式 代码 如 下 : 
















































































































































































*#TOC{border:solid black 1ipx;margin:10px;padding:10px;} 


*,TOCEntry{font-family:sans-serif;} 
*,TOCEntry a{text-decoration:none;} 
*.TOCLeveli{font-size:16pt;font-weight:bold;} 
*.,TOCLevel2{font-size:1i2pt;margin-left: .5in;} 
*.TOCSectNum:after{content:":";} 

* 




















* 这 段 代码 的 最 后 一 行 表示 每 个 段 编号 之 后 都 有 一 个 冒号 和 空格 符 。 要 想 隐 藏 段 编 号 ， 
* 请 使 用 这 行 代码 : 
*.TOCSectNum{display:none} 


大 

































































* 这 个 模块 需要 onLoad( ) 工 具 函 数 

7 

onLoad(function( ){// 匿 名 函数 定义 了 一 个 局 部 作用 域 
// 查 找 TOC 容 器 元 素 














// 如 果 不 存在 ， 则 在 文档 开头 处 创建 一 个 

var toc=document.getElementById("TOC"); 

if(!toc)t{ 

toc=document .createElement("div"); 

toc.id="TOC"; 

document .body.insertBefore(toc,document.body.firstcChild); 





} 

// 查 找 所 有 的 标题 元 素 

var headings ; 

if(document .querySelectorAll)// 我 们 是 否 能 用 这 个 简单 的 方法 ? 
headings=document ,querySelectorAl1("h1,h2,h3,h4,h5,h6")， 
else// 和 否则 ， 碍 找 方法 稍微 麻烦 一 些 
headings=findHeadings(document .body,[]);// 递 归 遍 历 document 的 body， 查 找 标题 元 素 
function findHeadings(root,sects)t{ 

for(var c=root.firstChild;c!=null;c=c.nextSibling)t{ 
if(c.nodeType!==1)continue; 

if(c.tagName.1length==2& &c.tagName.charAt(0)=="H") 
sects.push(c); 






































else 
findHeadings(c, sects); 


return sects; 


} 

// 初 始 化 一 个 数组 来 保持 跟踪 章节 号 

var sectionNumbers=[0,0,0,0,09,0];// 现 在 ,循环 已 找到 的 标题 元 素 

for(var h=0;h<headings,length;h++)f 

var heading=headings[h];// 跳 过 在 TOC 容 器 中 的 标题 元 素 
if(heading.parentNode==toc)continue;// 判 定 标题 的 级 别 

var level=parseInt(heading.tagName.charAt(1)); 
if(isNaN(level)||level<1||level>>6)continue;// 对 于 该 标题 级 别 增加 sectionNumbers 对 应 的 

















// 重 置 所 有 标题 比 它 级 别 低 的 数字 为 零 

sectionNumbers[level-1]++; 

for(var i=level;i<6;i++)sectionNumbers[i]=0;// 现 在 ,将 所 有 标题 级 别 的 章节 号 组 合 产 生 一 个 
章节 号 ， 如 2.3.1 

var sectionNumber=sectionNumbers.slice(0,level).join(".")// 为 标题 级 别 增加 章节 号 

// 把 数字 放 在 <span 二 中 ， 使 得 其 可 以 用 样式 修饰 

var span=document,.createElement("span"); 

span.className="TOCSectNum",; 

span.innerHTML=sectionNumber; 

heading.insertBefore(span,heading.firstchild);// 用 命名 的 错 点 将 标题 包 起 来 ， 以 便 为 它 增 加 

























































































链接 
var anchor=document .createElement("a"); 
anchor .name="TOC"+sectionNumber; 
heading.parentNode.insertBefore(anchor,heading); 
anchor .appendChild(heading);// 现 在 为 该 节 创 建 一 个 链接 
var link=document,.createElement("a"); 
link.href="#TOC"+sectionNumber;// 链 接 的 目标 地 址 
link.innerHTML=heading.innerHTML;// 链 接 文本 与 实际 标题 一 致 
// 将 链接 放 在 一 个 div 中 ，div 用 基于 级 别名 字 的 样式 修饰 
var entry=document.createElement("div"); 
entry.className="TOCENntry TOCLevel"+level; 
entry.appendCchild(1link);// 该 div 添 加 到 TOC 容 器 中 
toc.appendchild(entry); 
} 












































}); 


15.8 文档 和 元 素 的 几何 形状 和 滚动 


在 本 章 中 ， 到 目前 为 止 我 们 考虑 的 文档 被 看 做 是 元 素 和 文本 节点 的 
抽象 树 。 但 是 当 浏 览 器 在 窗口 中 演 染 文档 时 ， 它 创建 文档 的 一 个 视觉 
现 层 ， 在 那里 每 个 元 素 有 自己 的 位 置 和 尺寸 。 通 常 ，Web 应 用 程序 可 以 
将 文档 看 做 是 元 素 的 树 ， 并 且 不 用 关心 在 屏幕 上 这 些 元 素 是 如 何 演 染 
的 。 但 有 时 ， 判 定 一 个 元 素 精确 的 几 个 形状 也 是 非常 有 必要 的 。 例 如 ， 
将 在 第 16 章 中 看 到 利用 CSS 为 元 素 指定 位 置 。 如 果 想 用 CSS 动 态 定位 一 
个 元 素 〈 如 工具 提示 或 插图 ) 到 某 个 已 经 由 浏览 器 定位 后 的 普通 元 素 的 
劳 边 ， 首 先 需要 判定 那个 元 素 的 当前 位 置 。 


本 节 阐 述 了 在 浏览 器 窗口 中 完成 文档 的 布局 以 后 ， 上 怎样 才能 在 抽象 




















的 基于 树 的 文档 模型 与 几何 形状 的 基于 坐标 的 视图 之 间 来 回 变 换 。 本 节 
描述 的 属性 和 方法 已 经 在 浏览 器 中 实现 了 有 相当 长 的 一 段 时 间 了 《虽然 
有 些 是 IE 特 有 的 ， 有 些 直 到 IE 9 才 实现 ) 。 在 写本 书 的 这 段 时 间 里 ， 它 
们 通过 了 W3C 的 标准 化 流程 ， 作 为 CSSOM-View 模 块 (参见 
http://www.w3.0org/TR/cssom-view/) 。 


15.8.1 ”文档 坐标 和 视 口 坐标 


元 素 的 位 置 是 以 像素 来 上 度量 的 ， 同 右 代表 XX 坐标 的 增加 ， 同 下 代表 
Y 坐 标的 增加 。 但 是 ， 有 两 个 不 同 的 点 作为 坐标 系 的 原点 : 元 素 的 X 和 Y 
坐标 可 以 相对 于 文档 的 左上 角 或 者 相对 于 在 其 中 显示 文档 的 视 口 的 左上 
角 。 在 顶级 窗口 和 标签 页 中 , “ 视 口 ”只 是 实际 显示 文档 内 容 的 浏览 器 的 
一 部 分 : 它 不 包括 浏览 器 “外 壳 ”(〈 如 菜单 、 工 具 条 和 标签 页 ) 。 针 对 框 
架 页 中 显示 的 文 要 ， 视 口 是 定 义 了 框架 页 的 二 iframe> 之 元素 。 无 论 在 何 
种 情况 下 ， 当 讨论 元 素 的 位 置 时 ， 必 须 弄 清楚 所 使 用 的 坐标 是 文档 坐标 
还 是 视 口 坐标 。 “注意 ， 视 口 坐标 有 时 也 叫做 窗口 坐标 。 ) 


如 果 文 档 比 视 口 要 小 ， 或 者 说 它 还 未 出 现 滚动 ， 则 文档 的 左上 角 就 
是 视 口 的 左上 角 ， 文 档 和 视 口 坐标 系统 是 同一 个 。 但 是 ， 一 般 来 说 ， 要 
在 两 种 坐标 系 之 间 互 相 转 换 ， 必 须 加 上 或 减 去 深 动 的 偏 移 量 (scrol 1 
offset) 。 例 如 ， 在 文档 坐标 中 如 果 一 个 元 系 的 Y 坐 标 是 200 像 素 ， 并 且 
用 户 已 经 把 浏览 器 问 下 深 动 75 像 素 ， 那 么 视 口 坐标 中 元 素 的 Y 坐 标 是 
125 像 素 。 同 样 ， 在 视 口 坐标 中 如 果 一 个 元 素 的 X 坐 标 是 400 像 素 ， 并 且 
己 经 水 平 深 动 了 视 口 200 像 素 ， 那 么 文档 坐标 中 元 素 的 X 坐 标 是 600 


文档 坐标 比 视 口 坐标 更 加 基础 ， 并 且 在 用 户 滚动 时 它们 不 会 发 生变 
化 。 不 过 ， 在 客户 病 编 程 中 使 用 视 口 坐标 是 非常 常见 的 。 当 使 用 CSS 指 
定 元 素 的 位 置 时 运用 了 文档 坐标 〈 见 第 16 章 ) 。 但 是 ， 最 简单 的 查询 元 
素 位 置 的 方法 《〈 见 15.8.2 节 ) 返回 视 口 坐标 中 的 位 置 。 类 似 地 ， 当 为 鼠 
et ， 报 告 的 鼠标 指针 的 坐标 是 在 视 口 坐标 


为 了 在 坐标 系 之 间 互 相 转 换 ， 我 们 需要 判定 浏览 器 窗口 的 深 动 条 的 
位 置 。Window 对 象 的 pageXOffset 和 pageYOffset 属 性 在 所 有 的 浏览 器 中 
提供 这 些 值 ， 除 了 于 ”8 及 更 早 的 版 本 以 外 。IE〔 和 所 有 现代 浏览 器 也 
可 以 通过 scrollLeft 和 scrollTop 属 性 来 获得 滚动 条 的 位 置 。 令 人 迷惑 的 
是 ， 正 常情 况 下 通过 查询 文档 的 根 节 点 (document.documentElement) 





















































来 获取 这 些 属性 值 ， 但 在 怪异 模式 下 《〈 见 13.4.4 节 ) ， 必 须 在 文档 的 < 
body> 之 元 素 〈document.body) 上 查询 它们 。 例 15-8 显 示 了 如 何 简便 地 碍 
询 深 动 条 的 位 置 。 


例 15-8: 查询 窗口 深 动 条 的 位 置 























// 以 一 个 对 象 的 x 和 y 属 性 的 方式 返回 深 动 条 的 偏 移 量 
function getScroll0ffsets(w){// 使 用 指定 的 窗口 ， 如 果 不 带 参数 则 使 当前 窗口 
w=w| |window;// 除 了 IE 8 及 更 早 的 版 本 以 外 ， 其 他 浏览 器 都 能 
if(w.pageXoffset!=null)return{x:w. pageXxOffset,y:w,pageYOffset] ;7/ 对 标准 模式 下 的 
IE 《或 任何 浏览 器 ) 
var d=w.document 
if(document ,compatMode=="CSS1Compat'" ) 
return{x:d.documentElement.scrollLeft,y:d.documentElement .scrollTop};// 对 怪异 模式 下 
的 浏览 器 
return{x:d.body.scrollLeft,y:d.body.scrollTop}; 
} 












































































































































为 了 确定 文档 
ee 查询 视 口 尽 二 的 简单 方法 在 
IE 8 及 更 早 的 版 本 中 无 法 工作 ， 而 且 该 技术 在 正中 的 运行 方式 还 要 取决 
于 浏览 器 是 处 于 怪异 模式 还 是 标准 模式 。 例 15-9 介 绍 了 如 何 简便 地 查询 
视 口 尺寸 。 注 意 ， 它 和 例 15-8 的 代码 是 如 此 相似 。 


例 15-9: 查询 窗口 的 视 口 尺寸 











// 作 为 一 个 对 象 的 wy 和 h 属 性 返回 视 口 的 尺寸 

function getViewportSize(w){// 使 用 指定 的 窗口 ， 如 果 不 带 参数 则 使 用 当前 窗口 

w=w| |window;// 除 了 IE 8 及 更 早 的 版 本 以 外 ， 其 他 浏览 器 都 能 用 

if(w.innerwidth!=null)return{w:w.innerwidth,h:w.innerHeight};// 对 标准 模式 下 的 IE (或 
任何 浏览 器 ) 

var d=w.document 

if(document.compatMode=="CSSiCompat") 

return{w:d.documentElement.clientWwidth, 

h:d.documentElement .clientHeight};// 对 怪异 模式 下 的 浏览 器 

return{w:d.body.clientwidth,h:d.body.clientwidth}; 

} 

















































































































上 述 两 个 例子 已 经 用 到 了 scrollLeft、 J 、clientWidth 和 
clientHeight 属 性 。 我 们 将 在 15.8.5 节 中 再 次 遇 到 这 些 属性 。 


15.8.2 ”查询 元 妹 的 儿 何 尺寸 
判定 一 个 元 素 的 尺寸 和 位 置 最 简单 的 方法 是 调用 它 的 








getBoundingClientRect(0) 方 法 。 访 方法 是 在 正 5 中 引入 的 ， 而 现在 当前 的 
所 有 浏览 器 都 实现 了 。 它 不 需要 参数 ， 返 回 一 个 有 jleft、right、top 和 
bottom 属 性 的 对 象 。left 和 top 属 性 表示 元 素 的 左上 角 的 X 和 Y 坐 标 ，right 
和 bottom 属 性 表示 元 素 的 右 下 角 的 X 和 Y 坐 标 。 


这 个 方法 返回 元 条 在 视 口 坐标 中 的 位 置 。 (getBoundingClientRect() 
方法 名 中 的 "Client" 是 一 种 间接 指 代 ， 它 就 是 Web 浏 览 器 客户 端 一 一 专 指 
它 定 义 的 窗口 或 视 口 。) 为 ee 览 器 窗口 以 后 仍然 
有 效 的 文档 坐标 ， 需 要 加 上 滚动 的 偏 移 





























var box=e.getBoundingCclientRect(); 人 坐标 中 的 位 置 
var offsets=getScroll0ffsets();// 上 面 定义 的 工具 函数 

var x=box.left+offsets.x; 2 

Var y=box.top+offsets.y; 
































在 很 多 浏览 器 (和 W3C 标 准 ) 中 ，getBoundingClientRectO 返 回 的 
对 象 还 包含 width 和 height 属 性 ， 但 是 在 原始 的 正中 未 实现 。 为 了 简便 起 
见 ， 可 以 这 样 计算 元 素 的 width 和 height: 





var box=e.getBoundingClientRect(); 
var w=box.width||(box.right-box.1eft); 
var h=box.height||(box.bottom-box.top); 








在 第 1 ”6 章 中 将 学 到 元 素 内 容 被 一 块 可 选 的 空白 区 域 所 包围 ， 叫 做 
内 边 距 。 内 边 距 被 边 框 所 包围 ， 边 框 被 外 边 距 所 包围 。 内 边 距 、 边 框 和 
外 边 距 都 是 可 选 的 。getBoundingClientRectO 所 返回 的 坐标 包含 元 素 的 边 
框 和 内 边 距 ， 但 不 包含 元 素 的 外 边 距 。 


如 果 getBoundingClientRect() 方 法 名 中 的 "Client" 指 定 了 返回 的 矩形 
的 坐标 系 ， 那 么 方法 名 中 的 "Bounding' 作风 重生 浏览 占 在 布局 时 块 
状元 闵 〈 如 图 片 、 段 落 和 <div> 元 素 等 ) 总 是 为 矩形 。 但 是 ， 内 联 元 
素 〈 如 雪 span>、<code 之 和 <b> 等 ) 可 能 跨 了 多 行 ， 因 此 可 能 由 多 
个 矩形 组 成 。 想 象 一 下 ， 例 如 ， 一 些 被 断 成 两 行 的 斜体 文本 (用 <i>> 
和 过 i 标签 标记 的 ) 。 它 的 形状 是 由 第 一 行 的 右边 部 分 和 第 二 行 的 左 
边 部 分 两 个 矩形 组 成 的 (假设 文本 顺序 是 从 左 同 右 )〉 。 如 果 在 内 联 元 素 
上 调用 getBoundingClientRect()， 它 返回 “边界 矩形 ”。 对 于 如 上 揪 述 的 < 
i 二 > 元素， 边界 矩形 会 包含 整整 两 行 的 宽度 。 














如 果 想 查询 内 联 元 素 每 个 独立 的 和 矩形， 调用 getClientRects() 方 法 来 
获得 一 个 只 读 的 类 数组 对 象 ， 它 的 每 个 元 素 类 似 于 
getBoundingClientRect() 返 回 的 矩形 对 象 。 


我 们 已 经 见 过 如 getElementsByTagName() 这 样 的 DOM 方 法 返回 的 结 
果 是 “实时 的 "， 当 文档 变化 时 这 些 结果 能 自动 更 新 。 但 
getBoundingClientRect() 和 getClientRects() 所 返回 的 矩形 对 象 〈《 和 和 矩形 对 
象 列表 ) 并 不 是 实时 的 。 它 们 只 是 调用 方法 时 文档 视觉 状态 的 静态 快 
照 ， 在 用 户 深 动 或 改变 浏览 器 窗口 大 小 时 不 会 更 新 它们 。 


15.8.3 ”判定 元 素 在 某 点 


getBoundingClientRect() 方 法 使 我 们 能 在 视 口 中 判定 元 素 的 位 置 。 但 
有 时 我 们 想 反 过 来 ， 判 定 在 视 口 中 的 指定 位 置 上 有 什么 元 素 。 这 可 以 用 
Document 对 象 的 elementFromPoint() 方 法 来 判定 。 传 递 X 和 Y 坐标 “使 用 
视 口 坐标 而 非 文 档 坐 标 〉， 该 方法 返回 在 指定 位 置 的 一 个 元 素 。 在 写本 
书 的 这 段 时 间 里 ， 选 取 元 素 的 算法 还 未 详细 指定 ， 但 是 该 方法 的 意图 就 
是 它 返 回 在 那个 点 的 最 里 面 的 和 最 上 面 的 〈《 见 16.2.1 节 中 CSS 的 z-index 
属性 ) 元 素 。 如 果 指 定 的 点 在 视 口 以 外 ，elementFromPointO 返 回 null， 
即使 该 点 在 转换 为 文档 坐标 后 是 完美 有 效 的 ， 返 回 值 也 一 样 。 


elementFromPoint() 方 法 看 上 去 很 有 和 用， 典型 的 案例 是 将 鼠标 指针 的 
坐标 传递 给 它 来 判定 鼠标 在 哪个 元 素 上 。 但 是 ， 我 们 将 在 第 17 章 学 到 ， 
鼠标 事件 对 象 已 经 在 target 属 性 中 包含 了 这 些 信息 。 因 此 ， 实 际 上 
elementFromPoint(O) 不 经 常 使 用 。 




















15.8.4 滚动 


例 15-8 展 示 了 如 何在 浏览 器 窗口 中 查询 深 动 条 的 位 置 。 该 例子 中 的 
scrollLeft 和 scrollTop 属 性 可 以 用 来 设置 让 浏览 器 滚动 ， 但 有 一 种 更 简单 
的 方法 从 JavaScript 最 早 的 时 期 开始 就 文 持 的 。Window 对 象 的 scrollTop() 
方法 (和 其 同义词 scroll0〉 接受 一 个 点 的 X 和 Y 坐 标 《〈 文 档 坐 标 ) ， 并 
作为 深 动 条 的 偏 移 量 设置 它们 。 也 就 是 ， 窗 口 深 动 到 指定 的 点 出 现在 视 
口 的 左上 角 。 如 果 指 定 的 点 太 接 近 于 文档 的 下 边缘 或 右边 绿 ， 浏 览 器 将 
尽量 保证 它 和 视 口 的 左上 角 之 间 最 近 ， 但 是 无 法 达到 一 致 。 以 下 代码 滚 
动 浏览 器 到 文档 最 下 面 的 页 面 可 见 : 


























// 获 得 文档 和 视 口 的 高 度 ，offsetHeight 会 在 下 面 解释 

var documentHeight=document.documentElement .offsetHeight,; 

var viewportHeight=window.innerHeight;// 或 使 用 上 面 的 getViewportSize() 
// 然 后 ， 滚 动 让 最 后 一 页 在 视 口中 可 见 
window.scrollTo(0,documentHeight-viewportHeight); 



























































Window 的 scrollBy() 方 法 和 scrollO 和 scrollTo() 类 似 ， 但 是 它 的 参数 
是 相对 的 ， 并 在 当前 深 动 条 的 偏 移 量 上 增加 。 例 如 ， 快 速 阅 读者 可 能 会 
喜欢 这 样 的 书签 〈 见 13.2.5 节 ) : 
































// 每 2009 毫 秒 向 下 滚动 10 像 素 。 注 意 ， 它 无 法 关闭 
javascript:void setIinterval(function(){scrollBy(0,10)},200); 





通常 ， 除 了 滚动 到 文档 中 用 数字 表示 的 位 置 ， 我 们 只 是 想 它 深 动 使 
得 文档 中 的 某 个 元 素 可 见 。 可 以 利用 getBoundingClientRectO 计 算 元 素 的 
位 置 ， 并 转换 为 文档 坐标 ， 然 后 用 scrollTo0) 方 法 达到 目的 。 但 是 在 需要 
显示 的 HTML 元 素 上 调用 scrollIntoView() 方 法 更 加 方便 。 该 方法 保证 了 
元 素 能 在 视 口 中 可 见 。 默 认 情 况 下 ， 它 试图 将 元 素 的 上 边缘 放 在 或 尽量 
接近 视 口 的 上 边缘 。 如 果 只 传递 false 作 为 参数 ， 它 将 试图 将 元 素 的 下 边 
缘 放 在 或 尽量 接近 视 口 的 下 边缘 。 只 要 有 助 于 元 素 在 视 口 内 可 见 ， 浏 览 

会 水 平 滚 动 视 口 。 


scrollIntoView0 的 行为 与 设置 window.location.hash 为 一 个 命名 锚 点 
(二 a name="" 之 元 素 ) 的 名 字 后 浏览 器 产生 的 行为 类 似 。 


15.8.5 ”关于 元 素 尺 寸 、 位 置 和 溢出 的 更 多 信息 


getBoundingClientRect() 方 法 在 所 有 当前 的 浏览 器 上 都 有 定义 ， 但 如 
果 需 要 文 持 老式 浏览 器 ， 不 能 依靠 此 方法 而 必须 使 用 更 老 的 技术 来 判定 
元 素 的 尺寸 和 人 位置。 元素 的 尺寸 比较 简单 : 任何 HTML 元 素 的 只 读 属 性 
offsetWidth 和 offsetHeight 以 CSS 像 素 返 回 它 的 屏幕 尺寸 。 返 回 的 尺寸 包 
含 元 素 的 边框 和 内 边 距 ， 除 去 了 外 边 距 


所 有 HTML 元 素 拥 有 offsetLeft 和 offsetTop 属 性 来 返回 元 素 的 X 和 Y 坐 
标 。 对 于 很 多 元 素 ， 这 些 值 是 文档 坐标 ， 并 直接 指定 元 素 的 位 置 。 但 对 
于 已 定位 元 素 的 后 代 元 素 和 一 些 其 他 元 素 〈 如 表格 单元 ) ， 这 些 属性 返 
回 的 坐标 是 相对 于 祖先 元 素 的 而 非 文档 。 offogrParent 居 性 指 定 这 些 属性 
J 元 素 。 如 果 offsetParent 为 null， 这 些 属 性 都 是 文档 坐标 ， 因 

， 一 般 来 说 ， 用 offsetLeft 和 offsetTop 来 计算 元 素 e 的 位 置 需要 一 个 二 









































function getElementPosition(e){ 
Var x=0,y=0; 

while(e!=null){ 

x+=e .offsetLeft,; 
y+=e.offsetTop; 
e=e.offsetPparent,; 


return{x:x,y:y}; 





通过 循环 offsetParent 对 象 链 来 累加 偏 移 量 ， 该 函数 计算 指定 元 素 的 
文档 坐标 。 (回想 一 下 getBoundingClientRect0 返 回 的 是 视 口 坐标 。) 这 
里 不 能 对 元 素 的 位 置 就 一 锤 定 音 ， 尽 管 如 此 一 一 这 个 
getElementPosition0) 函 数 也 不 总 是 计算 正确 的 值 ， 下 面 看 看 如 何 来 修复 


es 





除了 这 些 名 字 以 offset 开 头 的 属性 以 外 ， 所 有 的 文档 元 素 定 义 了 其 
他 两 组 属性 ， 其 名 称 一 组 以 client 开 头 ， 另 一 组 以 scrol 开 头 。 即 ， 每 个 
HTML 元 素 都 有 以 下 这 些 属性 : 





offsetWidth clientWidth scrollWidth 
offsetHeight clientHeight scrollHeight 
offsetLeft clientLeft scrolllLeft 
offsetTop clientTop scrollTop 
offsetParent 


为 了 理解 这 些 dient 和 scroll 属 性 ， 你 需要 知道 HTML 元 素 的 实际 内 
容 有 可 能 比分 配 用 来 容纳 内 容 的 盒子 更 大 ， 因 此 单个 元 素 可 能 有 滚动 条 
( 见 16.2.6 节 中 CSS 的 overflow 属 性 ) 。 内 容 区 域 是 视 口 ， 束 像 浏览 器 的 

窗口 ， 当 实际 内 容 比 视 口 更 大 时 ， 需 要 把 元 素 的 滚动 条 位 置 考虑 进去 。 


clientWidth 和 clientHeight 类 似 offsetWidth 和 offsetHeight， 不 同 的 是 
它们 不 包含 边框 大 小 ， 只 包含 内 容 和 它 的 内 边 距 。 同 时 ， 如 果 浏 览 器 在 
内 边 距 和 边框 之 间 添 加 了 深 动 条 ，dlientWidth 和 clientHeight 在 其 返回 值 
中 也 不 包含 滚动 条 。 注 意 ， 对 于 类 似 <i>、 近 code> 和 <span> 这 些 内 
联 元 素 ，dlientWidth 和 clientHeight 总 是 返回 0。 











在 例 15-9 的 getViewportSize() 方 法 中 使 用 了 dlientWidth 和 
J 有 一 个 特殊 的 案例 ， 在 文档 的 根 元 素 上 查询 这 些 属性 时 ， 
它们 的 返回 值 和 窗口 的 innerWidth 和 innerHeight 属 性 值 相等 。 


clientLeft 和 clientTop 属 性 没什么 用 : 它们 返回 元 素 的 内 边 距 的 外 边 
缘 和 它 的 边框 的 外 边缘 之 间 的 水 平 距 离 和 垂直 距离 ， 通 常 这 些 值 就 等 于 
左边 和 上 边 的 边框 宽度 。 但 是 如 果 元 素 有 深 动 条 ， 并 且 浏 览 器 将 这 些 深 

动 条 放置 在 左 侧 或 项 部 (可 这 不 太 和 常见) ，clientLeft 和 clientTop 也 就 包 
含 了 滚动 条 的 宽度 。 对 于 内 联 元 素 ，clientLeft 和 clientTop 总 是 为 0。 


scrollWidth 和 scrollHeight 是 元 素 的 内 容 区 域 加 上 它 的 内 边 距 再 加 上 
任何 洲 出 内 容 的 尺寸 。 当 内 容 正 好 和 内 容 区 域 下 配 而 没有 淤 出 时 ， 这 些 
属性 与 on clientHeight 是 相等 的 。 但 当 洲 出 时 ， 它 们 就 包含 淤 
出 的 内 容 ， 返 回 值 比 clientWidth 和 clientHeight 要 大 。 























最 后 ，scrollLeft 和 scrollTop 指 定 元 素 的 滚动 条 的 位 置 。 在 
getScrollOffsets0) 方 法 〈 例 15-8) 中 在 文档 的 根 元素 上 我 们 查询 过 它们 。 
注意 ，scrollLeft 和 scrollTop 是 可 写 的 属性 ， 通 过 设置 它们 来 让 元 素 中 的 
内 容 深 动 。 (HTML 元 素 并 没有 类 似 Window 对 象 的 scrollTo() 方 法 。) 


当 文 档 包 含 可 滚动 的 且 有 溢出 内 容 的 元 素 时 ， 上 述 定 义 的 
getElementPosition() 方 法 就 不 能 正 芝 工作 了 ， 因 为 它 没 有 把 滚动 条 考虑 
进去 。 这 里 有 一 个 修改 版 ， 它 从 累计 的 偏 移 量 中 减 去 了 滚动 条 的 位 置 ， 
这 样 一 来 ， 将 返回 的 位 置 从 文档 坐标 转换 为 视 口 坐标 。 














function getElementPos(elt){ 
var x=0, y=0;// 循 环 以 累加 偏 移 量 
for(var e= elt; e!=null;e=e.offsetParent){ 
X+=e ， offsetLeft; 

y+=e.offsetTop; 

} 

// 再 次 循环 所 有 的 祖先 元 素 ， 减 去 滚动 的 偏 移 量 
// 这 也 减 去 了 主 滚动 条 ， 并 转换 为 视 口 坐标 
for(var e=elt.parentNode;e!=null& &e.nodeType==1;e=e.parentNode)t{ 
x-=e.scrollLeft,; 

y-=e.scrollTop; 
















































































return{x:x,y:y}; 





在 现代 浏览 器 中 ， 0 的 返回 Re 
getBoundingClientRect() 的 返回 值 一 样 (但 是 更 低 效 ) 。 理 论 上 ， 如 


getElementPosO 这 样 的 函数 可 以 在 不 文 持 getBoundingClientRectO 的 浏览 
器 中 使 用 。 但 实际 上 ， 不 支持 getBoundingClientRectO 的 浏览 器 在 元 素 位 
置 方 面 有 很 多 的 不 兼容 性 ， 像 这 样 如 此 简陋 的 函数 无 法 可 菲 地 工作 。 


实际 类 似 jQuery 这 样 的 客户 端 类 库 包 含 了 一 些 函 数 来 计算 元 素 的 位 
置 ， 它 们 扩充 了 这 个 基本 的 位 置 计算 算法 ， 修 复 了 一 系列 浏览 器 特定 的 
bug。 如 果 需 要 代码 在 所 有 不 支持 getBoundingClientRect() 的 浏览 器 中 正 
确 计 算 元 素 的 位 置 ， 你 很 可 能 需要 像 jQuery 这 样 的 类 库 。 


15.9 _ HTML 表单 


HTML 的 form 之 元 素 和 各 种 各 样 的 表单 输入 元 素 〈 如 所 input 这 、 
<select 和 <button 盖 ) 在 客户 端 编 程 中 有 着重 要 的 地 位 。 这 些 HTML 
元 素 可 以 追溯 到 Web 的 最 开始 ， 比 JavaScript 本 身 更 早 。HTML 表 单 就 是 
第 一 代 We b 应 用 程序 背后 的 运作 机 制 ， 它 根本 就 不 需要 JavaScript。 用 
户 的 输入 从 表单 元 素来 收集 ; 表单 将 这 些 输 入 递交 给 服务 器 ， 服 务 器 处 
ee (通常 有 一 个 新 的 表单 元 素 ) 显示 在 

户 端 。 


即使 当 整 个 表单 数据 都 是 由 客户 端 JavaScript 来 处 理 并 不 会 提交 到 服 
务 圳 时 ，HTML 表 单元 素 仍然 是 收集 用 户 数据 很 好 的 方法 。 在 服务 端 程 
序 中 ， 表 单 必须 要 有 一 个 “提交 ”按钮 ， 人 否则 它 就 没有 用 处 。 另 一 方面 ， 
在 客户 端 编 程 中 , “提交 ”按钮 不 是 必须 的 《虽然 它 可 能 仍然 有 用 ) 。 服 
务 端 程序 是 基于 表单 提交 动作 的 一 一 它们 按 表 单 大 小 的 块 处 理 数 据 一 一 
这 限制 了 它们 的 交互 性 。 客 户 端 程序 是 基于 事件 的 一 一 它们 可 以 对 单独 
的 表单 元 系 上 的 事件 做 出 啊 应 一 一 这 使 得 它们 有 更 好 的 啊 应 度 。 例 如 ， 
在 用 户 打字 时 客户 器 程序 就 能 校 验 输入 的 有 效 性 。 或 者 通过 单 击 一 个 复 
选 框 来 局 用 一 组 选项 ， 也 就 是 说 当 复 选 框 被 选中 时 那 组 选项 才 有 意义 。 


以 下 小 节 阐 述 了 用 HTML 表 单 如 何 做 到 这 些 事情 。 表 单 由 HTML 元 
素 组 成 ， 就 像 HTML 文 档 的 其 他 部 分 一 样 ， 并 且 可 以 用 本 章 中 介绍 过 的 
DOM 技 术 来 操作 它们 。 但 是 表单 是 第 一 批 脚本 化 的 元 素 ， 在 最 早 的 客 
户 端 编程 中 它们 还 支持 比 DOM 更 早 的 一 些 其 他 的 API。 


请 注意 ， 本 节 是 关于 脚本 化 HTML 表单， 而 不 是 HTML 本 身 。 假 设 
你 已 经 对 用 于 定义 表单 的 HIML 元 素 〈 雪 input>、 雪 textarea 之 、 去 
select 之 等 ) 有 一 定 的 了 解 。 尽 管 如 此 ， 表 15-1 列 出 了 最 常 使 用 的 表单 元 






































系 。 更 详细 的 内 容 请 参考 第 四 部 分 中 的 表单 和 表单 元 系 API， 在 Form、 
Input、Option、Select 和 TextArea 下 面 。 


表 15.1，HTML 表 单元 素 


HTML 元 素 类 型 属性 。 事件 处 理 程序 描述 和 事件 
<input type="button"> 或 。 "button' onclick 按钮 


<button type= "button > 


<input type="checkbox"> "checkbox' onchange 复 选 按 钮 


HTML 元 素 


<input type="file"> 


<input type="hidden"> 


<option> 


<input type="password"> 
<input type="radio"> 
<input type="reset"> 或 
<button type="reset"> 
<select> 

<select multiple> 

<input type="submit"> 或 


<button type="submit"> 


<input type="text"> 


<textarea> 


类 型 属性 


"file" 


"hidden" 


none 


"password" 


"radio" 


"reset" 


"select-one" 


"select-multiple" 


"submit" 


"text' 


"textarea" 


事件 处 理 程序 “描述 和 事件 


onchange 


none 


none 


onchange 


onchange 


onclick 


onchange 


onchange 


onclick 


onchange 


onchange 


载 人 Web 服 务 费 的 文件 的 
文件 名 输入 域 ， 它 的 value 
属性 是 只 读 的 

数据 由 表单 提交 ， 但 对 用 
户 不 可 见 
Select 对 象 中 的 单个 选项 ， 
事件 处 理 程序 在 Select 对 象 
上 ， 而 非 单独 的 Option 对 
象 上 

密码 输入 框 ， 输 入 的 字符 
不 可 见 

单 选 按 钮 ， 同 时 只 能 选 定 


-个 


重 置 表单 的 按钮 


选项 只 能 单 选 的 列表 或 下 
拉 菜 单 ( 另 见 <option>) 
选项 可 以 多 选 的 列表 ( 见 


<option>) 


表单 提交 按钮 


单行 文本 输入 域 ， type 属 
性 缺少 或 无 法 识别 时 默认 
的 <input> 元 素 


多 行文 本 输入 域 


15.9.1 选取 表单 和 表单 元 素 


表单 和 它们 所 包含 的 元 素 可 以 用 如 getElementById0 和 
getElementsByTagName() 等 标准 的 方法 从 文档 中 来 选取 : 





var fields=document.getElementById("address").getElementsByTagName("input"); 





福 全 支持 querySelectorAlIO 的 ; 浏览 器 中 ， 从 一 个 表单 中 选取 所 有 的 单 
选 按钮 或 所 有 同名 的 元 素 的 代码 如 下 : 








//id 为 "shipping" 的 表单 中 所 有 的 单 选 按 钮 

document .querySelectorAll1('#shipping input[type="radio"]');//id 为 "shipping" 的 表单 
中 所 有 名 字 为 "method" 的 单 选 按钮 

document .querySelectorAl1('#shipping input[type="radio"][name="method"]'); 


























尽管 如 此 ， 如 同 在 14.7 节 、15.2.2 节 和 15.2.3 节 所 描述 的 ， 有 name 或 
id 属性 的 过 form 之 元 素 能 够 通过 很 多 方法 来 选取 。name='"address" 属 性 
的 二 form> 之 可 以 用 以 下 任何 方法 来 选取 : 























window.address// 不 可 靠 不 要 使 用 
document .address// 仅 当 表 单 有 name 属 性 时 可 用 
document ,forms ， address// 显 式 访问 有 name 或 id 的 表单 
document .forms [n]// 不 可 靠 , n 是 表单 的 序号 









































15.2.3” 节 阐述 了 document.forms 是 一 个 HTMLCollection 对 象 ， 可 以 
通过 数字 序号 或 id 或 name 来 选取 表单 元 素 。Form 对 象 本 里 的 行为 类 似 于 
多 个 表单 元 素 组 成 的 HTMLCollection 集 合 ， 也 可 以 通过 name 或 数字 序号 
来 索引 。 如 果 名 为 "address" 的 表单 的 第 一 个 元 素 的 name 是 "street"， 可 以 
使 用 以 下 任何 一 种 表达 式 来 引用 该 元 素 : 














document ,forms ,address[9] 
document .forms.address.street 
document .address.street// 当 有 name="address"， 而 不 是 只 有 id="address" 























如 果 要 明确 地 选取 一 个 表单 元 素 ， 可 以 索引 表单 对 象 的 elements 局 





document ,forms ,address,.elements[0] 
document .forms.address.elements.street 





一 般 来 说 指定 文档 元 素 的 方法 用 id 属性 要 比 name 属 性 更 佳 。 但 是 ， 
name 属 性 在 HTML 表 单 提交 中 有 特殊 的 目的 ， 它 在 表单 中 较为 常用 ， 在 
其 他 元 素 较 少 使 用 。 它 应 用 于 相关 的 复 选 按钮 组 和 强制 共享 name 属 性 值 
的 、 互 斥 的 单 选 按钮 组 。 请 记 住 ， 当 用 name 来 索引 一 个 HTMLCollection 
对 象 并 且 它 包含 多 个 元 素来 共享 name 时 ， 返 回 值 是 一 个 类 数组 对 象 ， 它 
考虑 以 下 表单 ， 它 包含 多 个 单 选 按钮 来 选择 运输 
方式 : 

















<form name="shipping"> 

<fieldset>><legend>Shipping Method<=/legend> 

<label><input type="radio"name="method"value="1st">First-class</label> 
<label><input type="radio"name="method"value="2day"~>2-day Air<=/label> 
<label><input type="radio"name="method"value="overnite"~>0Overnight</label> 
</fieldset> 

</form> 





对 于 该 表单 ， 用 如 下 代码 来 引用 单 选 按钮 元 素数 组 : 





var methods=document ,forms ,shipping.elements ,method ; 





注意 ， 雪 form> 之 元 素 本 身 有 一 个 HITMEL 属 性 和 对 应 的 JavaScript 属 性 
叫 "method"， 所 以 在 此 案例 中 ， 必 须要 用 该 表单 的 elements 属 性 而 非 直 
接 访问 method 属 性 。 为 了 判定 用 户 选 取 哪 种 运输 方式 ， 需 要 过 历数 组 中 
的 表单 元 素 并 检测 它们 的 checked 属 性 : 





var shipping_method; 
for(var i=0;i<methods.1length;i++) 
if(methods[i].checked)shipping method=methods[i].value; 





在 下 一 节 中 可 以 看 到 更 多 表单 元 素 的 属性 ， 如 checked 和 value。 
15.9.2 表单 和 元 素 的 属性 
上 面 描述 的 elements[] 数 组 是 Form 对 象 中 最 有 趣 的 属性 。Form 对 象 


中 的 其 他 属性 相对 没有 如 此 重要 。action、encoding、method 和 target 属 
性 〈property) 直接 对 应 于 <<form> 之 元 系 的 action、encoding、method 和 





target 等 HIML 属 性 (attribute) 。 这 些 属 性 都 控制 了 表单 是 如 何 来 提交 
数据 到 Web 服 务 器 并 如 何 显示 的 。 客 户 端 JavaScript 能 够 设置 这 些 属性 
值 ， 不 过 仅 当 表单 真 的 会 将 数据 提交 到 一 个 服务 端 程 序 时 它们 才 有 用 。 


在 JavaScript 产 生 之 前 ， 要 用 一 个 专用 的 “提交 ”按钮 来 提交 表单 ， 用 
一 个 专用 的 “ 重 置 ” 按 钮 来 重 置 各 表单 元 素 的 值 。JavaScript 的 Form 对 象 
文 持 两 个 方法 : submit() 和 reset()， 它 们 完成 同样 的 目的 。 调 用 Form 对 象 
的 submit() 方 法 来 提交 表单 ， 调 用 reset0 方 法 来 重 置 表单 元 素 的 值 。 


所 有 【或 多 数 ) 表单 元 素 通 党 都 有 以 下 属性 。 如 果 一 些 元 系 有 其 他 
专用 的 属性 ， 会 在 后 面 单独 考虑 各 种 类 型 的 表单 元 素 时 描述 它们 : 

















type 


标识 表单 元 素 类 型 的 只 读 的 字符 串 。 针 对 用 二 input 二 标签 定义 的 表 
单元 素 而 言 ， 就 是 其 type 属 性 的 值 。 其 他 表单 元 素 〈 如 所 textarea 之 和 去 
select 盖 ) 定义 type 属 性 是 为 了 轻松 地 标识 它们 ， 与 二 input 之 元 素 在 类 型 
检测 时 互相 区 别 。 表 15-1 的 第 二 列 给 出 了 各 个 表单 元 素 此 属性 的 值 。 








form 


对 包含 元 素 的 Form 对 象 的 只 读 引 用 ， 或 者 如 果 元 素 没 有 包含 在 一 个 
二 form 放 元 素 中 则 其 值 为 null。 





name 
只 读 的 字符 串 ， 由 HTMEL 属 性 name 指 定 。 
value 


可 读 / 写 的 字符 串 ， 指 定 了 表单 元 素 包 含 或 代表 的 “ 值 ?>。 它 就 是 当 提 
交 表 单 时 发 送 到 Web 服 务 器 的 字符 串 ， 也 是 JavaScript 程 序 有 时 候 会 感 兴 
趣 的 内 容 。 针 对 Text 和 Textarea 元 素 ， 该 属性 值 包含 了 用 户 输入 的 文 
本 。 针 对 用 天 input> 标 签 创 建 的 按钮 元 素 〈 除 了 用 <<button 之 标签 创建 
的 按钮 ) ， 该 属性 值 指定 了 按钮 显示 的 文本 。 但 是 ， 针 对 单 选 和 复 选 按 
钮 元 素 ， 该 属性 用 户 不 可 见 也 不 能 编辑 。 它 仅 是 用 HTML 的 value 属 性 来 
设置 的 一 个 字符 串 。 它 在 表单 提交 时 使 用 ， 但 在 关联 表单 元 素 的 额外 数 
据 时 也 很 有 用 。 在 本 章 后 面 关 于 不 同类 目的 表单 元 素 小 节 中 将 深入 讨论 








value 属 性 。 
15.9.3 ”表单 和 元 素 的 事件 处 理 程序 


每 个 Form 元 素 都 有 一 个 onsubmit 事 件 处 理 程 序 来 侦 测 表 单 提 交 ， 还 
有 一 个 onreset 事 件 处 理 程 序 来 侦 测 表单 重 置 。 表 单 提 交 前 调用 onsubmit 
程序 ， 它 通过 返回 false 能 够 取消 提交 动作 。 这 给 JavaScript 程 序 一 个 机 会 
来 检查 用 户 的 输入 错误 ， 目 的 是 为 了 避免 不 完整 或 无 效 的 数据 通过 网 络 
提交 到 服务 端 程序 。 注 意 ，onsubmit 事 件 处 理 程序 只 能 通过 单 击 “ 提 
J 。 直 接 调用 表单 的 submit(0) 方 法 不 触发 onsubmit 事 件 处 理 
ee 


onreset 事 件 处 理 程序 和 onsubmit 是 类 似 的 。 它 在 表单 重 置 之 前 调 
用 ， 通 过 返回 false 能 够 阻止 表单 元 素 被 重 置 。 在 表单 中 很 少 需要 “ 重 
置 ? 按 钮 ， 但 如 果 有 ， 你 可 能 需要 提醒 用 户 来 确认 是 否 重 置 : 








<form... 
onreset="return confirm('Really erase ALL input and start over?')"> 


<button type="reset">Clear and Start Over<=<=/button> 
</form> 


类 似 onsubmit 事 件 处 理 程序 ，onreset 只 能 通过 单 击 “ 重 置 ”按钮 来 触 
发 。 直 接 调用 表单 的 reset() 方 法 不 触发 onreset 事 件 处 理 程序 。 


当 用 户 与 表单 元 素 交 互 时 它们 往往 会 触发 click 或 change 事 件 ， 通 过 
定义 onclick 或 onchange 事 件 处 理 程 序 可 以 处 理 这 些 事件 。 表 15-1 的 第 三 
列 给 出 了 各 个 表单 元 素 主 要 的 事件 处 理 程序 。 一 般 来 说 ， 当 按钮 表单 元 
素 激 活 〈 甚 至 当 通 过 键盘 而 不 是 实际 的 鼠标 单 击发 生 激 活 ) 时 它们 会 触 
发 click 事 件 。 当 用 户 改变 其 他 表单 元 素 所 代表 的 值 时 它们 会 触发 change 
事件 。 当 用 户 在 一 个 文本 域 输入 文本 或 从 下 拉 列 表 中 选择 了 一 个 选项 后 
就 发 生 这 样 的 改变 。 注 意 ， 在 一 个 文本 域 中 该 事件 不 是 每 次 用 户 输 入 一 
个 键 值 时 都 会 触发 。 它 仅 当 用 户 改 变 了 元 了 素 的 值 然后 将 焦点 移 到 其 他 元 
素 上 时 才 会 触发 。 也 就 是 说 ， 调 用 该 事件 处 理 程序 就 意味 着 一 个 完整 的 
改变 。 单 选 按 钮 和 复 选 框 都 有 一 个 状态 标识 ， 它 们 的 dick 和 change 事 件 
都 会 触发 ; 两 个 之 中 change 事 件 更 加 有 用 。 


表单 元 素 在 收 到 键盘 的 焦点 时 也 会 触发 focus 事 件 ， 失 去 焦点 时 会 触 
发 blur 事 件 。 

















关于 事件 处 理 程序 有 一 点 非常 重要 ， 在 事件 处 理 程序 代码 中 关键 字 
this 是 触发 该 事件 的 文档 元 素 的 一 个 引用 我 们 将 在 第 17 间 中 再 次 讨 
论 ) 。 既 然 在 二 form 二 元 素 中 的 元 素 都 有 一 个 form 属 性 引用 了 该 包含 的 
表单 ， 这 些 元 素 的 事件 处 理 程序 总 是 能 够 通过 this.form 来 得 到 Form 对 象 
的 引用 。 更 进一步 ， 这 意味 着 某 个 表单 元 素 的 事件 处 理 程序 能 够 通过 
this.form.x 得 到 该 表单 中 以 x 命名 的 元 素 。 


15.9.4 ”按钮 


按钮 是 最 第 用 的 表单 元 系 之 一 ， 因 为 它们 是 一 种 视觉 上 明确 让 用 户 
触发 菜 种 脚本 动作 的 方法 。 按 钮 元 素 本 号 没有 默认 的 行为 ， 除 非 它 有 
onclick 事 件 处 理 程序 ， 否 则 它 并 没有 什么 用 处 。 以 <input 二 元 系 定 义 的 
按钮 会 将 value 属 性 值 以 纯 文本 显示 。 以 二 button 二 元 素 定义 的 按钮 会 将 
元 素 的 一 切 内 容 显 示 出 来 。 


注意 ， 超 级 链接 与 按钮 一 样 提供 了 ondlick 事 件 处 理 程序 。 当 ondlick 
de 动作 可 以 概念 化 为 “跟随 此 链接 ”时 就 用 一 个 链接 ; 否则 ， 
用 按钮 。 


提交 和 重 置 元 素 本 束 是 按钮 ， 不 同 的 是 它们 有 与 之 相关 联 的 默认 动 
作 “〈 表 单 的 提交 和 重 置 ) 。 如 果 onclick 事 件 处 理 程序 返回 false， 这 些 按 
钮 的 默认 动作 就 不 再 执行 了 。 可 以 使 用 提交 元 素 的 ondlick 事 件 处 理 程序 
来 执行 表单 校 验 ， 但 是 更 为 常用 的 是 使 用 Form 对 象 本 里 的 onsubmit 事 件 
处 理 程序 来 执行 表单 校 验 。 


本 书 第 四 部 分 未 包含 按钮 。 关 于 所 有 按钮 表单 元 素 的 详细 内 容 请 参 
看 input 项 ， 它 包含 了 用 二 button 二 元 素 创 建 的 按钮 。 


15.9.5 ”开关 按钮 


复 选 框 和 单 选 元 素 是 开关 按钮 ， 或 称 有 两 种 视觉 状态 的 按钮 ， 选中 
或 未 选中 。 通 过 对 其 单 击 用 户 可 以 改变 它 的 开关 状态 。 单 选 元 素 为 整 组 
有 相关 性 的 元 素 而 设计 的 ， 组 内 所 有 按钮 的 HTML 属 性 name 的 值 都 相 
同 。 按 这 种 方式 创建 的 单 选 按钮 是 互 斥 的 : 选中 其 一 ， 之 前 选中 的 即 变 
成 未 选中 。 复 选 框 通常 也 整 组 使 用 并 共享 name 属 性 ， 必 须 注意 的 是 当 利 
se 
是 单个 元 素 。 









































单 选 和 复 选 框 元 素 都 定义 了 checked 属 性 。 该 属性 是 可 读 / 写 的 布尔 
值 ， 它 指定 了 元 素 当 前 是 否 选 中 。defaultChecked 属 性 也 是 布尔 值 ， 它 
ee 它 指定 了 元 素 在 第 一 次 加 载 页 面 时 是 否 i 





单 选 和 复 选 框 元 素 本 身 不 显示 任何 文本 ， 它 们 通常 和 相 邻 的 HTML 
文本 一 起 显示 《或 与 二 label> 元 素 相 关联 ) 。 这 意味 着 设置 复 选 框 或 单 
选 元 系 的 value 属 性 不 改变 元 系 的 视觉 表现 。 设 置 value 只 改变 提交 表单 
时 发 送 到 Web 服 务 器 的 字符 串 。 


当 用 户 单 击 单 选 或 复 选 开关 按钮 ， 单 选 或 复 选 框 元 素 触 发 onclick 事 
件 。 如 果 由 于 单 击 开 关 按 钮 改变 了 它 的 状态 ， 它 也 触发 onchange 事 件 。 
(但 注意 ， 当 用 户 单 击 其 他 单 选 按 钮 而 导致 这 个 单 选 按 钮 状态 的 改变 ， 
后 者 不 触发 onchange 事 件 。) 


15.9.6 ”文本 域 

文本 输入 域 在 HTML 表 单 和 JavaScript 程 序 中 可 能 是 最 常用 的 元 素 。 
用 户 可 以 输入 单行 简短 的 文本 字符 串 。value 属 性 表示 用 户 输入 的 文本 。 
通过 设置 该 属性 值 可 以 显 式 地 指定 应 该 在 输入 域 中 显示 的 文本 。 


在 HTML5 中 ，placeholder 属 性 指定 了 用 户 输入 前 在 输入 域 中 显示 的 
提示 信 已,: 




















Arrival Date:=input type="text"name="arrival"placeholder="yyyy-mm-dd"> 


文本 输入 域 的 onchange 事 件 处 理 程序 是 在 用 户 输入 新 的 文本 或 编辑 
已 存在 的 文本 时 触发 ， 它 表明 用 户 完 成 了 编辑 并 将 焦点 移出 了 文本 域 。 


Textarea 元 素 类 似 文本 输入 域 元 素 ， 不 同 的 是 它 允 许 用 户 输 入 (和 
JavaScript 程 序 显示 ) 多 行文 本 。Textarea 元 素 用 二 textarea 二 标签 来 创 
建 ， 与 用 <input 二 标签 创建 的 文本 域 在 语法 上 有 显著 的 区 别 。〔 见 第 四 
部 分 的 TextArea。) 尽管 如 此 ， 两 种 元 素 的 行为 非 党 类似。 如同 针对 
Text 元 素 一 样 ， 可 以 用 Textarea 元 素 的 Value 属 性 和 onchange 事 件 处 理 程 
展 

















二 input type="password" 之 元 素 在 用 户 输入 时 显示 为 星 号 ， 它 修改 了 


输入 的 文本 。 其 名 字 表 明 ， 用 户 输 入 密码 时 不 用 担心 他 背后 的 人 能 

到 ， 这 很 有 有 用。 注意， 密码 输入 元 素 只 能 防止 眼睛 宽 视 ， 但 在 提交 表单 
时 输入 未 经 任何 加 密 (除非 通过 安全 的 HTTPS 连 接 提 交 它 ) ， 当 在 网 络 
上 传输 时 它 可 能 被 看 见 。 


最 后 ， 二 input type="file" 二 元素 将 用 户 输 入 竺 上传 到 Web 服 务 器 的 
文件 的 名 称 。 它 由 一 个 文本 域 和 一 个 单 击 打 开 文 件 选 择 对 话 框 的 按钮 所 
组 成 。 该 文件 选取 元 素 拥 有 onchange 事 件 处 理 程序 ， 就 像 普 通 的 输入 域 
一 样 。 但 不 同 的 是 它 的 value 属 性 是 只 读 的 。 这 个 防止 恶意 的 JavaScript 
程序 欺骗 用 户 上 传 本 意 不 想 共 享 的 文件 。 


不 同 的 文本 输入 元 素 定 义 onkeypress、onkeydown 和 onkeyup 事 件 处 
理 程序 。 可 以 从 onkeypress 或 onkeydown 事 件 处 理 程序 返回 false， 防 止 记 
录用 户 的 按键 。 这 很 有 用 ， 例 如 ， 如 果 希 望 强 制 用 户 在 特定 文本 输入 域 
中 仅 输 入 数字 。 该 技术 的 说 明 参 见 例 17-6。 


15.9.7 ”选择 框 和 选项 元 素 


Select 元 素 表 示 用 户 可 以 做 出 选择 的 一 组 选项 (用 Option 元 素 表 
示 ) 。 浏 览 器 通常 将 其 演 染 为 下 拉 衣 蛙 的 形式 ， 但 当 指 定 其 s iz e 属 性 值 
大 于 1 时 ， 它 将 显示 为 列表 中 的 选项 〈 可 能 有 滚动 ) 。Select 元 素 能 以 两 
种 不 同 的 方式 运作 ， 这 取 雇 于 它 的 type 属 性 值 是 如 何 设 置 的 。 如 果 去 
select 二 元 素 有 multiple 属 性 ， 也 就 是 Select 对 象 的 type 属 性 值 为 "select- 
multiple"， 那 就 允许 用 户 选 取 多 个 选项 。 人 否则 ， 如 果 没 有 多 选 属 性 ， 那 
只 能 选取 单个 选项 ， 它 的 type 属 性 值 为 "select-one"。 


某 种 程度 上 "select-multiple" 元 素 与 一 组 复 选 框 元 素 类 似 ，"select- 
one" 元 素 和 一 组 单 选 元 素 类 似 。 但 是 ， 由 Select 元 素 显 示 的 选项 并 不 是 
开关 按钮 : 它们 由 六 option 之 元 素 定 义 。Select 元 素 定 义 了 options 属 性 ， 
它 是 一 个 包含 了 多 个 Option 元 素 的 类 数组 对 象 。 


当 用 户 选 取 或 取消 选取 一 个 选项 时 ，Select 元 素 触 发 onchange 事 件 
处 理 程序 。 针 对 "select-one"Select 元 素 ， 它 的 可 读 / 写 属性 selectedIndex 指 
定 了 哪个 选项 当前 被 选中 。 人 针对 "select-multiple" 元 素 ， 单 个 
selectedIndex 属 性 不 足以 表示 被 选中 的 一 组 选项 。 在 这 种 情况 下 ， 要 判 
定 哪些 选项 被 选中 ， 就 必须 裔 历 options[] 数 组 的 元 素 ， 并 检测 每 个 
Option 对 象 的 selected 属 性 值 。 











除了 其 selected 属 性 ， 每 个 Option 对 象 有 一 个 text 属 性 ， 它 指定 了 在 
Select 元 素 中 的 选项 所 显示 的 纯 文 本 字符 串 。 设 置 该 属性 可 以 改变 显示 
给 用 户 的 文本 。value 属 性 指定 了 在 提交 表单 时 发 送 到 Web 服 务 器 的 文本 
字符 串 ， 它 也 是 可 读 / 写 的 。 甚 至 在 写 纯 客 户 问 程序 并 且 不 可 能 有 表单 
提交 时 ，value 属 性 (或 它 所 对 应 的 HTML 属 性 value〉 是 用 来 保存 任何 数 
据 的 好 地 方 ， 在 用 户 选 取 特 定 的 选项 时 可 以 使 用 这 些 数据 。 注 意 ， 
Option 元 素 并 没有 与 表单 相关 的 事件 处 理 程序 : 用 包含 Select 元 素 的 
onchange 事 件 处 理 程序 来 代 蔡 。 


除了 设置 Option 对 象 的 text 属 性 以 外 ， 使 用 options 属 性 的 特殊 功能 
可 以 动态 改变 显示 在 Select 元 素 中 的 选项 ， 这 些 功能 可 以 退 调 到 最 早期 
的 客户 端 编程 。 通 过 设置 options.length 为 一 个 希望 的 值 可 以 截断 Option 
元 素数 组 ， 而 设置 options.length 为 0 可 以 从 Select 元 素 中 移 除 所 有 的 选 
项 。 设 置 options[] 数 组 中 某 点 的 值 为 null 可 以 从 Select 元 素 中 移 除 单个 
Option 对 象 。 这 将 删除 该 Option 对 象 ，options[] 数 组 中 高 端的 元 素 目 动 移 
下 来 填补 空缺 。 


为 Select 元 素 增 加 一 个 新 的 选项 ， 首 先 用 Option0 构 造 函 数 创建 一 个 
Option 对 象 ， 然 后 将 其 添加 到 options[] 属 性 中 ， 代 码 如 下 : 


























// 创 建 一 个 新 的 选项 

var zaire=new 0ption("Zaire",//text 属 性 
"zaire",//value 属 性 
false,//defaultSelected 属 性 
false);//selected 属 性 

// 通 过 添加 到 options 数 组 中 ， 在 Select 元 素 中 显示 该 选项 

var countries=document .address.country;// 得 到 Select 对 象 
countries.options[countries.options.1length]=zaire; 





| 
i 


























请 牢记 一 点 ， 这 些 专 用 的 Select 元 素 的 API 已 经 很 老 了 。 可 以 用 那些 
标准 的 调用 更 明确 地 插入 和 移 除 选项 元 素 : Document.createElement()、 


Node.insertBefore()、Node.removeChild() 等 。 


15.10 其 他 文档 特性 


本 章 在 一 开始 束 声 明了 它 是 本 书 中 最 重要 的 一 章 。 由 其 必要 性 ， 它 
也 是 最 长 的 一 半 之 一 。 本 章 最 后 一 习 涵 盖 了 Document 对 象 的 天干 混杂 的 
生性 。 























15.10.1 Document 的 属性 


本 章 已 经 介绍 的 Document 的 属性 有 body、documentElement 和 forms 
等 这 些 特殊 的 文档 元 素 。 文 档 还 定义 了 一 些 其 他 有 趣 的 属性 : 


cookie 


允许 JavaScript 程 序 读 、 写 HTTP cookie 的 特殊 的 属性 。 第 20 章 涵盖 
该 属性 


domain 


该 属性 允许 当 Web 页 面 之 间 交 互 时 ， 相 同 域名 下 互相 信任 的 Web 服 
务 需 之 间 协 作 放 宽 同 源 策略 安全 限制 〈 见 13.6.2 节 ) 。 


last Modified 


包含 文档 修改 时 间 的 字符 串 。 








location 
与 Window 对 象 的 location 属 性 引用 同一 个 Location 对 象 。 
referrer 


如 果 有 ， 它 表示 浏览 器 导航 到 当前 链接 的 上 一 个 文档 。 访 属性 值 和 
HTTP 的 Referer 头 信息 的 内 容 相 同 ， 只 是 拼写 上 有 两 个 r。 








title 
文档 的 过 tile 二 和 过/title 二 标签 之 间 的 内 容 。 
URL 


文档 的 URL， 只 读 字 符 串 而 不 是 Location 对 象 。 访 属性 值 与 
location.href 的 初始 值 相同 ， 只 是 不 包含 Location 对 象 的 动态 变化 。 例 
如 ， 如 果 用 户 在 文档 中 导 癌 到 一 个 新 的 片段 ，location.href 会 及 生变 化 ， 
但 是 document.URL 则 不 会 。 





referrer 是 这 些 属性 中 最 有 趣 的 属性 之 一 : 它 包 含 用 户 链接 到 当前 文 
档 的 上 一 个 文档 的 URL。 可 以 用 如 下 代码 来 使 用 该 属性 : 





if(document.referrer.indexof("http://ww.google.com/search?")==0){ 
var args=document.referrer.substring(ref.indexof("?")+1).split("&"),; 
for(var i=0;i<args.length;i++)t{ 

if(args[i].substring(0,2)=="q="){ 

document .write("<p>Welcome Google User."); 

document .write("You searched for:"+ 
unescape(args[i].substring(2)).replace('+',""'); 

break; 

} 

} 

} 





上 述 代码 中 使 用 的 document.write0 方 法 将 是 下 一 节 的 主题 。 
15.10.2 ”document.write() 方 法 





document.write() 方 法 是 其 中 一 个 由 Netscape ”2 浏览 器 实现 的 非常 早 
期 的 脚本 化 API。 它 曾 在 DOM 之 前 就 被 很 好 地 引入 了 ， 也 曾 是 在 文档 中 
显示 计算 后 的 文本 的 唯一 方法 。 新 代码 中 已 经 不 再 需要 它 了 ， 但 在 已 有 
的 代码 中 你 还 能 不 时 地 看 到 该 方法 。 


document.write() 会 将 其 字符 串 参 数 连接 起 来 ， 然 后 将 结果 字符 串 插 
入 到 文档 中 调用 它 的 脚本 元 素 的 位 置 。 当 脚本 执行 结束 ， 浏 览 器 解析 生 
成 的 输出 并 显示 它 。 例 如 ， 以 下 代码 使 用 write0) 动 态 把 信息 输出 到 一 个 
静态 的 HTML 文档 中 : 











<script> 

document .write("<=p>Document title:"+document.title); 
document .write("<=br>URL:"+document .URL); 

document .write("<=br>Referred by:"+document.referrer); 
document .write("<br>Modified on:"+document.JlastModified); 
document .write("<=br>Accessed on:"+new Date()); 

</script> 





只 有 在 解析 文档 时 才能 使 用 write() 方 法 输出 HTML 到 当前 文档 中 ， 
理解 这 点 非常 重要 。 也 就 是 说 能 够 在 二 script 二 元 素 中 的 顶层 代码 中 调 
用 document.write0， 就 是 因为 这 些 脚本 的 执行 是 文档 解析 流程 的 一 部 
分 。 如 果 将 document.write(0) 放 在 一 个 函数 的 定义 中 ， 而 该 函数 的 调用 是 
从 一 个 事件 处 理 程序 中 发 起 的 ， 产 生 的 结果 未 必 是 你 想 要 的 一 一 事实 


上 上 ， 它 会 擦 除 当前 文档 和 它 包 含 的 脚本 ! 《马上 你 将 看 到 为 什么 。) 同 
理 ， 在 设置 了 defer 或 async 属 性 的 脚本 中 不 要 使 用 document.write()。 


第 13 章 中 的 例 13-3 以 这 种 方式 使 用 了 document.write() 来 产生 更 加 复 
杂 的 输出 。 


还 可 以 使 用 write() 方 法 在 其 他 的 窗口 或 框架 页 中 来 创建 整个 全 新 文 
档 。 但是， 当 有 多 个 窗口 或 框架 页 时 ， 必 须 注意 不 要 违反 同 源 入 
略 。) 第 一 次 调用 其 他 文档 的 write0 方 法 即 会 擦 除 该 文档 的 所 有 内 容 。 
可 以 多 次 调用 write0) 来 逐步 建立 新 文档 的 内 容 。 传 递 给 write(0) 的 内 容 可 
能 缓存 起 来 〈 并 且 不 会 显示 ) 直到 调用 文档 对 象 的 close() 方 法 来 结束 该 
写 序 列 。 本 质 上 这 上 告诉 HTML 解析 器 文档 已 经 达到 了 文件 的 末尾 ， 应 该 
结束 解析 并 显示 新 文档 。 


值得 一 提 的 是 Document 对 象 还 文 持 writeln() 方 法 ， 除 了 在 其 参数 的 
输出 之 后 追加 一 个 换行 符 以 外 它 和 write0) 方 法 完全 一 样 。 例 如 ， 在 二 pre 
二 元 素 内 输出 预 格式 化 的 文本 时 这 非常 有 用 。 


在 当今 的 代码 中 document.write() 方 法 并 不 常用 :innerHTML 属 性 和 
其 他 DOM 技 术 提 供 了 更 好 的 方法 来 为 文档 增加 内 容 。 另 一 方面 ， 某 些 
算法 的 确 使 得 它们 本 里 成 为 很 好 的 流 式 VWO API， 如 同 write() 方 法 提供 的 
API 一 样 。 如 果 你 正在 书写 在 运行 时 计算 和 输出 文本 的 代码 ， 可 能 会 对 
例 15-10 感 兴趣 ， 它 利用 指定 元 素 的 innerHTML 属 性 包装 了 简单 的 write() 
和 close() 方 法 。 


























例 15-10: 针对 innerHTML 属 性 的 流 式 API 








// 为 设置 元 素 的 jnnerHTML 定 义 简单 的 " 流 式 "API 
function ElementStream(elt){ 























this.elt=elt,; 

this,.buffer=""; 

} 

// 连 接 所 有 的 参数 ， 添 加 到 缓存 中 
ElementStream.prototype.write=function(){ 
this.buffer+=Array.prototype.join.call(arguments,""); 
};// 类 似 write()， 只 是 多 增加 了 换行 符 
ElementStream.prototype.writeln=function(){ 
this.buffer+=Array.prototype.join.call(arguments,"")+"\n"; 
};// 从 缓存 设置 元 素 的 内 容 ， 然 后 清空 缓存 
ElementStream,.prototype.close=function(){ 
this.elt.innerHTML=this.buffer,; 

this,.buffer=""; 

}; 
























































15.10.3 ”查询 选取 的 文本 


有 时 判定 用 户 在 文档 中 选取 了 哪些 文本 非常 有 用 。 可 以 用 类 似 如 下 
的 函数 达到 目的 : 





function getSelectedText(){ 
if(window.getSelection)//HTML5 标 准 API 

return window.getSelection().toString(); 

else if(document.selection)//IE 特 有 的 技术 
return document.selection.createRange().text,; 




















标准 的 window.getSelection(0) 方 法 返回 一 个 Selection 对 象 ， 后 者 描述 
了 当前 选取 的 一 系列 一 个 或 多 个 Range 对 象 。Selection 和 Range 定 义 了 一 
个 不 太 常 用 的 较为 复杂 的 API， 本 书 中 并 没有 文档 记录 。 ,0 
是 Selection 对 象 中 最 重要 的 也 广泛 实现 了 《除了 正 ) 的 特性 ， 它 返回 选 
取 的 纯 文 本 内 容 。 


正定 义 了 一 个 不 同 的 API， 它 在 本 书 中 也 没有 文档 记录 。 
document.selection 对 象 代表 了 用 户 的 选择 。 该 对 象 的 createRange() 方 法 
返回 正 特有 的 TextRange 对 象 ， 它 的 text 属 性 包含 了 选取 的 文本 。 


如 上 的 代码 在 书签 工具 ( 见 13.2.5 节 〉 中 特别 有 用 ， 它 操作 选取 的 
文本 ， 然 后 利用 搜索 引擎 或 参考 站 点 查找 某 个 单词 。 例 如 ， 如 下 HTML 
链接 在 Wikipedia 上 查找 当前 选取 的 文本 。 收 藏书 签 后 ， 该 链接 和 它 包含 
的 JavaScript URL 就 变 成 了 一 个 书签 工具 : 








<a href="javascript:var oq; 
if(window.getSelection)q=window.getSelection().toString(); 

else if(document.selection)q=document.selection.createRange().text; 
void window.open('http://en.wikipedia.org/wiki/'+q);"> 

Look Up Selected Text In Wikipedia 

</a> 








上 述 展 示 的 查询 选取 代码 的 兼容 性 不 佳 :， Window 对 象 的 
getSelection() 方 法 无 法 返 回 那 些 表 单元 素 <<input> 或 <<textarea 盖 内 部 选 
中 的 文本 ， 它 只 返回 在 文档 主体 本 身 中 选取 的 文本 。 另 一 方面 ， 正 的 
document.selection 属 性 可 以 返回 文档 中 任意 地 方 选 取 的 文本 。 




















从 文本 输入 域 或 二 textarea 二 元 素 中 获取 选取 的 文本 可 使 用 以 下 代 
码 : 





elt.value.substring(elt.selectionSstart,elt.selectionEnd); 





IE 8 以 及 更 早 版 本 的 浏览 器 不 支持 selectionStart 和 selectionEnd 属 
性 。 


15.10.4 可 编辑 的 内 容 


我 们 已 经 知道 HTML 表 单元 系 包 含 了 文本 字段 和 文本 域 元 素 ， 用 户 
可 以 输入 并 编辑 纯 文本 。 跟 随 正 的 脚步 ， 所 有 当今 的 Web 浏 览 器 也 文 持 
简单 的 HTML 编 辑 功能 : 你 也 许 已 经 看 到 过 这 在 页 面 上 使 用 了 《如 博客 
评论 页 ) ， 它 钦 入 了 一 个 语文 本 编辑 器， 包含 了 一 个 有 一 系列 按钮 的 工 
具 栏 来 设置 排版 样式 ( 粗 体 、 和 斜体 ) 、 对 齐 和 插入 图 片 与 链接 。 


有 两 种 方法 来 启用 编辑 功能 。 其 一 ， 设 置 任何 标签 的 HTML 
contenteditable 属 性 ， 其 二 ， 设 置 对 应 元 素 的 JavaScript contenteditable 属 
性 ， 这 都 将 使 得 元 素 的 内 容 变 成 可 编辑 。 当 用 户 单 击 该 元 素 的 内 容 时 就 
会 出 现 插入 光标 ， 用 户 训 击 键盘 就 可 以 插入 其 中 。 如 以 下 代码 ， 一 个 
HTML 元 素 创 建 了 一 个 可 编辑 的 区 域 : 











<div id="editor"contenteditable> 
Click to edit 
</div> 





浏览 器 可 能 为 表单 字段 和 contenteditable 元 素 支 持 自动 拼写 检查 。 在 
文 持 该 功能 的 浏览 器 中 ， 检 查 可 能 默认 开启 或 天 闭 。 为 元 素 添 加 
spellcheck 属 性 来 显 式 开 局 拼写 检查 ， 而 使 用 spellcheck=false 来 显 式 关 闭 
该 功能 〈 例 如 ， 当 一 个 <<textarea 之 将 显示 源 代 码 或 其 他 内 容 包含 了 字典 
里 找 不 到 的 标识 符 时 ) 。 


将 Document 对 象 的 designMode 属 性 设置 为 字符 串 "on" 使 得 整个 文档 
可 编辑 。 (设置 为 "off" 将 恢复 为 只 读 文 档 。) designMode 属 性 并 没有 对 
应 的 HTML 属 性 。 如 下 代码 使 得 <iframe 二 内 部 的 文档 可 编辑 (注意 ， 
这 里 用 了 例 13-5 中 的 onLoad() 函 数 ): 





< iframe id="editor"src="about:blank"></iframe>// 空 iframe 
<script> 

onLoad(function(){//document 加 载 后 ， 

var editor=document. getElementById(' ‘editor" ) ;// 获 得 jframe 中 的 文档 对 象 ， 
editor.contentDocument.designMode="on";// 开 启 编 辑 























}); 
</script> 





所 有 当今 的 浏览 器 都 支持 contenteditable 和 designMode 属 性 。 但 是 ， 
当 谈 到 它们 实际 的 可 编辑 行为 时 ， 它 们 是 不 太 兼 容 的 。 所 有 的 浏览 器 部 
允许 插入 与 删除 文本 并 用 鼠标 与 键盘 移动 光标 。 在 所 有 的 浏览 器 中 ， 
Enter 键 男 起 一 行 ， 但 不 同 的 浏览 器 生成 了 不 同 的 标记 。 有 些 开始 了 新 的 
段 沙 ， 而 其 他 的 只 是 插入 一 个 <br/ 二 元 素 。 


有 些 浏览 器 允许 键盘 快捷 键 〈 如 Ctrl+B) 来 加 粗 当 前 选中 的 文本 。 
在 其 他 浏览 器 (如 Firefox〉 中 ， 标 准 的 字 处 理 快 捷 键 〈 如 Ctrl+B 和 
被 绑 定 到 浏览 器 相关 的 其 他 功能 上 了 而 无 法 应 用 到 文本 编辑 器 


浏览 器 定义 了 多 项 文本 编辑 命令 ， 大 部 分 没有 键盘 快捷 键 。 为 了 执 
行 这 些 命令 ， 应 该 使 用 Document 对 象 的 execCommand() 方 法 。 (注意 ， 
这 是 Document 的 方法 ， 而 不 是 设置 了 contenteditable 属 性 的 元 素 的 方 
法 。 如 果 文 档 中 有 多 个 可 编辑 的 元 素 ， 命 令 将 自动 应 用 到 选区 或 插入 光 
标 所 在 那个 元 素 上 。 )， 用 execCommand0 执 行 的 命令 名 字 都 是 
如 "bold"、"subscript"、 < 。 字符 串 。 命 

















令 名 是 execCommand() 的 第 一 个 参数 。 有 些 命令 还 
例如 ，"createlink" 需 要 一 个 超级 链接 URL。 理 Yt 人 如 果 


execCommand() 的 第 二 个 参数 为 tue， 浏 览 器 会 自动 提示 用 户 输 入 所 需 
值 。 但 为 了 提高 可 移植 性 ， 你 应 该 提示 用 户 输入 ， 并 传递 false 作 为 第 二 
参数 ， 传 递 用 户 输入 的 值 作为 第 和 二 个 参数 。 





function bold(){document.execCcommand("bold",false, url);} 
function link()t{ 

var url=prompt("Enter link destination"); 
if(url)document .execCcommand("createlink",false,url); 


} 





execCommand() 所 支持 的 命令 通常 是 由 工具 栏 上 的 按钮 触发 的 。 当 
要 触发 的 命令 不 可 用 时 ， 民 好 的 UI 会 使 对 应 的 按钮 无 效 。 可 以 给 
document. queryCommandSupport() 传 递 命令 名 来 查询 浏览 器 是 否 文 持 该 
命令 。 调 用 document.queryCommandEnabled0) 来 查询 当前 所 使 用 的 命 





令 。 【例如 ， 一 条 需要 文 古 选 学区 或 的 他 令 企 无 选区 的 依 况 下 有 可 能 是 
无 效 的 。) 有 一 些 命令 如 "bold' "italic" 有 一 个 布尔 值 状态 ， 开 或 天 取 
决 于 当前 选区 或 光标 的 位 置 。 些 命令 通常 用 工具 栏 上 的 开关 按钮 表 
示 。 要 判定 这 些 命令 的 当前 状态 可 以 使 用 
document.queryCommandState()。 最 后 ， 有 些 命 令 ( 如 "fontname") 有 一 
个 相关 联 的 值 〈 字 体系 列 名 ) 。 用 document.queryCommandValue() 查 询 
CE I es "fontname" 的 查询 

结果 是 不 确定 的 。 使 用 document.queryCommandIndeterm(0) 来 检测 这 种 情 
况 。 











不 同 的 浏览 器 实现 了 不 同 的 编辑 命令 组 合 。 只 有 一 少 部 分 > 
了 很 好 的 支持 ， 如 "bold"、"italic"、"createlink"、"undo" 和 |' edo" 等 
在 写本 书 这 段 时 间 里 HTML5 草 案 定 义 了 以 下 命令 。 和 
被 普遍 地 支持 ， 这 里 就 不 做 详细 的 文档 记录 : 


bold insertLineBreak selectAll 
createLink insertOrderedlist subscript 
delete insertUnorderedList superscript 
formatBlock insertParagraph undo 
forwardDelete insertText unlink 
insertImage italic unselect 
insertHTML redo 





如 采 Web 应 用 程序 需要 富 文本 编辑 器 功能 ， 很 可 能 需要 采纳 一 个 预 
先 构建 的 解决 浏览 器 之 间 的 各 种 差异 的 解决 方案 。 在 网 上 可 以 找到 很 多 
这 样 的 编辑 器 组 件 趾 。 值 得 注意 的 是 ， 浏 览 器 内 置 的 编辑 功能 对 用 户 输 
入 少量 的 宇文 本 来 说 是 足够 强大 了 ， 但 要 解决 所 有 种 类 的 文档 的 编辑 来 
说 还 是 过 于 人 简陋 了。 特别 要 注意 ， 这 些 编辑 器 生 成 的 HTML 标 记 很 可 能 
是 杂乱 无 章 的 。 


一 旦 用 户 编 辑 了 某 元 素 的 内 容 ， 该 元素 设置 了 conteneditable 属 性 ， 
就 可 以 使 用 innerHTML 属 性 得 到 已 编辑 内 容 的 HTML 标 记 。 如 何 处 理 该 
富 文 本 由 你 自己 决定 。 可 以 把 它 存储 在 隐藏 的 表单 字段 中 ， 并 通过 提交 
该 表单 把 它 发 送 到 服务 器 。 可 以 使 用 第 18 章 描述 的 技术 直接 把 已 编辑 文 
本 发 送 到 服务 器 。 或 者 使 用 第 20 章 的 技术 在 本 地 保存 用 户 的 编辑 文本 。 

















[LICSS3 选 择 器 规范 : http://www.w3.org/TR/css3-selectors/。 

思 ] 选 择 器 API 标 准 不 是 HIML5 的 一 部 分 ， 但 与 之 有 紧密 的 关联 。 见 
http://www.w3.org/TR/selectors-api/。 

[31Sizzle 独 并 版 本 参见 http://sizzlejs.com。 
[4|lhttp:/www.w3.org/TR/ElementTraversal。 

[5]IE8 支 持 Element、HTMLDocument 和 Text 的 可 扩展 属性 ， 但 不 支持 
Node、Document、HTMLElement 或 HTMLElement 更 具体 的 子 类 型 的 可 
扩展 的 属性 。 

[6] 互 操作 命令 列表 ， 请 参见 
http:/www.quirksmode.org/dom/execCommand.html。 
[7JYUI 和 和 Dojo 框架 包含 了 编辑 器 组 件 。 这 里 也 有 一 些 其 他 的 可 选 方 案 
http://en.wikipedia.org/wiki/Online_rich-text_editor。 


第 16 章 ”脚本 化 CSS 


寻 闭 样式 表 (Cascading Style Sheet，CSS) 是 一 种 指定 HTML 文档 
视觉 表现 的 标准 。CSS 的 本 意 是 想 让 视觉 设计 师 来 使 用 的 : 它 允 许 设 计 
师 精 确 地 指定 文档 元 素 的 字体 、 颜 色 、 外 边 距 、 缩 进 、 边 框 ， 甚 至 是 定 
位 。 不 过 ， 客 户 端 JavaScript 程 序 员 对 CSS 也 非常 感 兴趣 是 因为 样式 可 以 
通过 脚本 编程 。 脚 本 化 CSS 启 用 了 一 系列 有 趣 的 视觉 效果 ， 例 如 : 可 以 
创建 一 个 动画 让 文档 内 容 从 右 侧 “ 滑 入 ”也 能 创建 一 个 轮廓 伸缩 的 列 
表 ， 在 里 面 用 户 自己 控制 显示 的 信息 量 。 首 次 推出 类 似 的 脚本 化 视觉 效 
果 是 革命 性 的 。 创 造 这 些 效果 的 JavaScript 和 和 CSS 技术 以 前 统称 为 动态 
HTML CDHTML ) ， 而 现在 ， 这 个 术语 已 经 不 再 流行 了 。 


CSS 是 个 复杂 的 标准 ， 在 写本 书 时 它 仍 在 活跃 的 开发 中 。CSS 本 身 
可 以 写 一 本 书 ， 而 详细 介绍 它 则 超出 了 本 书 的 范围 出 。 但 是 为 了 理解 
CSS 脚 本 化 ， 我 们 必须 熟悉 CSS 基 础 和 最 常用 的 样式 属性 。 本 章 开 头 简 
介 CSS 概 况 ， 接 着 解释 了 一 些 关 键 样式 ， 它 们 最 合适 脚本 化 了 。 此 后 ， 
16.3 节 阐述 怎样 实现 CSS 脚 本 化 。16.3 节 介绍 最 常用 和 重要 的 技术 : 利 
用 HTML 的 style 属 性 值 ， 更 改 那 些 应 用 在 单个 文档 元 素 中 的 样式 。 元 素 
的 style 属 性 可 以 用 来 设置 样式 ， 但 是 它 不 适合 用 来 查询 样式 。16.4 节 曾 
述 如 何 查询 元 素 的 “计算 样式 ”"。16.5 节 阐述 如 何 通过 修改 元 素 的 style 属 
性 一 次 修改 元 素 的 多 个 样式 。 直 接 操作 样式 表 也 是 可 能 的 ， 但 不 太 常 
见 ，16.6 节 介绍 如 何 开 启 或 关闭 样式 表 、 修 改 已 存 在 样式 表 的 规则 以 及 
添加 新 的 样式 表 。 


16.1 CSS 概览 


HTML 文 档 的 视觉 显示 包含 很 多 变量 : 字体、 颜色、 间距 等 。CSS 
标准 列举 了 这 些 变量 ， 我 们 称 为 样式 属性 。CSS 定 义 了 这 些 属性 以 指定 
字体 、 颜 色 、 外 边 距 、 边 框 、 背 景 图 片 、 文 本 对 齐 方式 、 元 素 尺 寸 和 元 
素 位 置 。 为 了 定义 HTML 元 素 的 视觉 表现 ， 规 定 了 这 些 CSS 属 性 的 值 。 
为 此 ， 紧 跟着 属性 名 是 冒号 和 值 ， 例 如 : 





























font-weight:bold 











为 了 全 面 地 描述 一 个 元 素 的 视觉 表现 ， 通 闻 需 要 指定 不 止 一 个 属 





性 。 当 需要 多 个 名 / 值 对 时 ， 它 们 之 间 用 分 号 隔 开 : 




















margin-left:16%;/* 左 外 边 距 是 页 面 宽度 的 10%*/ 
text-indent: .5in;/*1/2 英 寸 缩 进 */ 
font-size:12pt;/* 字 体 尺 寸 12pt*/ 





如 你 所 见 ，CSS 忽 略 了 “/** 和 “*/* 之 间 的 注释 ,但 是 它 不 支持 “//” 后 
面 的 注释 。 


有 两 种 方式 将 一 组 定义 视觉 表现 的 CSS 属 性 和 对 应 的 HTML 元 素 关 
联 在 一 起 。 第 一 种 是 通过 给 每 个 单独 的 HTML 元 素 设 置 style 属 性 值 的 方 
Tb 称 为 为 联 样式 ， 





<p style="margin:20px;border:solid red 2px;"> 

This paragraph has increased margins and is surrounded by a rectangular red 
border. 

</p> 





尽管 如 此 ， 通 常 将 单独 的 HTML 元 素 与 CSS 样 式 分 开 并 把 它们 定义 
在 一 个 样式 表 〈stylesheet) 中 会 更 有 用 。 样 式 表 通过 选择 器 将 一 组 样式 
属性 和 使 用 选择 器 〈selector) 描述 的 一 组 HTML 元 素 关 联 在 一 起 。 一 
选择 器 基于 元 素 ID、 类 名 或 标签 名 或 更 多 条 件 指 定 〈 或 称 “ 选 择 ”) 一 个 
或 多 个 文档 中 的 元 素 。15.2.5 节 介绍 了 选择 器 ， 并 描述 了 如 何 用 
querysSdectorAll0 来 获得 匹配 选择 器 的 一 组 元 素 。 


Css 样 式 表 的 基本 元 素 是 样式 规则 ， 它 们 由 选择 器 和 包 豆 在 一 
对 {中 的 CSS 属 性 和 信 有 组成。 每 个 样式 表 可 以 包含 任意 数 全 的 样式 
况 则 ; 














p{/* 选 择 器 "p" 匹 配 所 有 的 二 p 二 元 素 */ 
text-indent: .5in;/* 首 行 缩 进 0.5 英 寸 */ 
} 





























上 














:warningf/“ 任 何以 "warning "类 命名 的 元 素 * / 
background-color :yellow;/* 设 置 为 黄色 缘 景 */ 
border:solid black 5px; /* 和 黑色 大 边框 */ 
} 





























用 二 style 二 > 和 <=/style 二 标签 把 一 个 CSS 样 式 表 包 起 来 放 在 二 head> 
标签 里 ， 它 就 和 HTMEL 文 档 关 联 在 一 起 了 。 类 似 <<script 之 元 素 ， 扫 style 
> 元 素 内 容 也 不 会 被 当成 HIML 来 解析 


<html> 

<head>><title>Test Document<=/title> 

<style> 
body{margin-left:30px;margin-right:15px;background-color:#ffffff} 
p{font-size:24px;} 

</style> 

</head> 

<body~><p>Testing,testing<=/p> 

</html> 





当 一 个 样式 表 需 要 在 网 站 的 多 个 页 面 中 使 用 时 ， 通 常 将 其 保存 在 自 
己 的 文件 中 较 好 ， 这 个 文件 不 含 任 何 HIML 标 签 。 它 可 以 被 引入 到 
HTML 页 面 中 。 但 是 ， 不 像 <script> 元 素 ，<style 之 元 素 并 没有 src 属 
人 


YA 








<head> 

<title>Test Document</title> 

<link rel="stylesheet"href="mystyles.css"type="text/css"> 
</head> 








简 言 之 ， 这 就 是 CSS 的 工作 方式 。 关 于 CSS 还 有 几 个 值得 理解 的 知 
识 点 将 在 以 下 几 贡 中 逐一 解释 。 


16.1.1 层 鞋 


回想 一 下 ， 在 CSS 里 "C" 代 表 了 “ 层 合 *"。 该 术语 指示 了 应 用 于 文档 中 
任何 给 定 元 又 的 样式 规则 是 各 个 “来 源 ” 的 “ 层 登 ?效果 : 


"Web 浏览 器 的 默认 样式 表 

:文档 的 样式 表 

.每 个 独立 的 HTML 元素 的 style 属 性 

当然 ，style 属 性 中 的 样式 覆盖 了 样式 表 中 的 样式 ， 并 且 文 档 的 样式 
表 中 的 样式 覆盖 了 浏览 器 的 默认 样式 。 任 意 给 定 元 素 的 视觉 表现 可 能 是 
来 自 3 个 来 源 的 一 个 样式 组 合 。 一 个 元 素 甚 至 可 能 匹配 样式 表 中 的 多 个 


选择 器 ， 在 此 情况 下 ， 所 有 这 些 选择 费 的 关联 样式 属性 都 将 应 用 到 该 元 
素 上 。 如果 不 同 的 选择 器 为 同一 个 样式 属性 定义 了 不 同 的 值 ， 那 么 与 





最 具体 的 选择 器 相关 联 的 值 将 禾 普 与 不 那么 具体 的 选择 器 相关 联 的 值 。 
不 过 ， 详 细 的 解释 超出 了 本 书 的 范围 。) 


为 显示 文档 元 素 ，Web 浏 览 器 “必须 ”组 合 元 素 的 style 属 性 ， 包 括 来 
目 文 档 样式 表 中 所 有 匹配 的 选择 器 的 样式 值 。 计 算 的 结果 是 一 组 实际 用 
于 显示 元 素 的 样式 属性 和 值 。 这 组 值 就 是 元 素 的 “计算 样式 ”(computed 
style) 。 


16.1.2 CSS 历史 


CSS 是 一 个 相对 较 老 的 标准 。CSS1 在 1996 年 12 月 被 采纳 ， 它 定义 了 
具体 的 颜色 、 字 体 、 外 边 距 、 边 框 和 其 他 的 基本 样式 。 类 似 Netscape 4 
和 Internet Explorer 4 这 样 的 老式 浏览 右 极 力 文 持 CSS1。 访 标准 的 第 二 版 
(CSS2) 在 1998 年 5 月 被 采纳 ， 它 定义 了 许多 高 级 特性 ， 最 著名 的 就 是 
支持 元 素 的 绝对 定位 。CSS 2.1 湾 清和 更 正 了 CSS 2， 并 且 它 删除 了 浏览 
器 供应 商 从 未 实现 的 功能 。 现 代 浏 览 器 基本 上 都 完全 支持 CSS2.1， 但 是 
低 于 IE 8 的 正 还 有 一 些 遗 漏 问题 。 


在 CSS 的 后 继 工 作 中 ， 针 对 版 本 3，CSS 规 范 已 经 分 拆 成 各 种 各 样 的 
专门 化 模块 ， 分 别 来 通过 标准 化 进程 。 可 以 在 
http:Wwww.w3.org/Style/CSS/current-work 中 找到 CSS 规 范 和 工作 草案 。 


16.1.3 ”复合 属性 
某 些 经 常 在 一 起 使 用 的 样式 属性 可 以 组 合 起 来 使 用 一 个 特殊 的 复合 


性 。 例 如 ，f ont-family、font-size 和 font-weight 属 性 可 以 用 font 的 复合 
性 值 一 次 性 设置 : 











沿 至 


font:bold italic 24pt helvetica; 





同样 ，border、margin 和 padding 属 性 就 是 为 元 素 的 每 条 边 都 设置 边 
框 、 外 边 距 和 内 边 距 (元 素 和 边框 之 间 的 空间 〉 的 复合 属性 。 例 如 ， 代 
蔡 使 用 border 属 性 ， 可 以 使 用 border-left、border-right、border-top 和 和 
border-bottom 属 性 来 独立 设置 边框 的 每 条 边 。 事 实 上 ， 这 些 属 性 本 身 也 
是 复合 属性 ， 例 如 ， 代 蔡 指 定 border-top， 可 以 分 别 指定 border-top- 
color、border-top-style 和 border-top-width 等 属性 。 





16.1.4” 非 标准 属性 


当 浏 览 器 厂商 实现 非 标准 CSS 属 性 时 ， 它 们 用 将 属性 名 前 加 了 一 个 
厂商 前 级 。Firefox 使 用 -moz-，Chrome 使 用 -webkit-， 而 IE 使 用 -ms-， 它 
们 甚至 用 这 种 方式 来 实现 将 来 会 标准 化 的 属性 。 有 个 例子 是 border- 
radius 属 性 ， 它 用 来 指定 元 素 的 贺 角 ， 在 Firefox 3 和 Safari 4 实验 性 的 实 
现 中 使 用 了 前 级 。 一 旦 标准 已 经 充分 成 熟 ，Firefox 4 和 Safari 5 束 移 除了 
前 级 ， 直 接 支 持 border-radius。 (Chrome 和 Opera 已 经 支持 没有 前 级 的 
border-radius 很 长 一 段 时 间 了 。IE9 也 支持 了 没有 前 级 的 border-radius， 

但 是 在 下 8 中 即使 有 前 级 也 没有 支持 。) 


在 不 同 浏览 器 中 有 不 同名 字 的 CSS 属 性 一 起 工作 ， 你 可 能 发 现 为 一 
个 属性 定义 一 个 类 方式 比较 好 : 

















.radius1i0{ 

border-radius:10px;/* 针 对 现代 浏览 器 */ 
-moz-border-radius:10px;/* 针 对 Firefox 3.x*/ 
-webkit-border-radius:10px;/* 针 对 Safari 3.2 和 4*/ 
} 





像 这 样 定 义 一 个 类 叫 "radius10"， 可 以 将 它 添加 到 任意 需要 10 像 素 
圆 角 的 元 素 的 类 上 。 


16.1.5 CSS 举例 
例 16-1 是 一 个 定义 和 使 用 了 一 个 样式 表 的 HTML 文 件 ， 它 说 明了 标 


签名 、 类 和 ID 的 选择 器 ， 并 且 还 有 一 个 通过 style 属 性 定义 内 联 样 式 的 示 
例 。 图 16-1 显 示 了 它 在 一 个 浏览 器 中 是 如 何 泻 染 的 。 


Malls Firefax wy He 习 
Frefoxv | 口 PPWocaho ssexample html | | 


和 | ocdlhom eo/cssexamele nl i ~ 9 | * 时 省 回 . wv Poedback™ 


Cascading Style Sheets Demo 


THIS PARAGRAPH IS CENTERED 
AND APPEARS IN UFPERCASE LETTERS, 
Here We explicitly use an inline style bo overridea the Uppercase latters, 





图 16-1 一 个 应 用 了 CSS 的 Web 页 面 
例 16-1: 定义 并 使 用 层 半 样式 表 





<head> 

二 style type="text/css"> 之 /指定 标题 文本 显示 为 蓝 色 、 和 斜体 */ 
hi,h2{color:blue;font-style:italic}/* 

* 任 何 class="WARNING" 的 元 素 显示 为 大 号 、 加 黑 文 本 ， 

* 它 有 很 宽 的 外 边 距 、 黄 色 背 景 和 宽 的 红色 边框 

*/ 

.WARNING{ 

font-weight:bold; 

















font-size:150%; 

margin:9 1in 9 1in;/* 上 右 下 左 */ 
background-color:yellow; 
border:solid red 8px; 
padding:10px;/*4 条 边 都 是 10 像 素 */ 









































}/* 

*class="WARNING" 的 元 素 里 面 的 hi 或 h2 标 签 内 的 文本 ， 除 了 蓝 色 ， 还 应 该 居中 显示 

*/ 

.WARNING h1, .WARNING h2{text-align:center}/*id="special" 的 元 素 大 写 、 居 中 显示 */ 
#specialf 


text-align:center; 
text-transform:uppercase 


</style> 

</head> 

<body> 

<hi>Cascading Style Sheets Demo<=/hi1i> 

<div class="WARNING"> 

<h2>warning<=/h2> 

This is a warning! 

Notice how it grabs your attention with its bold text and bright colors. 
Also notice that the heading is centered and in blue italics. 

</div> 

<p id="special"> 

This paragraph is centered<=br> 

and appears in uppercase letters.<=br> 

<span style="text-transform:none"> 

Here we explicitly use an inline style to override the uppercase letters. 
</span> 

</p> 





前 沿 的 CSS 


当 我 在 写本 章 时 ，CSS 正 在 进行 一 场 变 单 ， 现 代 浏 览 器 厂商 正在 实 
现 一 些 强大 的 新 样式 属性 : border-radius、text-shadow、box-shadow 和 
column-count。 还 有 一 个 革命 性 的 CSS 新 特性 是 Web 字 体 : 利用 CSS 的 
@font-face 规 则 可 以 下 载 并 使 用 自 定 义 字 体 。 (参见 
http://code.google.com/webfonts: 可 以 在 Web 上 免费 使 用 所 选 的 字体 ， 并 
提供 了 一 种 从 Google 的 服务 左下 载 的 方便 机 制 。) 


CSS 中 另外 一 种 革命 性 的 发 展 是 CSS 过 渡 。 这 是 一 个 规范 草案 ， 它 
能 自动 将 脚本 化 的 CSS 样 式 转换 成 平 清 的 动画 过 渡 。( 当 广泛 地 实现 
让 它 将 大 大 减少 类 似 在 16.3.1 节 展现 的 需要 CSS 的 动画 代码 。) 除了 
IE，CSS 过 渡 在 现代 浏览 器 中 都 实现 了 ， 但 它 的 样式 属性 仍然 需要 加 三 
商 前 级 。CSS 动 画 的 相关 建议 : 将 使 用 CSS 过 渡 作 为 一 个 定义 更 加 复杂 
的 动画 时 序 的 起 点 。CSS 动 画 当前 只 有 在 基于 Webkit 的 浏览 器 上 实现 。 
过 渡 和 动画 在 本 章 中 都 不 会 提 到 ， 但 Web 开 发 者 应 该 引起 注意 。 


另外 一 个 CSS 草 案 是 CSS 变 换 ，Web 开 发 者 也 应 该 引起 注意 。 它 允 











许 对 任何 元 素 应 用 任意 的 2D 仿 射 变换 《用 一 个 矩阵 表示 旋转 、 缩 放 、 
转换 或 任意 组 合 ) 。 所 有 的 现代 浏览 器 《包括 下 9 及 高 版 本 ) 使 用 厂商 
前 绥 都 文 持 该 草案 。Safari 甚 至 文 持 一 个 允许 3D 变 换 的 扩展 ， 但 是 其 他 
厂商 是 舍 妃 随 它们 的 脚步 还 不 得 而 知 。 


16.2 ”重要 的 CSS 属 性 


对 客户 端 程序 员 来 说 ， 最 重要 的 CSS 特 性 是 那些 指定 文档 中 每 个 元 
素 的 可 见 性 、 尺 寸 和 精确 定位 的 属性 。 其 他 CSS 属 性 允许 指定 堆 释 次 
序 、 透 明度 、 裁 勇 区 域 、 外 边 距 、 内 边 距 、 边 框 和 颜色 。 为 了 脚本 化 
CSS， 理 解 这 些 样式 属性 的 工作 原理 是 非常 重要 的 。 表 格 16-1 做 了 总 
结 ， 在 本 市 以 下 内 容 中 将 做 详细 地 阐述 。 








表 16-1， 重要 的 SS 样式 属性 
属性 

position 

top left 

bottom, right 

width, height 


7-index 


display 

visibility 

clip 

overflow 

margin、 border、 padding 
background 


opacity 


描述 

指定 元 素 的 定位 类 型 

定 元 素 上 、 左 边缘 的 位 轩 

指定 元 素 下 、 右 边缘 的 位 置 

各 定 元 素 的 尺寸 

莉 定 元 素 相对 于 其 他 重 秋元 素 的 “ 堆 各 次 序 ， 定 义 了 元 
素 定位 的 第 三 个 维度 

指定 元 素 是 否 以 及 如 何 显示 

站 定 元 素 是 否 可 见 

定义 元 素 的 “裁剪 区 域 ”， 只 显示 元 素 在 区 域内 的 部 分 
指定 元 素 比分 配 的 空间 要 大 时 的 处 理 方式 

指定 元 素 的 空白 和 边框 

各 定 元 素 的 背景 颜色 或 图 片 

间 定 元 素 的 不 透明 度 【或 半 透 明度 ) ， 它 是 CSS3 的 属性 ， 
有 些 浏览 器 支持 ， 匡 中 另 有 他 法 
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CSS 的 position 属 性 指定 了 应 用 到 元 素 上 的 定位 类 型 ， 如 下 是 4 个 可 


能 出 现 的 属性 值 : 


static 


默认 属性 。 指 定 元 素 按 照常 规 的 文档 内 容 流 (对 多 数 西 方 语言 而 言 
就 是 从 左 往 右 、 从 上 到 下 〉 进行 定位 。 静 态 定位 的 元 系 不 能 使 用 top、 
left 和 类 似 其 他 属性 定位 。 欲 对 文档 元 素 使 用 CSS 定 位 技术 ， 必 先 将 其 
position 属 性 设置 为 除 此 之 外 的 其 他 3 个 属性 值 。 








absolute 


该 值 指定 元 素 是 相对 于 它 包 含 的 元 素 进 行 定位 。 相 对 于 所 有 其 他 的 
元 素 ， 绝 对 定位 的 元 素 是 独立 定位 的 ， 它 不 是 静态 定位 的 元 素 中 文档 流 
的 二 部 分 ， 它 的 定位 要 么 是 相 允 了 最 近 的 定位 窒 先 元 素 ， 要 俊 是 相对 于 
文档 本 身 。 














fixed 


该 值 指定 元 素 是 相对 于 浏览 器 窗口 进行 定位 的 。 固 定 定位 的 元 素 总 
是 显示 在 那里 ， 不 会 随 着 文档 其 他 部 分 而 深 动 。 类 似 绝对 定位 的 元 系 ， 
回 定 定 位 的 元 素 和 所 有 其 他 元 系 古 独立 的 ， 它 不 是 文档 流 的 一 部 分 。 大 
多 数 现代 浏览 需 文 持 回 定 定位 ， 除 了 下 6。 





relative 


当 position 属 性 设置 为 relative， 元 素 按照 常规 的 文档 流 进 行 布局 ， 
它 的 定位 相对 于 它 文 档 流 中 的 位 置 进行 调整 。 系 统 保留 着 元 素 在 正 第 文 
档 流 中 的 空间 ， 不 会 因为 要 填充 空间 而 将 其 各 边 合 拢 ， 也 不 会 将 元 素 从 
新 的 位 置 “ 推 开 ”。 


一 旦 设置 了 元 素 的 position 属 性 为 除了 static 以 外 的 值 ， 就 可 以 通过 
元 素 的 left、top 、right 和 bottom 属 性 的 一 些 组 合 指定 元 素 的 位 置 。 最 党 
用 的 定位 技术 是 使 用 left 和 top 属 性 指定 元 素 的 左边 缘 到 容器 (通常 是 文 
档 本 身 ) 左边 缘 的 距离 ， 元 素 的 上 边缘 到 容器 上 边缘 的 距离 。 例 如 ， 要 
放置 一 个 距离 文档 左 、 上 边缘 各 100 像 素 的 元 素 ， 可 以 在 style 属 性 中 指 
定 如 下 CSS 样 式 : 














<div style="position:absolute;1left:100px;top:100pXx; "> 


如 果 元 际 使 用 绝对 定位 ， 它 的 tbp 和 left 属 性 应 该 解释 为 它 是 相对 于 
其 position 属 性 设置 为 除 static 值 以 外 的 祖先 元 素 。 如 果 绝 对 定位 的 元 妹 


没有 定位 过 的 祖先 ， 则 它 的 top 和 left 属 性 使 用 文档 坐标 进行 度量 一 一 就 
是 相对 于 文档 左上 角 的 偏 移 量 。 如 果 你 想 相 对 于 一 个 属于 常规 文档 流 中 
的 容器 绝对 定位 一 个 元 素 ， 则 将 容器 的 position 指 定 为 relative，top 和 left 
指定 为 Opx。 这 就 让 容器 变 成 了 动态 定位 ， 但 它 仍 留 在 文档 流 中 原来 的 
位 置 。 任 何 绝对 定位 元 素 的 子 元 系 都 相对 于 容器 进行 定位 。 


虽然 使 用 left 和 top 指 定 元 素 的 左上 角 位 置 是 最 常见 的 定位 方法 ， 但 
也 可 以 使 用 bottom 和 right 指 定 元 素 相 对 于 容器 的 下 和 右边 缘 进 行 定位 。 
例如 ， 让 一 个 元 系 的 右 下 角 束 在 文档 的 右 下 角 进 行 定位 “假设 元 素 没 有 
供 套 在 其 他 动态 元 素 中 ) ， 使 用 如 下 样式 : 




















position:absolute;right:QOpx;bottom:Opx; 





定位 一 个 元 素 让 其 右 、 上 边缘 相对 于 窗口 右 、 上 边缘 各 10 像 素 ， 并 
且 不 随 文 档 的 滚动 而 滚动 ， 可 以 使 用 如 下 样式 : 








position:fixed;right:10px;top:10px; 








除了 定位 元 素 以 外 ，CSS 人 允许 指定 它们 的 尺寸 。 这 通常 通过 指定 
width 和 height 样 式 属性 的 值 完成 。 例 如 ， 以 下 HTML 代 码 创 建 了 一 个 绝 
对 定位 的 空 元 素 。 它 的 width、height 和 background-color 属 性 使 得 它 看 上 
去 显示 为 一 个 赣 色 的 小 方块 : 





< div style="position:absolute;top:10px;left:10px; 
width:10px;height:10px;background-color:blue"> 
</div> 





另外 一 种 指定 元 素 的 宽度 的 方法 是 同时 指定 left 和 right 属 性 。 同 
样 ， 通 过 指定 top 和 bottom 属 性 来 指定 元 素 的 高 度 。 但 是 ， 如 果 同 时 指定 
left、right 和 width， 那 么 width 属 性 将 履 新 right 属 性 ;如果 元 素 的 高 度 重 
复 限 定 ，height 属 性 优先 于 bottom 属 性 。 


请 牢记 ， 没 必要 给 每 一 个 动态 元 素 指定 尺寸 ， 某 些 元 素 ( 如 图 片 ) 
具有 国有 尺寸 。 而 且 ， 对 包含 文本 或 其 他 流 式 内 容 的 动态 元 素 通常 指定 
想 要 的 宽度 就 足够 了 ， 让 元 素 内 容 布局 来 自动 决定 它 的 高 度 。 


CSS 指 定位 置 和 大 小 属性 是 有 单位 的 。 在 上 面 的 例子 中 ， 定 位 和 大 
































寸 属性 值 以 "px" 结 尾 ， 代 表 像 素 。 也 可 以 使 用 英寸 ("in") 、 厘 米 
("cm") 、 点 《"pt") 和 字体 行 高 〈"em"， 一 种 当前 字体 行 高 的 度 
i 


相对 于 使 用 上 面 的 单位 来 指定 绝对 定位 和 尺寸 ，CSS 也 允许 指定 元 
素 的 位 置 和 尺寸 为 其 容器 元 素 的 百分比 。 例 如 ， 以 下 HTML 代 码 创 建 了 
一 个 黑 边 框 空 元 素 ， 它 的 宽度 和 高 上 度 为 其 容器 元 素 〈 或 是 浏览 器 窗口 ) 
的 50%， 居 中 显示 : 


wi 











<div style="position:absolute;1left:25%;top:25%;width:50%;height:50%,; 
border:2px solid black'" > 
</div> 





1. 第 三 个 维度 : z-index 


如 你 所 见 ，left、top、right 和 bottom 属 性 是 在 容器 元 素 中 的 二 维 坐 
标 中 指定 X 和 Y 坐 标 。z-index 属 性 定义 了 第 三 个 维度 : 它 人 允许 指 定 元 素 
的 堆 针 次序 ， 并 指示 两 个 或 多 个 重合 元 素 中 的 哪 一 个 应 该 绘制 在 其 他 的 
上 面 。z-index 默 认为 0， 可 以 是 正 或 负 的 整数 。 当 两 个 或 多 个 元 素 重 有 登 
在 一 起 时 ， 它 们 是 按照 从 低 到 高 的 z-index 顺序 绘制 的 。 如 果 重 奢 元 素 的 
z-index 值 一 样 ， 它 们 按照 在 文档 中 出 现 的 顺序 绘制 ， 也 即 最 后 一 个 重 登 
的 元 素 显 示 在 最 上 面 。 


注意 ，z-index 只 对 兄 第 元 素 ( 例 如 ， 同 一 个 容器 的 子 元 素 )〉 应 用 堆 
炙 效 果 。 如 果 两 个 元 素 不 是 兄 第 元 素 之 间 的 重 关 ， 那 么 设置 它们 的 z- 
index 属 性 无 法 决定 哪 一 个 显示 在 最 上 面 。 相 反 , “必须 ”设置 这 两 个 重 阁 
元 素 的 兄弟 容器 的 z-index 属 性 来 达到 目的 。 


非 定 位 元 素 〈 例 如 ， 默 认 使 用 position:static 定 位 ) 总 是 以 防止 重生 
的 方式 进行 布局 ， 因 此 z-index 属性 不 会 应 用 到 它们 上 和 面 。 尽 管 如 此 ， 它 
们 默认 的 z-index 值 为 0， 这 意味 着 z-index 为 正 值 的 定位 元 素 显 示 在 常规 
文档 流 的 上 面 ， 而 z-index 为 负 值 的 定位 元 素 显 示 在 常规 文档 流 的 下 面 。 


2.CSS 定 位 示例 : 文本 阴影 
CSS3 规 范 包 合 一 个 textrshadow 属 性 以 在 文本 下 产生 阴影 效果 。 许 多 


现在 的 浏览 器 都 文 持 该 效果 ， 但 是 可 以 用 CSS 定 位 属性 实现 类 似 的 效 
果 ， 只 要 重复 输出 这 段 文 本 并 重新 定义 以 下 样式 : 


















































<!--text- shadow 属 性 目 动 产生 阴影 效果 - -> 

<span style="text-shadow:3px 3px 1px#888">Shadowed<=/span> 

去 !-- 这 里 我 们 利用 定位 可 以 产生 相同 的 效果 - -> 

<span style="position:relative;"> 

Shadowed<!- -这 里 是 投射 阴影 的 文本 - - > 

<span style="position:absolute;top:3px;left:3px;z-index:-1;color:#888"> 
Shadowed<!-- 这 里 是 阴影 - - > 

</span> 

</span> 









































需要 投射 阴影 的 文本 包 哮 在 相对 定位 的 二 span 二 标签 中 ， 不 用 设置 
其 他 定位 属性 ， 所 以 文本 显示 在 其 正常 的 位 置 上 。 阴 影 位 于 一 个 绝对 定 
位 的 二 span 二 中 ， 它 包含 在 上 面 那 个 相对 定位 的 二 span 二 中 ， 这 样 z- 
index 属 性 确保 阴影 在 其 文本 的 下 面 。 


16.2.2 边框 、 外 边 距 和 内 边 距 
CSS 人 允许 指定 元 素 周 围 的 边框 、 外 边 距 和 内 边 距 。 元 素 的 边框 是 一 


个 围 红 (或 部 分 围绕 ) 元 素 绘制 的 矩形 《或 者 CSS3 中 的 圆 角 定形 ) 
属性 还 允许 指定 边框 的 样式 、 颜 色 和 厚度 : 











border:solid black 1px;/* 绘 制 一 个 1 像素 的 黑色 实 线 边 框 */ 
border:3px dotted red;/* 绘 制 1 




















可 以 用 单独 的 CSS 属 性 指定 边框 的 宽度 、 样 式 和 颜色 ， 也 可 以 指定 
元 素 的 每 条 边 的 边框 。 例 如 ， 要 绘制 元 素 下 面 的 一 条 线 ， 只 要 简单 地 指 
定 它 的 border-bottom 必 性。 甚至 可 以 为 元 素 的 单条 边 指定 宽度 、 样 式 和 
颜色 ， 如 border-top-width 和 border-left-color 属 性 。 


在 CSS3 中 ， 可 以 通过 border-radius 属 性 指定 圆滑 边框 的 所 有 和 角 ， 也 
可 以 用 更 明确 的 属性 名 设置 单独 的 圆 角 。 例 如 : 





border-top-right-radius:50px; 











margin 和 padding 属 性 都 指定 元 素 周 围 的 空白 空间 。 主 要 的 区 别 在 
in 指定 ; i 邻 元 素 之 间 的 空间 ， 而 padding 指 
定 边框 之 内 边框 和 元 素 内 容 之 间 的 空间 。 外 边 距 提供 了 常规 文档 流 
中 《可 能 有 边框 的 ) 元 素 和 它 的 “邻居 ”之 间 的 视觉 空间 。 内 边 距 保持 元 
素 内 容 和 它 的 边框 在 视觉 上 分 离 。 如 果 元 素 内 没有 边框 ， 内 边 距 往往 也 

















征 没 有 必要 的 。 如 果 元 系 是 动态 定位 的 ， 而 不 是 常规 文档 流 的 一 部 分 
它 的 外 边 距 就 无 关 要 骨 了 。 


使 用 margin 和 padding 属 性 指定 元 际 的 外 边 距 和 内 边 距 : 








margin:5px;padding:5px; 





也 可 以 为 元 素 单独 的 边 指定 外 边 距 和 内 边 





margin-left:25px; 
padding-bottom:S5px; 








或 者 可 以 用 margin 和 padding 属 性 直接 为 元 素 所 有 的 4 条 边 指定 外 边 
距 和 内 边 距 。 首 先 指 定 上 边 的 值 ， 然 后 按照 顺 时 针 方 式 设置 上 、 碳 、 
下 和 左边 的 值 。 例如 ， 以 下 代码 显示 了 给 元 素 的 4 条 边 设 置 了 不 同 的 内 
边 距 值 ， 两 种 方式 是 等 价 的 。 














padding:1px 2px 3px 4px;/* 以 上 代码 等 价 于 以 下 4 行 代码 */ 
padding-top:1px; 

padding-right:2px; 

padding-bottom:3px; 

padding-left:4px; 





16.2.3 CSS 盒 模型 和 和 定位 细节 


以 上 描述 的 margin、border 和 padding 等 样式 属性 在 脚本 化 时 很 可 能 
不 经 常 使 用 。 因 为 它们 是 CSS 盒 模型 (box model) 的 一 部 分 ， 而 为 了 真 
正 理 解 CSS 定 位 属性 ， 应 该 理解 这 个 盒 模型 。 


图 16-2 说 明了 CSS 盒 模型 与 有 边框 和 内 边 距 元 素 的 tobp、left、width 
和 height 等 意义 的 视觉 解释 。 


图 16-2 显 示 了 一 个 绝对 定位 的 元 系 舱 套 在 一 个 定位 的 容器 元 素 中 。 
容器 和 包含 的 元 素 都 有 边框 和 内 边 距 ， 图 例 说 明了 指定 容器 元 素 每 条 边 
的 内 边 距 和 边框 宽度 的 CSS 属 性 。 注 意外 边 距 属性 并 没有 图 示 : 外 边 距 
与 绝对 定位 的 元 素 无 关 。 








上 边框 宽度 





图 16-2 CSS 盒 模型 : 边框 、 内 边 距 和 定位 属性 


图 16-2 也 包含 了 其 他 重要 的 信息 。 首 先 ，width 和 height 只 指定 了 元 
素 内 容 区 域 的 尺寸 ， 它 不 包含 元 素 的 内 边 距 或 边框 (或 外 边 距 〉 所 需 的 
任何 额外 空间 。 为 了 确定 有 边框 元 素 在 屏幕 上 的 全 尺寸 ， 必 须 把 元 素 的 
宽度 加 上 左右 两 边 的 内 边 距 和 左右 两 个 边框 宽度 ， 把 元 素 的 高 度 加 上 上 
下 两 边 的 内 边 距 和 上 下 两 个 边框 宽度 。 


其 次 ，left 和 top 属 性 指定 了 从 容器 边框 内 侧 到 定位 元 素 边框 外 侧 的 
距离 。 这 些 属性 不 是 从 容器 内 容 区 域 的 左上 和 角 开 始 度 量 的 ， 而 是 从 容器 
内 边 距 的 左上 和 角 开 始 的 。 同 样 ，right 和 bottom 属 性 是 从 容器 内 边 距 的 右 
下 角 开 始 度量 的 。 


有 一 个 例子 清楚 地 说 明了 这 一 点 。 假 设 已 创建 一 个 在 内 容 区 域 四 周 





有 10 像 素 内 边 距 和 5 像 系 边框 的 动态 定位 的 容 吉 元 素 。 现 假设 要 动态 定 

位 一 个 容器 中 的 子 元 素 。 如 果 将 其 left 属 性 设置 为 "0px"， 你 会 发 现 子 元 

素 的 左边 缘 正 好 徘 在 容 占 左边 框 的 右边 ， 这 样子 元 素 窗 蓄 了 容 紫 的 内 边 

距 ， 本 意 是 要 留 出 空白 (指定 容 右 内 边 距 的 目的 ) ， 而 空白 却 没 了。 

I 就 必须 将 其 left 和 top 属 性 
'10px" 


边框 盒 模 型 和 box-sizing 属 性 


标准 CSS 盒 模型 规定 width 和 height 样 式 属 性 给 定 内 容 区 域 的 尺寸 ， 
并 且 不 包含 内 边 距 和 边框 。 可 以 称 此 盒 模型 为 内 容 合 模 型 ”。 在 老 版 的 
下 里 和 新 版 的 CSS 中 都 有 一 些 例外 ， 在 了 正 6 之 前 和 当 正 ”6 一 8 在 “怪异 模 
式 ” 下 显示 一 个 页 面 时 《和 页面 中 缺少 <!IDOCTYPE>> 或 有 一 个 不 够 严格 
的 doctype 时 ) ，width 和 height 属 性 确 是 包含 内 边 距 和 边框 宽度 的 。 


正 的 行为 是 一 个 bug， 但 古 正 的 非 标准 盒 模型 通 香 也 很 有 用 。 认 识 
到 这 一 点 ，CSS3 引 进 了 box-sizing 属 性 ， 默 认 值 是 content-box， 它 指定 
了 上 面 描述 的 标准 的 盒 模型 。 如 果 蔡 换 为 box-sizing:border-box， 浏览 
将 会 为 那个 元 素 应 用 下 的 盒 模型 ， 即 width 和 height 属 性 将 包含 边框 和 内 
边 距 。 当 想 以 百分比 形式 为 元 素 设 置 总 体 尺 寸 ， 又 想 以 像素 单位 指定 边 
框 和 内 边 距 时 ， 边 框 盒 模 型 特别 有 用 : 

















<div style="box-sizing:border-box;width:50%; 
padding:10px;border:solid black 2px;"> 





box-sizing 属 性 在 当今 所 有 的 浏览 器 中 都 支持 ， 但 是 还 没有 不 带 前 
级 通用 地 实现 。 在 Chrome 和 Safari 中 ， 使 用 -webkit-box-sizing。 在 Firefox 
中 ， 使 用 -moz-box-sizing。 在 Opera 和 IE 8 及 其 更 高 版 本 中 ， 可 以 使 用 不 
带 前 级 的 box-sizing。 


和 边框 盒 模 型 在 未 来 CSS3 中 的 一 个 可 选 方案 是 使 用 盒子 尺寸 的 计算 





<div style="width:calc(50%-12px);padding:10px;border:solid black 2px;"> 





在 IE 9 中 支持 使 用 calc() 计 算 CSS 的 值 ， 在 Firefox 4 为 -moz-calc()。 





16.2.4 ”元 素 显 示 和 可 见 性 


两 个 CSS 属 性 影响 了 文档 元 素 的 可 见 性 : visibility 和 display。 
visibility 属 性 很 简单 ， 当 其 值 设置 为 hidden 时 ， 该 元 素 不 显示 ; 当 其 值 
设置 为 visible 时 ， 该 元 素 显 示 。display 属 性 更 加 通用 ， 它 用 来 为 接收 它 
的 容器 指定 元 素 的 显示 类 型 。 它 指定 元 素 是 否 是 块 状元 素 、 内 联 元 素 、 
列表 项 等 。 但 是 ， 如 果 display 设 置 为 none， 受 影响 的 元 素 将 不 显示 ， 其 
至 根本 没有 布局 。 


visibility 和 display 属 性 之 间 的 差别 可 以 从 它们 对 使 用 静态 或 相当 定 
位 的 元 素 的 影响 中 看 到 。 对 于 一 个 常规 布局 流 中 的 元 素 ， 设 置 visibility 
属性 为 hidden 使 得 元 素 不 可 见 ， 但 是 在 文档 布局 中 仍 保留 了 它 的 空间 。 
类 似 的 元 素 可 以 重复 隐藏 和 显示 而 不 改变 文档 布局 。 但 是 ， 如 果 元 素 的 
display 属 性 设置 为 none， 在 文档 布局 中 不 再 给 它 分 配 空间 ， 它 各 边 的 元 
素 会 合 扰 ， 就 当 它 从 来 不 存在 。 例 如 ， 在 创建 展开 和 折 千 轮廓 的 效果 时 
display 属 性 很 有 用 。 


visibility 和 display 属 性 对 绝对 和 固定 定位 的 元 素 的 影响 是 等 价 的 ， 
因为 这 些 元 素 都 不 是 文档 布局 的 一 部 分 。 然 而 ， 在 隐藏 和 显示 定位 元 素 
时 一 般 首选 visibility 属 性 。 


注意 ， 用 visibility 和 display 属 性 使 得 元 素 不 可 见 没 什么 意义 ， 除 非 
使 用 JavaScript 动 态 设置 这 些 属性 让 元 素 在 某 一 刻 可 见 ! 将 在 本 章 后 续 内 
容 中 看 到 如 何 实 现 这 种 技术 。 


16.2.5” 颜色、 透明 度 和 半 透 明度 


可 以 通过 CSSs 的 color 属 性 指定 文档 元 素 包 含 的 文本 的 颜色 ， 并 可 以 
用 background-color 属 性 指定 任何 元 了 素 的 背景 闫 色 。 早 些 时 候 ， 我 们 看 到 
可 以 用 border-color 或 border 复 合 属 性 指定 元 素 边框 的 颜色 。 


针对 边框 的 讨论 包含 一 些 例子 ， 使 用 常见 颜色 的 英文 名 字 
《如 "red" 和 "black") 来 直接 指定 边框 的 颜色 。CSS 支 持 若 干 英文 颜色 名 
字 ， 但 是 在 CSS 中 更 一 般 的 指定 颜色 的 语法 是 使 用 十 六 进 制 数 分 别 指定 
0 绿 和 蓝 色 分 量 ， 每 个 分 量 可 以 使 用 一 位 或 两 位 数字 。 例 
0: 



























































#000000/* 黑 色 */ 








#fff/* 白 色 */ 
#f00/* 亮 红色 */ 
#404080/* 黑 暗 不 饱和 蓝 色 */ 
#CCC/* 浅 灰色 */ 


























CSS3 也 为 指定 RGBA 色 彩 空间 ( 红 、 绿 、 竟 色 值 加 上 指定 颜色 透明 
度 的 alpha 值 ) 中 的 颜色 定义 了 语法 。 所 有 现代 的 浏览 器 《除了 IE) 都 文 
持 RGBA， 期 竺 在 了 正 ”9 中 也 能 支持 。CSS3 也 定义 了 对 HSL (色相 -饱和 
度 - 值 ) 和 HSLA 颜 色 规范 的 支持 。 它 们 在 Firefox、Safari 和 Chrome 中 都 
支持 ， 除 了 IE。 


CSS 人 允许 指定 元 素 确切 的 位 置 、 尺 寸 、 背 景 颜 色 和 边框 颜色 ， 因 为 
能 绘制 矩形 和 “〈 当 减少 高 度 和 宽度 时 ) 水 平 、 垂 直线 条 它 有 了 基本 的 图 
形 能 力 。 本 书 上 一 版 本 包含 了 一 个 利用 CSS 图 形 的 柱状 图 例子 ， 但 在 本 
书 中 它 被 二 canvas 二 元 素 扩 展 的 属性 所 蔡 代 。 (参见 第 21 章 更 多 关于 脚 
本 化 客户 端 图 形 的 内 容 。) 


除了 background-color 属 性 ， 也 可 以 为 元 素 指定 背景 图 像 。 
background-image 属 性 指定 使 用 的 图 像 ，background-attachment、 
background-position 和 background-repeat 属 性 指定 如 何 绘制 该 图 像 的 一 些 
高 级 细节 。 复 合 属性 background 人 允许 一 起 指定 这 些 属 性 值 。 利 用 这 些 背 
景 图 像 属性 可 以 创建 有 趣 的 视觉 效果 ， 介 绍 它 们 超出 了 本 书 的 范围 。 


如 果 没 有 为 元 素 指定 背景 闫 色 或 图 像 ， 它 的 背景 通常 透明 ， 理 解 这 
点 非常 重要 。 例 如 ， 如 果 一 个 <div> 绝 对 定位 在 常规 文档 流 中 一 些 已 
存在 的 文本 上 方 ， 默 认 情 况 下 ， 文 本 将 透 过 div 二 元 素 显 示 出 来 。 如 
果 <<div 之 同时 包含 了 自己 的 文本 ， 字 母 将 重 登 在 一 起 而 变 得 模糊 不 
清 。 尽 管 如 此 ， 默 认 情 况 下 不 是 所 有 的 元 素 都 是 透明 的 。 例 如 ， 有 具有 透 
明 背 景 的 表单 元 素 看 起 来 不 透明 ， 并 且 元 素 〈 如 <<button 之 ) 有 默认 的 
背景 颜色 。 用 background-color 属 性 可 以 覆盖 默认 颜色 ， 如 果 强 烈 要 求 可 
以 将 其 显 式 设置 为 "transparent"。 


到 目前 为 止 所 讨论 的 透明 度 其 实 是 非 此 即 彼 的 : 元 素 的 背景 不 是 全 
透明 就 是 全 不 透明 的 。 指 定 元 素 〈 内 容 的 前 景 和 背景 ) 为 半 透 明 也 是 可 
能 的 (示例 见 图 16-3) 。 用 CSS3 的 opacity 属 性 来 处 理 ， 该 属性 值 是 0 一 1 
之 间 的 数字 ，1 代 表 100% 不 透明 (默认 值 ) ， 而 0 代表 0% 不 透明 (或 
100% 透 明 ) 。opacity 属 性 在 当今 所 有 浏览 器 中 都 支持 ， 除 了 琅 。IE 提 供 
es IE 特 有 的 flter 属 性 。 让 元 素 75% 不 透明 ， 可 以 使 用 以 
下 CSS 样 式 : 





















































opacity: .75;/* 透 明度 ，CSS3 标 准 属 性 */ 
filter: alpha(opacity- 75);/*IE 透 明度 ， 注 意 没有 小 数 点 */ 






































16.2.6 ”部 分 可 见 : overflow 和 clip 





visibility 属 性 可 以 让 文档 元 素 完全 隐藏 ， 而 overflow 和 clip 属 性 允许 
只 显示 元 素 的 一 部 分 。overflow 属 性 指定 内 容 超出 元 素 的 大 小 (例如 ， 
用 width 和 height 样 式 属 性 指定 ) 时 该 如 何 显 示 。 该 属性 允许 的 值 和 含义 
如 下 所 示 : 


visible 
默认 值 。 如 果 和 需要， 内 容 可 以 洲 出 并 绘制 在 元 素 的 边框 的 外 面 。 
hidden 


裁 王 挥 和 隐藏 淤 出 的 内 容 ， 即 在 元 系 尺 寸 和 定位 属性 值 定 义 的 区 域 
外 不 会 绘制 内 容 。 


scroll 


元 素 一 直 显 示 水 平和 垂 生 滚动 条 。 如 宁 内 容 超 出 元 素 太 寸 ， 人 允许 用 
通过 滚动 来 得 看 额外 的 内 容 。 此 属性 值 负 责 文档 在 计算 机 屏幕 中 的 显 
示 ， 例 如 ， 打 印 纸 质 文档 时 滚动 条 是 没有 意义 的 。 








auto 
滚动 条 只 在 内 容 超 出 元 素 尺 寸 时 显示 ， 而 非 一 直 显 示 。 


overflow 属 性 允许 指定 当 妆容 超 出 元 条 边框 时 该 如 何 显示 ， 而 dlip 属 
性 确切 地 指定 了 应 该 显示 元 素 的 哪个 部 分 ， 它 不 管 元 素 是 否 淤 出。 在 创 
建 元 素 渐进 是 示 的 脚本 效果 时 候 该 必 性 特别 有 用 。 


clip 属 性 的 值 指定 了 元 素 的 裁 甬 区 域 。 在 CSS2 中 ， 裁 甬 区 域 是 矩形 
的 ， 不 过 clip 属 性 的 语法 预 留 了 开放 的 可 能 ， 该 标准 将 来 的 版 本 将 文 持 
除了 矩形 以 外 其 他 形状 的 裁剪 。clip 属 性 的 语法 是 : 











rect(top right bottom left) 





相对 于 元 素 边框 的 左上 角 ，top、right、bottom 和 jleft 4 个 值 指 定 了 裁 
雯 矩形 的 边界 。 例 如 ， 要 只 显示 元 素 的 100x100 像 素 大 小 部 分 ， 可 以 赋 
予 该 元 素 style 属 性 : 








style="clip:rect(Qpx 100px 100px Opx);" 





注意 ， 圆 括号 中 的 4 个 值 是 长 度 ， 所 以 “必须 ”包含 明确 的 单位 ， 如 p 
x 代表 像素 。 不 允许 使 用 百分比 。 可 以 指定 负 值 ， 让 裁剪 区 域 超出 为 元 
素 指定 的 边框 尺寸 。 也 可 以 为 任何 4 个 值 使 用 auto 关 键 字 来 指定 裁剪 区 
域 的 边缘 就 是 元 素 边 框 的 对 应 边缘 。 例 如 ， 用 style 属 性 指定 只 显示 元 素 
最 左边 的 100 像 素 : 











style="clip:rect(auto 100px auto auto);" 





注意 ， 值 之 间 没 有 有 去 号 ， 裁 前 区 域 从 上 边缘 开始 顺 时 针 设 置 。 将 
clip 设 置 为 auto 来 停 用 裁剪 功能 。 


16.2.7 示例 : 重 县 半 透 明 窗口 
本 节 用 一 个 展示 很 多 讨论 过 的 CSS 属 性 的 例子 来 结束 。 例 16-2 用 


CSS 在 浏览 器 窗口 中 创建 深 动 、 重 膨 和 半 透 明 的 视觉 效果 。 视 觉 效 果 如 
图 16-3 所 示 。 
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图 16-3 用 CSS 创 建 的 窗口 
例子 代码 不 包含 JavaScript 代 码 和 事件 处 理 程序 ， 因 此 无 法 和 窗口 进 
《除了 可 以 滚动 它们 ) ， 但 是 足以 证 明 CSS 可 以 达到 的 强大 效 


例 16-2: 用 CSS 显 示 窗 口 





<!DOCTYPE htm1 > 
<head> 
<style type="text/css">/** 


*This is a CSS stylesheet that defines three style rules that we use 

*in the body of the document to create a"window"visual effect. 

*The rules use positioning properties to set the overall size of the window 
*and the position of its components.Changing the size of the window 
*requires careful changes to positioning properties in all three rules. 

di 

div .window{/* 指 定 窗口 的 尺寸 和 边框 */ 

position:absolute;/*position 在 其 他 地 方 指定 */ 
width:300px;height:200px;/* 窗 口 尺寸 ， 不 含 边框 */ 

border:3px outset gray;/* 注 意 3D"outset" 边 框 效果 */ 

} 

div.titlebar{f/* 指 定 标题 栏 的 定位 、 尺 寸 和 样式 */ 

position:absolute;/* 它 是 定位 元 素 */ 
top:0px;height:18px;/* 标 题 栏 18px+ 内 边 距 和 边框 */ 
width:290px;V*290+5px 左 、 右 内 边 距 =300*/ 
background-color:#aaa;/* 标 题 栏 闫 色 */ 

border-bottom:groove gray 2px;/* 标 题 栏 只 有 底部 边框 */ 
padding:3px 5px 2px 5px;/* 顺 时 针 值 :top、right、bottom、left*/ 
font:bold 11pt sans-serif;/* 标 题 栏 字体 */ 

} 

div.content{/* 指 定 窗口 内 容 的 尺寸 、 定 位 和 深 动 */ 
position:absolute;/* 它 是 定位 元 素 */ 
top:25px;/*18px 标 题 +2px 边 框 +3px+2px 内 边 距 */ 
height:165px;/*200px 总 共 -25px 标 题 栏 -10px 内 边 距 */ 
width:290px;/*300px 宽 度 -10px 内 边 距 */ 
padding:5px;/*4 条 边 上 都 有 空间 */ 
overf1low:auto;/* 如 果 需 要 显示 滚动 条 */ 
background-color:#fff;/* 默 认 白 色 背 景 */ 
} 
div.translucent{/* 此 类 让 窗口 部 分 透明 */ 
opacity: .75;/* 透 明度 标准 样式 */ 
filter:alpha(opacity=75);/*IE 的 透明 度 */ 
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} 

</style> 

</head> 

<body> 

二 1!-- 定 义 一 个 窗口 : "window"div 有 一 个 标题 栏 和 - - > 
二 1!-- 其 内 是 一 个 内 容 dijv。 注 意 ， 如 何 设置 定位 - - > 



































二 1!- -一 个 扩充 了 样式 表 的 style 属 性 - - > 
<div class="window"style="left:10px;top:10px;z-index:10; "> 

<div class="titlebar">Test Window=/div> 

<div class="content"> 
1<br>>2<br>>3<br>4<br>5<br>>6<br>7<br>>8<br>9<br>0<br><<!-- 和 若干 行 --> 
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><<!- 展 示 滚 动 - -> 
< /div> 

</div> 















































<div class="titlebar">Another Window=/div> 

<div class="content translucent" 
style="background-color:#ccc;font-weight:bold; "> 

This is another window.Its<tt>z-index</tt>puts it on top of the other one. 
CSS styles make its content area translucent,in browsers that support that. 
</div> 

</div> 








该 例子 主要 的 不 足 是 样式 表 将 所 有 窗口 的 矿 才 固定 了 。 由 于 窗口 的 
标题 栏 和 内 容 部 分 “必须 ”在 整个 窗口 中 精确 地 定位 ， 因 此 一 个 窗口 尺寸 





的 变化 需要 改变 定义 在 样式 表 的 三 条 规则 中 的 各 种 定位 属性 的 值 。 这 对 
于 一 个 静态 HTML 文 档 很 难 做 到 ， 如 果 使 用 脚本 来 设置 所 有 必要 属性 值 
并 不 是 很 难 。 该 主题 将 在 下 一 节 中 探讨 。 


16.3 ”脚本 化 内 联 样 式 


脚本 化 CSS 最 直截了当 的 方法 就 是 更 改 单独 的 文档 元 素 的 style 属 
性 。 类 似 大 多 数 HTML 属 性 ，style 也 是 元 素 对 象 的 属性 ， 它 可 以 在 
JavaScript 中 操作 。 但 是 style 属 性 不 同 寻 常 : 它 的 值 不 是 字符 串 ， 而 是 一 
个 CSSStyleDeclaration 对 象 。 该 style 对 象 的 JavaScript 属 性 代表 了 HTML 
代码 中 通过 style 指 定 的 CSS 属 性 。 例 如 ， 让 元 素 e 的 文本 变 成 大 写 、 加 粗 
和 蓝 色 ， 可 以 使 用 如 下 代码 设置 font-size、font-weight 和 color 等 样式 属 
性 对 应 的 JavaScript 属 性 : 








e.style.fontSize="24pt"; 
e.style.fontweight="bold"; 
e.style.color="blue",; 





名 字 约 定 : JavaScript 中 的 CSS 属 性 


很 多 CSS 样 式 属性 〈 如 fontrsize) 在 名 字 中 包含 连 字 符 。 在 
JavaScript 中 ， 连 字符 是 减 号 ， 所 以 不 能 书写 以 下 表达 式 : 








e.style.font-size="24pt";// 语 法 错误 ! 





此 ，CSSStyleDeclaration 对 象 中 的 属性 名 和 实际 的 CSS 属 性 名 有 
所 区 别 。 如 果 一 个 CSS 属 性 名 包含 一 个 或 多 个 连 字 符 ， 
CSSStyleDeclaration 属 性 名 的 格式 应 该 是 移 除 连 字 符 ， 将 每 个 连 字 符 后 
面 紧 接 着 的 字母 大 写 。 这 样 ，CSS 属 性 border-left-width 的 值 在 JavaScript 
中 通过 borderLeftWidth 属 性 进行 访问 ，CSS 属 性 font-family 的 值 用 如 下 代 
码 访问 : 





e,Style.fontFamily="Sans-SerIf"， 








另外 ， 当 一 个 CSS 属 性 〈 如 float 属 性 ) 在 JavaScript 中 对 应 的 名 字 是 
保留 字 时 ， 在 之 前 加 "css" 前 级 来 创建 合法 的 CSSStyleDeclaration 名 字 。 
由 此 ， 使 用 CSSStyleDeclaration 对 象 的 cssFloat 属 性 来 设置 或 查询 元 素 的 





CSS float 属 性 。 


使 用 CSSStyleDeclaration 对 象 的 style 属 性 时 ， 记 住所 有 的 值 都 应 该 
是 字符 串 。 在 样式 表 或 (HTML ) style 属 性 中 ， 可 如 下 书写 : 





position:absolute;font-family:sans-serif;background-color :#ffffff; 








用 JavaScript 为 元 素 e 完 成 同样 的 事情 ， 需 将 值 放 在 引号 中 : 





e.style.position="absolute"; 
e.style.fontFamily="sans-serif"; 
e.style.backgroundColor="#ffffff"; 





注意 ， 分 号 在 字符 串 的 外 面 ， 它们 只 是 JavaScript 中 常规 的 分 号 ， 
CSS 样 式 表 中 使 用 分 号 并 不 是 用 JavaScript 设 置 的 字符 串 值 的 一 部 分 。 


而 且 ， 记 住所 有 的 定位 属性 都 需要 包含 单位 。 因 此 ， 如 下 代码 设置 
left 属 性 是 错误 的 : 














e.style.1Lleft=300;// 错 误 : 它 是 数字 而 不 是 字符 串 
e.style.left="300";// 错 误 : 缺少 单位 








在 JavaScript 中 设置 样式 属性 就 像 在 样式 表 里 一 样 ， 单 位 是 必需 的 。 
设置 元 素 e 的 left 属 性 值 为 300 像 素 的 正确 做 法 是 : 





e.style.1left="300px",，; 





如 果 通 过 计算 的 值 来 设置 left 属 性 ， 需 要 保证 在 最 后 增加 单位 : 





e.style.left=(xO+left_margin+left_border+left_padding)+"px"; 





Se 作为 加 上 字符 串 单 位 的 副作用 ， 计 算 的 数值 结果 会 转换 成 字 
符 串 。 


回想 一 下 ， 一 些 CSS 属 性 〈 如 margin) 是 margin-top、margin-right、 
margin-bottom 和 和 margin-left 的 复合 属性 。CSSStyleDeclaration 对 象 也 有 与 





之 对 应 的 复合 属性 。 例 如 ， 也 能 像 这 样 设置 margin 属 性 : 





e.style.margin=topMargin+"px"+rightMargin+"px"+bottomMargin+"px"+l]eftMargin+"px"; 





独立 设置 4 个 margin 属 性 值 更 加 便捷 : 





e.style.marginTop=topMargin+"px"; 
e.style.marginRight=rightMargin+"px"; 
e.style.marginBottom=bottomMargin+"px"; 
e.style.marginLeft=leftMargin+"px"; 





HTML 元 素 的 style 属 性 是 它 的 内 联 样式 ， 它 罗 盖 在 样式 表 中 的 任何 
样式 说 明 。 内 联 样式 一 般 在 设置 样式 值 时 非常 有 用 ， 就 像 上 面 的 例子 中 
所 做 的 一 样 。CSSStyleDeclaration 对 象 的 属性 可 以 理解 为 代表 内 联 样 
式 ， 但 是 它 只 返回 有 意义 的 值 :JavaScript 代 人 码 已 经 设置 过 的 值 或 者 
HTML 元 素 显 式 设 置 了 想 要 的 内 联 样式 的 值 。 例 如 ， 文 档 可 能 包含 一 个 
年 浆 表 以 设置 所 有 段 洲 的 下 外 这 距 230 像 系 ， 但 是 当 在 读 取 段 落 元 素 的 
marginLeft 属 性 时 ， 会 得 到 一 个 空 字符 串 ， 除 非 该 段落 有 一 个 style 属 性 
履 盖 了 样式 表 中 的 设置 。 


读 取 元 素 的 内 联 样式 特别 困难 ， 对 style 属 性 来 说 须 包含 单位 ， 对 复 
合 属性 来 说 : 在 真正 使 用 这 些 值 的 时 候 ， 代 码 不 得 不 包含 非 同 寻常 的 
CSS 解 析 能 力 。 总 之 ， 元 素 的 内 联 样式 只 在 设置 样式 的 时 候 有 用 ， 如 宋 
需要 查询 元 素 的 样式 ， 就 要 使 用 计算 样式 ， 这 将 在 16.4 节 中 讨论 。 


有 时 ， 发 现 作为 单个 字符 串 值 来 设置 或 查询 元 素 的 内 联 样式 反而 比 
作为 CSSStyleDeclaration 对 象 更 加 简单 。 为 此 ， 可 以 使 用 元 素 的 
getAttribute() 和 setAttribute() 方 法 或 CSSStyleDeclaration 对 象 的 cssText 属 
性 来 实现 : 























// 两 者 都 可 设置 e 的 样式 属性 为 字符 串 S 
e.setAttribute("style",s); 
e.style.cssText=s,; // 两 者 都 可 查询 元 素 的 内 联 样式 
s=e.getAttribute("style"); 
s=e.style.cssText,; 














CSS 动 画 


脚本 化 的 CSS 最 常见 的 用 途 之 一 是 产生 视觉 动画 效果 。 使 用 
setTimeout() 或 setInterval()( 见 14.1 节 〉 重复 调用 函数 来 修改 元 素 的 内 联 
样式 达到 目的 。 例 16-3 用 两 个 函数 shake0 和 fadeOut(0) 来 举例 说 明 。 
shake0 将 元 系 从 一 边 到 另 一 边 快速 移动 或 “震动 ”， 例 如 ， 当 输入 无 效 的 
数据 时 ， 它 吸引 用 户 的 注意 力 。fadeOutO 通 过 指 定 的 时 间 “〈 默 认 是 500 
守 秒 ) 降低 元 素 的 不 透明 度 ， 使 得 元 素 淡 出 和 消失 。 


例 16-3: CSS 动 画 




















// 将 e 转 化 为 相对 定位 的 元 素 ， 使 之 左右 "震动 " 

// 第 一 个 参数 可 以 是 元 素 对 象 或 者 元 素 的 id 

// 如 果 第 二 个 参数 是 函数 ， 以 e 为 参数 ， 它 将 在 动画 结束 时 调用 
// 第 三 个 参数 指定 e 震 动 的 距离 ， 默 认 是 5 像素 

// 第 四 个 参数 指定 震动 多 久 ， 默 认 是 500 毫 秒 

function shake(e,oncomplete, distance,time){// 句 顶 参 数 
if(typeof e==="string")e=document.getElementById(e); 
if(!time)time=500; 

if(!distance)distance=5; 

var originalStyle=e.style.cssText;// 保 存 e 的 原始 style 
e.style.position="relative";// 使 e 相 对 定位 

var start=(new Date()).getTime();// 注 意 ， 动 画 的 开始 时 间 
animate( );// 动 画 开 始 

// 函 数 检查 消耗 的 时 间 ， 并 更 新 e 的 位 
// 如 果 动 画 完 成 ， 它 将 e 还 原 为 原始 状态 

// 和 否则 ， 它 更 新 e 的 位 置 ， 安 排 它 自身 重新 运行 

function animate(){ 

var now=(new Date()).getTime();// 得 到 当前 时 间 
var elapsed=now-start;// 从 开始 以 来 消耗 了 多 长 时 间 ? 
var fraction=elapsed/time;// 是 总 时 间 的 几 分 之 几 ? 
if(fraction<=1){// 如 果 动 画 未 完成 
// 作 为 动画 完成 比例 的 函数 ， 计 算 e 的 x 位 
// 使 用 正弦 函数 将 完成 比例 乘 以 4pi 

// 所 以 ， 它 来 回 往复 两 次 

var x=distance*Math.sin(fraction*4*Math .PI); 
e.style.left=x+"px";// 在 25 毫 秒 后 或 在 总 时 间 的 最 后 尝试 再 次 
// 目 的 是 为 了 产生 每 秒 49 帧 的 动画 


setTimeout(animate,Math.min(25,time-elapsed)); 
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} 

else{// 否 则 ， 动 画 完 成 
e.style.cssText=originalStyle// 恢 复原 始 样 式 
if(oncomplete)oncomplete(e);// 调 用 完成 后 的 回调 函数 
} 

} 


} 

// 以 毫秒 级 的 时 间 将 e 从 完全 不 透明 淡出 到 完全 透明 
// 在 调用 函数 时 假设 e 是 完全 不 透明 的 
//oncomplete 是 一 个 可 选 的 函数 ， 以 e 为 参数 ， 它 将 在 动画 结束 时 调用 
// 如 果 不 指定 time， 默 认为 500 毫 秒 

// 该 函数 在 IE 中 不 能 正常 工作 ， 但 也 可 以 修改 得 能 工作 ， 

// 除 了 opacity，IE 使 用 非 标 准 的 filter 属 性 
function fadeOut(e,oncomplete, time){ 

if(typeof e==="string")e=document.getElementById(e); 
if(!1time)time=500;// 使 用 Math.sqrt 作 为 一 个 简单 的 “ 缓 动 函数 "来 创建 动画 
// 精 巧 的 非 线 性 ， 一 开始 淡出 得 比较 快 ， 然 后 缓慢 了 一 些 


var ease=Math.sqrt; 






















































































































































































var start=(new Date()).getTime();// 注 意 : 动画 开始 的 时 间 
animate( );// 动 画 开 始 

function animate(){ 

var elapsed=(new Date()).getTime()-start;// 消 耗 的 时 间 
var fraction=elapsed/time;// 总 时 间 的 几 分 之 几 ? 
if(fraction<=1){// 如 果 动 画 未 完成 

var opacity=1-ease(fraction); ge es 
e.style.opacity=String(opacity);// 设 置 在 e 
setTimeout(animate, // 调 度 下 一 帧 
Math.min(25,time-elapsed)); 



































} 

else{// 否 则 ， 动 画 完 成 

e.style.opacity="0";// 使 e 完 全 透明 
if(oncomplete)oncomplete(e);// 调 用 完成 后 的 回调 函数 
} 


} 
} 






































shake() 和 fadeOut() 都 能 接收 可 选 的 回调 函数 作为 第 二 个 参数 ， 如 果 
指定 了 ， 当 动画 结束 时 函数 将 被 调用 。 该 动画 元 素 将 作为 回调 函数 的 参 
下 面 的 HIML 代 码 创 建 了 一 个 按钮 ， 当 单 击 时 ， 它 左右 震 
动 并 淡出 : 





<button onclick="shake(this,fadeOut);">Shake and Fade<=/button> 





注意 ，shake0 和 fadeOut0 示 例 函 数 之 间 非 常 类 似 ， 都 能 作为 类 似 
CSS 属 性 动画 的 模板 。 客 户 端 类 库 〈 如 jQuery) 通常 文 持 预 定义 视觉 效 
果 。 因 此 ， 除 非 想 创建 特别 复杂 的 视 沉 效果 ， 实 际 上 不 用 写 类 似 shake() 
的 动画 函数 。 Scriptaculous 是 早期 -个 值得 注意 的 类 库 ， 它 是 为 
Prototype 框 架设 计 的 。 更 多 信息 请 访问 http://script.aculo.us/ 和 
http://scripty2.com/。 


为 了 避免 使 用 任何 脚本 ，CSS3 的 过 渡 模 块 定义 了 在 样式 表 中 指定 
动画 效果 的 方式 。 例 如 ， 为 了 蔡 代 定义 类 似 fadeOutO) 这 样 的 函数 ， 可 以 
使 用 如 下 的 CSS: 











.fadeable{transition:opacity.5s ease-in} 








它 指定 了 在 任何 时 刻 "fadeable" 元 素 的 opacity 属 性 会 变化 ， 该 变化 会 
在 半 秒 内 用 非 线 性 缓 动 函 数 的 动画 (当前 值 和 新 值 之 间 〉 来 过 渡 。CSS 
过 渡 还 未 标准 化 ， 但 是 已 经 在 Safari 和 Chrome 中 用 -webkit-transition 属 性 
实现 了 一 段 时 间 。 在 写 书 的 这 段 时 间 里 ，EFirefox 4 也 用 -moz-transition 属 


性 支持 过 渡 。 
16.4 查询 计算 出 的 样式 


元 素 的 style 属 性 代表 了 元 素 的 内 联 样式 ， 它 覆盖 所 有 的 样式 表 ， 它 
是 设置 CSS 属 性 值 来 改变 元 素 的 视觉 表现 最 好 的 地 方 。 但 是 ， 它 在 碍 询 
元 素 实际 应 用 的 样式 时 用 处 不 大 。 为 此 ， 你 想 要 使 用 计算 样式 。 元 素 的 
计算 样式 是 一 组 属性 值 ， 它 由 浏览 器 通过 把 内 联 样式 结合 所 有 链接 样式 
表 中 所 有 可 应 用 的 样式 规则 后 导出 (或 计算 ) 得 到 的 ， 它 就 是 一 组 在 显 
示 元 素 时 实际 使 用 的 属性 值 。 类 似 内 联 样 式 ， 计 算 样式 也 是 用 一 个 
CSSStyleDeclaration 对 象 来 表示 的 ， 区 别 是 ， 计 算 样式 是 只 读 的 。 虽 然 
不 能 设置 这 些 样式 ， 但 为 元 素 计 算出 的 CSSStyleDeclaration 对 和 象 确切 地 
决定 了 浏览 器 在 泻 染 元 了 素 时 使 用 的 样式 属性 值 。 


用 浏览 器 窗口 对 象 的 getComputedStyle() 方 法 来 获得 一 个 元 素 的 计算 
样式 。 此 方法 的 第 一 个 参数 束 是 要 获取 其 计算 样式 的 元 素 ， 第 二 个 参数 
也 是 必需 的 ， 通 常 是 null 或 空 字 符 串 ， 但 它 也 可 以 是 命名 CSS 伪 对 象 的 


er a 


字符 串 ， 如 ":before"、":after"、":first-line" 或 ":first-letter"。 























var title=document.getElementById("sectionititle"); 
var titlestyles=window.getComputedStyle(element, null); 


getComputedStyle() 方 法 的 返回 值 是 一 个 CSSStyleDeclaration 对 象 ， 
它 代表 了 应 用 在 指定 元 素 〈 或 伪 对 象 ) 上 的 所 有 样式 。 表 示 计 算 样式 的 
CSSStyleDeclaration 对 象 和 表示 内 联 样 式 的 对 象 之 间 有 一 些 重要 的 区 
列 : 


-计算 样式 的 属性 是 只 读 的 。 


:计算 样式 的 值 是 绝对 值 ， 类 似 百分比 和 点 之 类 相对 的 单位 将 全 部 
转换 为 绝对 值 。 所 有 指定 尺寸 (例如 外 边 距 大 小 和 字体 大 小 ) 的 属性 都 
有 一 个 以 像素 为 度量 单位 的 值 。 该 值 将 是 一 个 冠 以 "px" 后 缀 的 字符 串 ， 
使 用 时 仍然 需要 解析 它 ， 但 是 不 用 担心 单位 的 解析 或 转换 。 其 值 是 颜色 
的 属性 将 以 "rgb(#,#,#)" 或 "rgba(#,#,#,#)" 的 格式 返回 。 


:不 计算 复合 属性 ， 它 们 只 基于 最 基础 的 属性 。 例 如 ， 不 要 查询 
margin 属 性 ， 应 该 使 用 marginLeft 和 marginTop 等 。 





.计算 样式 的 cssText 属 性 未 定义 。 


计算 样式 和 内 联 样式 可 以 同时 使 用 。 例 16-4 定 义 了 scale0 和 
scaleColor0 函 数 。 一 个 用 来 查询 和 解析 指定 元 素 的 计算 文本 尺寸 ， 另 一 
个 查询 和 解析 元 素 的 计算 背景 颜色 。 两 个 函数 都 将 结果 值 按 比例 缩放 并 
作为 元 素 的 内 联 样式 设置 缩放 值 。〈 这 些 函 数 在 IE 8 和 更 早期 的 版 本 中 
无 法 工作 : 下 面 会 讨论 到 ， 这 些 版 本 的 下 不 文 持 getComputedStyle()。) 


例 16-4: 得 询 计 算 样式 与 设置 内 联 样式 


























// 用 指定 的 因子 缩放 元 素 e 的 文本 尺 十 
function scale(e,factor)f{// 用 计算 样式 查询 当前 文本 的 尺寸 

var size=parseInt(window.getcomputedStyle(e,"").fontSize);// 用 内 联 样式 来 放大 尺寸 
e.style.fontSize=factor*size+"px"; 

































































// 用 指定 的 因子 修改 元 素 e 的 背景 颜色 
//factors>1 颜 色 变 浅 ，factors<<1 颜 色 变 暗 

function ScaleCcolor(e,factor){ 

var color=window.getCcomputedStyle(e,""),.backgroundcolor;// 查 询 
var components=color .match(/[\d\.]+/9);// 解 析 r、g、b 和 a 分 量 
for(var i=0;i<3;i++){// 循 环 r、g 和 b 

var Xx=Number(components[i])*factor;// 缩 放 每 个 值 
x=Math.round(Math.min(Math.max(x,0),255));// 设 置 边界 并 取 整 
components[i]=String(x); 


















































} 

if(components.length==3)//rgb( ) 颜 色 
e.style.backgroundCcolor="rgb("+components.join()+")"; 
else//rgba( ) 颜 色 
e.style.backgroundColor="rgba("+components.join()+")"; 











计算 样式 也 具有 欺 驴 性， 查询 它们 得 到 的 信息 也 不 总 是 如 人 所 愿 。 
考虑 一 下 font-family 属 性 : 为 适应 跨 平台 可 移植 性 ， 它 可 以 接受 以 逗号 
隅 开 的 字体 系列 列表 。 当 碍 询 一 个 计算 样式 的 fontFamily 属 性 时 ， 只 能 
得 到 应 用 到 该 元 素 上 具体 的 font-family 样 式 的 值 。 可 能 返回 类 
似 "arial,helvetica,sans-serif" 的 值 ， 它 无 法 告诉 你 实际 使 用 了 哪 种 字体 。 
类 似 地 ， 如 果 没 有 绝对 定位 元 素 ， 试 图 通过 计算 样式 的 top 和 left 属 性 但 
询 它 的 位 置 和 尺寸 通常 会 返回 "auto" 值 。 这 是 个 完全 合法 的 CSS 值 ， 但 
大 概 不 是 你 想 要 的 。 


getComputedStyle() 在 IE 8 或 更 早 的 版 本 中 没有 实现 ， 但 有 望 在 IE 9 
中 实现 。 在 下 中， 每 个 HTML 元 素 有 自己 的 currentStyle 属 性 ， 它 的 值 是 
CSSStyleDeclaration 对 象 。IE 的 currentStyle 组 合 了 内 联 样式 和 样式 表 ， 
但 它 不 是 真正 的 计算 样式 ， 因 为 那些 相对 值 都 没有 转化 成 绝对 值 。 查 询 











正 的 当前 样式 属性 会 返回 珊 相 对 性 单位 “如 “9%? 或 "em'" ) 的 尺寸 或 者 非 
精确 的 颜色 值 (如 "red") 。 


里 然 用 CSS 能 为 文档 对 象 指定 精确 的 位 置 和 和 尺寸， 查询 元 素 的 计算 
样式 却 不 是 判定 元 素 尺 寸 和 位 置 的 完美 方法 。 男 一 个 更 简便 的 方法 请 参 
见 15.8.2 市 。 


16.5 ”脚本 化 CSS 类 


通过 内 联 style 属 性 脚本 化 CSS 样 式 的 一 个 可 选 方案 是 脚本 化 HTML 
的 class 属 性 值 。 改 变 元 素 的 class 就 改变 了 应 用 于 元 素 的 一 组 样式 表 选 择 
器 ， 它 能 在 同一 时 刻 改变 多 个 CSS 属 性 。 例 如 ， 假 设想 让 用 户 对 文档 中 
单独 的 段落 《或 其 他 元 素 ) 引起 注意 。 首 先 ， 为 任意 元 素 定 义 一 个 名 


为 "attention" 的 类 : 



































,attention{/* 吸 引用 户 注 意 力 的 样式 */ 
background-color:yelLlow;/* 黄 色 高 亮 背 景 */ 
/ 











font-weight:bold;/* 粗 体 */ 
border:solid black 2px;/* 黑 框 * 











标识 符 class 在 JavaScript 中 是 保留 字 ， 所 以 HIML 属 性 class 在 
JavaScript 代 码 中 应 该 可 用 于 使 用 className 的 JavaScript 代 码 。 如 下 代码 
设置 和 清除 元 素 的 className 属 性 来 为 元 素 添加 和 移 除 "attention" 类 : 





function grabAttention(e){e.className="attention",;} 
function releaseAttention(e){e.className="";} 








HTML 元 素 可 以 有 多 个 CSS 类 名 ，class 属 性 保存 了 一 个 用 空格 隔 开 
的 类 名 列表 。className 属 性 是 一 个 容易 误解 的 名 字 : classNames 可 能 更 
好 。 上 面 的 函数 假设 className 属 性 只 指定 零 个 或 一 个 类 名 ， 如 果 有 多 
个 类 名 就 无 法 工作 了 。 如 果 元 素 已 经 有 一 个 类 了 ， 为 该 元 素 调用 
grabAttention(0 函 数 将 履 兰 已 存在 的 类 。 


HTML5 解 决 了 这 个 问题 ， 为 每 个 元 素 定 义 了 classList 必 性。 该 属性 
值 是 DOMTokenList 对 象 : 一 个 只 读 的 类 数组 对 象 〈 见 7.11 节 ) ， 它 包含 
元 素 的 单独 类 名 。 但 是 ， 和 数组 元 素 相 比 ，DOMTokenList 定 义 的 方法 
更 加 重要 。add() 和 remove() 从 元 素 的 class 属 性 中 添加 和 清除 一 个 类 名 。 





toggle0 表 示 如 果 不 存在 类 名 就 添加 一 个 ;和 否则， 删除 它 。 最 后 ， 
contains() 方 法 检测 class 属 性 中 是 否 包含 一 个 指定 的 类 名 。 


类 似 其 他 DOM 集 合 类 型 ，DOMTokenList 对 象 “ 实 时 地 ”代表 了 元 素 
类 名 集合 ， 而 并 非 是 在 查询 classList 属 性 时 类 名 的 一 个 静态 快照 。 如 果 
从 元 素 的 classList 属 性 中 获得 了 一 个 DOMTokenList 对 象 ， 然 后 元 素 的 
className 属 性 改变 了 ， 这 些 变 化 在 标识 列表 中 及 时 可 见 。 同 样 ， 改 变 
标识 列表 ， 在 dassName 属 性 中 及 时 可 见 。 


在 写本 书 的 这 段 时 间 里 ， 不 是 现在 所 有 的 浏览 器 都 文 持 classList 属 
性 。 但 是 ， 这 个 重要 的 功能 很 容易 近似 实现 ， 如 例 16-5 所 示 。 使 用 类 似 
人 使 得 许多 脚本 化 CSS 工 
[简单 。 


例 16-5: classList(): 将 className 当 做 一 个 CSS 类 集合 











* 如 果 e 有 classList 属 性 则 返回 它 。 否 则 ， 返 回 一 个 为 e 模 拟 DOMTokenList API 的 对 象 
* 返 回 的 对 象 有 contains()、add()、remove()、toggle() 和 toString() 等 方法 

* 来 检测 和 修改 元 素 e 的 类 集合 。 如 果 classList 属 性 是 原生 支持 的 ， 

* 返 回 的 类 数组 对 象 有 length 和 数组 索引 属性 。 模 拟 DOMTokenList 不 是 类 数组 对 象 ， 

* 但 是 它 个 toArray() 方 法 来 返回 一 个 含 元 素 类 名 的 纯 数组 快照 

pA 

function classList(e){ 

if(e.classList)return e.classList;// 如 果 e.classList 存 在 ， 则 返 臣 
else return new CSSClassList(e);// 否 则 ， 就 伪造 一 个 
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} 

//CSSClassList 是 一 个 模拟 DOMTokenList 的 JavaScript 类 

function CSSClassList(e){fthis.e=e;}// 如 果 e.className 包 含 类 名 c 则 返回 true 和 否则 返回 false 
CssclassList.prototype.contains=function(c){// 检 查 c 是 否 是 合法 的 类 名 
if(c,.length===0||c.indexof("")!=-1) 

throw new Error("Invalid class name:'"+c+"'");// 首 先是 常规 检查 

var classes=this.e.className,; 

if(!classes)return false;//e 不 含 类 名 

if(classes===c)return true;//e 有 一 个 完全 匹配 的 类 名 

// 和 否则 ， 把 c 自 身 看 做 一 个 单词 ， 利 用 正则 表达 式 搜索 c 

/AN\b 在 正则 表达 式 里 代表 单词 的 边界 

return classes.search("\\b"+c+"\\b")!=-1; 

};// 如 果 c 不 存在 ， 将 c 添 加 到 e ,className 中 
CSscClassList.prototype.add=function(c){ 

if(this.contains(c))return;// 如 果 存 在 ， 什 么 都 不 做 

var classes=this.e.className,; 

if(classes&&classes[classes.length-1]!="") 

c=""+C;// 如 果 需 要 加 一 个 空格 

this.e.,className+=c;// 将 c 添 加 到 className 中 

};// 将 在 e.className 中 出 现 的 所 有 c 都 删除 

CSSC1lassList.prototype.remove=function(c){// 检 查 c 是 否 是 合法 的 类 名 
if(c.length===0||c.indexof("")!=-1) 

throw new Error("Invalid class name:'"+c+"'");// 将 所 有 作为 单词 的 c 和 多 余 的 尾随 空格 全 部 删 
















































































































































































var pattern=new RegExp("\\b"+c+"\\b\\s*","g"); 


this.e.className=this.e.className.replace(pattern,""); 
};// 如 果 c 不 存在 ， 将 c 添 加 到 e .className 中 ， 并 返回 true 

// 和 否则 ， 将 在 e.className 中 出 现 的 所 有 c 都 删除 ， 并 返回 false 
CssclassList.prototype.toggle=function(c){ 
if(this.contains(c)){// 如 果 e.className 包 含 c 

this .remove(c);// 删 除 它 

return false; 



































} 

else{f// 和 否则 
this.add(c);// 添 加 它 
return true; 


} 

};// 返 回 e .className 本 身 

CssclassList.prototype.toString=function( ){return this.e.className;};// 返 回 在 
e.className 中 的 类 名 

CSssclassList.prototype.toArray=function(){ 

return this.e.className.match(/\b\w+\b/g)||[]; 


}; 


16.6 ”脚本 化 样式 表 


到 目前 为 止 ， 我们 已 经 看 到 如 何 设置 和 但 询 CSS 样 式 和 单个 元 素 的 
类 名 。 脚 本 化 样式 表 当 然 也 是 可 能 的 。 虽 然 不 经 常 这 么 做 ,但 偶尔 这 却 
非常 有 用 ， 本 将 概述 该 技术 。 


在 脚本 化 样式 表 时 ， 将 会 位 到 两 类 需要 使 用 的 对 象 。 第 一 类 是 元 素 
由 二 style 二 > 和 link 过 元素 表 示 ， 两 种 元 素 包 含 或 引用 样式 表 。 
这 些 是 常规 的 文档 元 素 ， 如 果 它 们 有 id 属 性 值 ， 可 以 用 
Cs getElementById() 函 数 来 选择 它们 。 第 二 类 是 CSSStyleSheet 对 
象 ， 它 表示 样式 表 本 身 。document. ee 人 
对 象 ， 它 包含 CSSStyleSheet 对 象 ， 表 示 与 文档 关联 在 一 起 的 样式 表 。 如 
果 为 定义 或 引用 了 样式 表 的 <style> 或 <link> 元 素 设置 title 属 性 值 ， 该 
title 作 为 对 应 CSSStyleSheet 对 象 的 title 属 性 就 可 用 。 


以 下 几 市 阐述 了 利用 这 些 样式 、 链 接 元 素 和 样式 表 对 象 可 以 做 些 什 
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16.6.1 开启 和 关闭 样式 表 


最 简单 的 脚本 化 样式 表 的 技术 也 是 最 便捷 和 健壮 的 。 入 style 之 、 去 
link 盖 元 系 和 CSSStyleSheet 对 象 都 定义 了 一 个 在 JavaScript 中 可 以 设置 和 
查询 的 disabled 必 性。 顾名思义 ， 如 果 disabled 属 性 为 tue， 样 式 表 惑 被 
浏览 器 关闭 并 忽略 。 


以 下 disableStylesheetO 函 数 说 明 这 一 点 。 如 果 传 递 一 个 数字 ， 函 数 
将 其 当做 document.styleSheets 数 组 中 的 一 个 索引 ， 如 果 传 递 一 个 字符 
串 ， 函 数 将 其 当做 CSS 选 择 器 并 传递 给 document.querySelectorAl110 〈 见 
15.2.5 节 ) ， 然 后 设置 所 有 返回 元 素 的 disabled 属 性 : 





function disableStylesheet(ss){ 


if(typeof ss==="number" 
document.styleSheets[ss].disabled=true; 
elsef{ 


var sheets=document.querySelectorAl]l(ss); 
for(var i=0;i<sheets.length;i++) 
sheets[i].disabled=true; 

} 

} 





16.6.2 查询、 插入 与 删除 样式 表 规则 


除了 样式 表 的 开启 和 关闭 以 外 ，CSSStyleSheet 对 象 也 定义 了 用 来 查 
询 、 插 入 和 删除 样式 表 规 则 的 API。IE 8 及 更 早 版 本 实现 的 API 和 其 他 浏 
览 器 实现 的 标准 API 之 间 有 一 些 轻微 的 区 别 。 


直接 操作 样式 表 通 常 没什么 意义 。 典 型 地 ， 相 对 编辑 样式 表 或 增加 
新 规则 而 言 ， 让 样式 表 保持 静态 并 对 元 素 的 className 属 性 编程 更 好 。 
em 如 果 人 允许 用 户 完 全 控制 页 面 上 的 样式 ， 可 能 就 需要 动态 操作 
工 o 


document.styleSheets[] 数 组 的 元 素 是 CSSStyleSheet 对 象 。 
CSSStyleSheet 对 象 有 一 个 cssRules[] 数 组 ， 它 包含 样式 表 的 所 有 规则 : 





var firstRule=document.styleSheets[0].cssRules[0]; 





下 使 用 不 同 的 属性 名 rules 代 蔡 cssRules。 


cssRules[] 或 rules[] 数 组 的 元 素 为 CSSRule 对 象 。 在 标准 API 中 ， 
CSSRule 对 象 代表 所 有 CSS 规 则 ， 包 含 如 @import 和 @page 等 指令 。 但 
是 ， 在 于 中 ，rules[] 数 组 只 包含 样式 表 中 实际 存在 的 样式 规则 。 


CSSRule 对 象 有 两 个 属性 可 以 很 便捷 地 使 用 。 在 标准 API 中 ， 非 
样式 规则 没有 定义 这 些 属性 ， 当 遍历 样式 表 时 希望 能 跳 过 去 它 。) 
selectText 是 规则 的 CSS 选 择 器 ， 它 引用 一 个 描述 与 选择 器 相关 联 的 样式 





的 可 写 CSSStyleDeclaration 对 象 。 回 想 一 下 ，CSSStyleDeclaration 是 用 来 
表示 内 联 和 计算 样式 的 相同 类 型 。 可 以 利用 它 来 查询 规则 的 样式 值 或 设 
置 新 样式 。 通 常 ， 当 授 历 样式 表 时 ， 你 对 规则 的 文本 比 它 解 析 后 的 表示 
形式 更 感 兴趣 。 此 时 ， 使 用 CSSStyleDeclaration 对 象 的 cssText 属 性 来 获 
得 规则 的 文本 表示 形式 。 


除了 查询 和 修改 样式 表 中 已 存在 的 规则 以 外 ， 也 能 向 样式 表 添 加 和 
从 中 删除 规则 。 标 准 的 API 接 口 定 义 了 insertRule0 和 deleteRule() 方 法 来 
添加 和 删除 规则 : 














document.styleSheets[0].insertRule("Hi{text-weight:bold;}",0); 





IE 不 支持 ipsertRule0 和 deleteRule0， 但 定义 了 大 致 等 效 的 函数 
addRule0 和 removeRuleO0。 《除了 名 字 以 外 ) 仅 有 的 不 同 是 addRule0) 希 
望 选择 器 文本 和 样式 文本 作为 两 个 参数 。 


以 下 代码 遍历 样式 表 的 规则 ， 举 例 说 明了 用 API 对 样式 表 进行 一 些 
可 疑 的 修改 : 








var ss=document.styleSheets[0];// 得 到 第 一 个 样式 表 

var rules=ss.cssRules?ss.cssRules:ss.rules;// 得 到 样式 表 规 则 
for(var i=0;i<rules.length;i++){// 遍 历 这 些 规则 
var rule=rules[i]; 
if(!rule.selectorText)continue;// 跳 过 @import 和 非 样 式 规则 
var selector=rule.selectorText;// 选 择 器 

var ruleText=rule.style.cssText;// 文 本 形式 的 样式 

// 如 果 规 则 应 用 在 hi 元 素 上 ， 也 将 其 应 ] 到 h2 元 素 上 

// 注 意 : 仅 当 选择 器 在 字面 上 为 "h1" 时 这 才 起 作用 
if(selector=="h1"){ 
if(ss.insertRule)ss.insertRule("h2{"+ruleText+"}",rules.1length); 
else if(ss.addRule)ss.addRule("h2",ruleText,rules.1length); 








































































































} 

// 如 果 规 则 设置 了 text-decoration 属 性 ， 则 将 其 删除 
if(rule.style.textDecoration){ 
if(ss.deleteRule)ss.deleteRule(i); 

else if(ss.removeRule)ss.removeRule(i); 


i--;// 调 整 循环 索引 ， 因 为 以 上 的 规则 i+1 现 在 即 为 规则 i 
} 
} 

















16.6.3 ”创建 新 样式 表 


最 后 ， 创 建 整个 新 样式 表 并 将 其 添加 到 文档 是 中 可 能 的 。 在 大 多 数 
浏览 圳 中 ， 可 以 用 标准 的 DOM 技 术 : 只 要 创建 一 个 全 新 的 过 style 之 元 





素 ， 将 其 插入 到 文档 的 头 部 ， 然 后 用 其 innerHTML 属 性 来 设置 样式 表 内 
容 。 但 是 在 。 8 以 及 更 早 版 本 中 ，CSSStyleSheet 对 象 通 过 非 标准 方法 
document.createStyleSheet() 来 创建 ， 其 样式 文本 用 cssText 属 性 值 来 指 

定 。 示 例 说 明 如 例 16-6 所 示 。 


例 16-6: 创建 一 个 新 样式 表 











// 对 文档 添加 一 个 样式 表 ， 用 指定 的 样式 填充 它 
//Styles 参 数 可 能 是 字符 组 或 对 象 。 如 果 它 是 字符 串 ， 就 把 它 作 为 样式 表 的 文本 
// 如 果 它 是 对 象 ， 将 每 个 定义 样式 规则 的 每 个 属性 添加 到 样式 表 中 

// 属 性 名 即 为 选择 器 ， 其 值 即 为 对 应 的 样式 

function addStyles(styles){// 首 先 ， 创 建 一 个 新 样式 表 

Var styleElt,styleSheet,; 

if(document .createSty1leSheet ){// 如 果 定 义 了 IE 的 API， 即 可 使 用 
StyJeSheet=document .createSty]JeSheet () ; 

} 

elsef{ 

var head=document .getElementsByTagName("head")[0] 
styleElt=document.createElement("style");// 新 的 style 二 元 素 
head.appendchild(styleE1lt);// 把 它 插 入 二 head 二 中 

// 现 在 ， 新 的 样式 表 应 该 是 最 后 一 个 
styleSheet=document.styleSheets[document.styleSheets,.length-1] 
} 
// 现 在 向 其 中 插入 样式 

if(typeof styles==="string"){// 参 数 是 样式 表 文 本 
if(styleElt)styleElt.innerHTML=styles; 

else styleSheet.cssText=styles;//IE API 
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} 

else{// 参 数 是 待 插 入 的 单独 的 规则 的 对 象 

Var i=0; 

for(selector in styles)t{ 
if(styleSheet.insertRule){ 

Var rule=selector+"{"+styles[selector]+"}"; 
styleSheet.insertRule(rule,i++); 

} 

elsef{ 
styleSheet.addRule(selector,styles[selector],i++); 
} 


} 
} 
} 











四 例如 ， 可 参照 Eric Meyer 的 《CSS:The Definitive Guide》 
(O'Reilly) 。 


第 17 草 ”事件 处 理 


客户 问 JavaScript 程 序 采 用 了 腊 步 事件 驱动 编程 模型 〈13.3.2 节 有 介 
绍 ) 。 在 这 种 程序 设计 风格 下 ， 当 文档 、 浏 览 器 、 元 素 或 与 之 相关 的 对 
象 发 生 某 些 有 趣 的 事情 时 ，Web 浏 览 堪 就 会 产生 事件 (event) 。 例 如 ， 
当 Web 浏 览 右 加 载 完 文档 、 用 户 把 鼠标 指针 移 到 超 链接 上 或 敲 击 键盘 
时 ，Wweb 浏 览 器 都 会 产生 事件 。 如 果 JavaScript 必 用 程序 关注 特定 类 型 的 
事件 ， 那 么 它 可 以 注册 当 这 类 事件 发 生 时 要 调用 的 一 个 或 多 个 函数 。 请 
注意 ， 这 种 风格 并 不 只 应 用 于 Web 编 程 ， 所 有 使 用 图 形 用 户 界 面 的 应 用 
程序 都 采用 了 它 ， 它 们 静 待 某 些 事情 发 生 〈( 即 ， 它 们 等 待 事件 发 生 )， 
然后 它们 啊 应 。 


请 注意 ， 事 件 本 丑 并 不 是 一 个 需要 定义 的 技术 名 词 。 简 而 言 之 ， 事 
件 束 是 web 浏 览 器 通知 应 用 程序 发 生 了 什么 事情 。 事 件 不 是 JavaScript 对 
象 ， 不 会 出 现在 程序 源 代 码 中 。 当 然 ， 会 有 一 些 事件 相关 的 对 象 出 现在 
源 代码 中 ， 它 们 需要 技术 说 明 ， 因 此 ， 本 章 从 一 些 重 要 的 定义 开始 。 


事件 类 型 (eventtype〉 是 一 个 用 来 说 明 发 生 什 么 类 型 事件 的 字符 
串 。 例 如 ，"mousemove" 表 示 用 户 移动 鼠标 ，"keydown" 表 示 键 盘 上 某 个 
键 被 按 下 ， 而 "load" 表 示 文 档 〈 或 某 个 其 他 资源 ) 从 网 络 上 加 载 完毕 。 
由 于 事件 类 型 只 是 一 个 字符 串 ， 因 此 实际 上 有 时 会 称 之 为 事件 名 字 
(event name) ， 我 们 用 这 个 名 字 来 标识 所 谈论 的 特定 类 型 的 事件 。 现 
代 浏 览 器 支持 许多 事件 类 型 ，17.1 节 会 有 一 个 概述 。 


事件 目标 〈event target) 是 发 生 的 事件 或 与 之 相关 的 对 象 。 当 讲 事 
件 时 ， 我 们 必须 同时 指明 类 型 和 目标 。 例 如 ，window 上 的 load 事 件 或 < 
button 之 元 素 的 click 事 件 。 在 客户 端的 JavaScript 应 用 程序 中 ，Window、 
Document 和 Element 对 象 是 最 常见 的 事件 目标 ， 但 某 些 事件 是 由 其 他 类 
型 的 对 象 触 发 。 例 如 ， 第 18 间 会 介绍 由 XMLHttpRequest 对 象 触发 的 
readystatechange 事 件 。 


事件 处 理 程序 〈event handler) 或 事件 监听 程序 (event listener) 是 
处 理 或 响应 事件 的 函数 出。 应 用 程序 通过 指明 事件 类 型 和 事件 目标 ， 在 
Web 浏 览 器 中 注册 它们 的 事件 处 理 程序 函数 。 当 在 特定 的 目标 上 发 生 特 
定 类 型 的 事件 时 ， 浏 览 器 会 调用 对 应 的 处 理 程序 。 当 对 象 上 注册 的 事件 
处 理 程 序 被 调用 时 ， 我 们 有 时 会 说 浏览 右 “ 触 发 ”(fire、trigger) 和 “ 派 






































发 ”(dispatch) 了 事件 。 有 很 多 注册 事件 处 理 程序 的 方法 ，17.2 节 和 
17.3 节 会 详细 说 明 处 理 程 序 的 注册 和 调用 。 


事件 对 象 〈event object) 是 与 特定 事件 相关 且 包 含有 关 访 事件 详细 
言 妃 的 对 象 。 事 件 对 象 作 为 参数 传递 给 事件 处 理 程序 函数 (不 包括 IE8 
及 之 前 版 本 ， 在 这 些 浏 览 器 中 有 时 仅 能 通过 全 局 变量 event 才 能 得 到 ) 。 
所 有 的 事件 对 象 都 有 用 来 指定 事件 类 型 的 type 属 性 和 指定 事件 目标 的 
target 属 性 。 在 IE8 及 之 前 版 本 中 用 srcElement 而 非 target。) 每 个 事件 
类 型 都 为 其 相关 事件 对 象 定义 一 组 属性 。 例 如 ， 鼠 标 事件 的 相关 对 象 会 
包含 鼠标 指针 的 坐标 ， 而 键盘 事件 的 相关 对 象 会 包含 按 下 的 键 和 辅助 键 
的 详细 信息 。 许 多 事件 类 型 仅 定 义 了 像 type 和 target 这 样 少量 的 标准 属 
性 ， 就 无 法 获取 许多 其 他 有 用 的 信息 。 对 于 这 些 事件 而 言 ， 只 是 事件 简 
单 地 发 生 ， 无 法 得 到 事件 的 详细 信息 。 本 章 没 有 专门 的 小 节 来 介绍 
Event 对 象 ， 而 是 在 介绍 特定 事件 类 型 时 会 说 明 事 件 对 象 的 属性 。 在 第 
四 部 分 描述 特定 事件 类 型 时 会 解释 事件 对 象 的 属性 所 。 


事件 传播 〈event propagation) 是 浏览 器 决定 哪个 对 象 触发 其 事件 处 
理 程序 的 过 程 。 对 于 单个 对 象 的 特定 事件 《〈 比 如 Window 对 象 的 load 事 
件 ) ， 必 须 是 不 能 传播 的 。 当 文档 元 素 上 发 生 某 个 类 型 的 事件 时 ， 然 
而 ， 它 们 会 在 文档 树 上 向 上 传播 或 “ 冒 泡 ”(bubble〉。 如 果 用 户 移 动 鼠 
标 指 针 到 超 链接 上 ， 在 定义 这 个 链接 的 入 a> 元 素 上 首先 会 触发 
mousemove 事 件 ， 然 后 是 在 容器 元 素 上 触发 这 个 事件 ， 也 许 是 <p 元 
素 、<<div> 元 素 或 Document 对 象 本 身 。 有 上 时， 在 Document 或 其 他 容器 
元 素 上 注册 单个 事件 处 理 程序 比 在 每 个 独立 的 目标 元 素 上 都 注册 处 理 程 
序 要 更 方便 。 事 件 处 理 程序 能 通过 调用 方法 或 设置 事件 对 象 属性 来 阻止 
事件 传播 ， 这 样 它 就 能 停止 冒 泡 且 将 无 法 在 容 髓 元 素 上 触发 处 理 程序 。 
17.3.6 节 会 详细 介绍 事件 传播 。 


事件 传播 的 另外 一 种 形式 称 为 事件 捕获 〈event capturing) ， 在 容器 
元 素 上 注册 的 特定 处 理 程序 有 机 会 在 事件 传播 到 真实 目标 之 前 拦截 
(或 “捕获 ”) 它 。IE 8 及 之 前 版 本 不 文 持 事件 捕获 ， 所 以 不 贡 用 它 。 但 
是 ， 当 人 处理 鼠标 拖 放 事件 时 ， 捕 获 或 “和 手 取 ”鼠标 事件 的 能 力 古 必需 的 ， 
例 17-2 会 展示 如 何 实现 这 种 能 力 。 


- 些 事 件 有 与 之 相关 的 默认 操作 。 例 如 ， 当 超 链 接 上 发 生 dlick 事 件 
时 ， 浏 览 器 的 默认 操作 是 按照 链接 加 载 新 页 面 。 事 件 处 理 程序 可 以 通过 
返回 一 个 适当 的 值 、 调 用 事件 对 象 的 茶 个 方法 或 设置 事件 对 象 的 茶 个 属 
性 来 阻止 默认 操作 的 发 生 。 这 有 时 称 为 "取消 ?事件 ，17.3.6 节 会 介绍 






























































有 了 这 些 定义 好 的 术语 ， 现 在 我 们 能 继续 深入 学 习 事件 和 事件 处 
理 。17.1 节 会 概述 浏览 器 支持 的 许多 事件 类 型 。 它 没有 介绍 任何 单个 事 
件 的 详细 信息 ， 而 是 告诉 大 家 Web 应 用 中 有 哪些 事件 类 型 可 以 使 用 。 这 
一 节 交 叉 引 用 了 本 书 的 其 他 部 分 内 容 ， 用 于 演示 一 些 事 件 实战 。 


在 17.1 节 之 后 ， 接 着 两 节 会 介绍 如 何 注册 事件 处 理 程 序 和 浏览 器 如 
何 调用 这 些 事件 处 理 程序 。 由 于 JavaScript 事 件 模 型 的 历史 演变 和 IE 9 之 
前 版 本 缺乏 对 标准 的 支持 ， 因 此 这 两 个 主题 可 能 会 超出 想象 的 复杂 。 





人 
舌 : 


:文档 加 载 和 准备 就 绪 事 件 
鼠标 事件 

鼠标 滚轮 事件 

- 拖 放 事 件 

-键盘 事件 

:文本 输入 事件 


17.1 事件 类 型 


在 We b 初 期 ， 客 户 端 程序 员 只 能 使 用 少 部 分 事件 ， 比 
如 "load"、"dlick" 和 "mouseover" 等 。 这 些 传统 事件 类 型 在 所 有 浏览 器 中 
都 得 到 了 很 好 的 支持 ，17.1.1 节 主要 介绍 这 些 内 容 。 随 着 Web 平 台 发 展 
到 包括 更 强大 的 API， 事 件 集合 随 之 越 来 越 大 ， 没 有 单个 标准 能 定义 完 
整 的 事件 集合 。 在 写本 章 时 ， 浏 览 器 所 支持 的 事件 数量 正在 快速 地 增 
长 ， 这 些 新 事件 有 3 个 来 源 : 


.3 级 DOM 事 件 (DOM Level 3 Events) 规范 ， 经 过 长 期 的 停 消 之 
后 ， 在 W3C 的 主持 下 又 开始 焕发 生机 。17.1.2 节 介绍 DOM 事 件 。 











HIML5 规 范 及 相关 衍生 规范 的 大 量 新 API 定 义 了 新 事件 ， 比 如 历 
和 
这 些 事件 。 


:基于 触摸 和 文 持 JavaScript 的 移动 设备 的 出 现 ， 比 如 iPhone， 它 们 
0 
品 的 例子 。 


注意 ， 许 多 新 事件 类 型 尚未 广泛 实现 ， 定 义 它 们 的 标准 也 依旧 处 于 
草案 阶段 。 接 下 来 的 几 节 将 概述 这 些 事件 ， 但 不 会 列 出 详细 信息 。 本 章 
剩 下 的 部 分 将 全 面 涵盖 事件 处 理 模型 ， 及 大 量 已 经 得 到 恨 好 支持 的 事件 
应 用 示例 。 如 果 大 概 理解 了 事件 的 工作 原理 ， 那 么 就 能 轻松 地 处 理 作 为 
新 Web API 定 义 和 实 现 的 新 事件 类 型 。 


事件 分 3 
事件 大 致 可 以 分 成 几 类 ， 了 解 这 些 分 类 将 有 助 于 理解 和 组 织 如 下 长 
长 的 事件 列表 : 
依赖 于 设备 的 输入 事件 
有 些 事 件 和 特定 输入 设备 直接 相关 ， 比 如 鼠标 和 和 键盘。 包括 庄 


如 "mousedown"、"mousemove"、"mouseup"、"keydown"、"keypress" 和 和 "} 
样 的 传统 事件 类 型 ， 也 包括 像 "touchmove" 和 "gesturechange" 这 样 新 的 触 
摸 事 件 类 型 。 


独立 于 设备 的 输入 事件 


有 些 输入 事件 没有 和 直接 相关 的 特定 输入 设备 。 例 如 ，dlick 事 件 表示 
激活 了 链接 、 投 钮 或 其 他 文档 元 素 ， 这 通 闻 是 通过 鼠标 单 击 实现 ， 但 也 
能 通过 键盘 或 触摸 感知 设备 上 的 手势 来 实现 。 尚 未 广泛 实现 的 textinput 
事件 束 是 一 个 独立 于 设备 的 输入 事件 ， 它 既 能 取代 按键 事件 并 文 持 键盘 
输入 ， 也 可 以 取代 副 切 和 粘贴 与 手写 识别 的 事件 。 


用 户 界 面 事件 


用 户 界 面 事 件 是 较 高 级 的 事件 ， 通 常 出 现在 定义 Web 应 用 用 户 界 面 
的 HIML 表 单元 素 上 。 包 括 文本 输入 域 获取 键盘 焦点 的 focus 事 件 、 用 户 
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改变 表单 元 素 显 示 值 的 change 事 件 和 用 户 单 击 表单 中 的 “提交 ”按钮 的 
submit 事 件 。 


状态 变化 事件 


有 些 事件 不 是 由 用 户 活 动 而 是 由 网 络 或 浏览 喜 活 动 触发 ， 用 来 表示 
某 种 生命 周期 或 相关 状态 的 变化 。 当 文档 完全 加 载 时 ， 在 Window 对 象 
上 会 发 生 load 事 件 ， 这 可 能 是 这 类 事件 中 最 常用 的 。 在 13.3.4 节 讨论 过 
的 DOMContentLoaded 事 件 与 此 类 似 。HTML5 历 史 管 理 机 制 会 〈 见 22.2 
节 ) 触发 popstate 事 件 来 啊 应 浏览 器 的 后 退 按钮 。HTML5 离 线 Web 应 用 
API( 见 20.4 节 ) 包括 online 和 offline 事 件 。 第 18 章 将 展示 当 向 服务 器 请 
求 的 数据 准备 就 绪 时 ， 如 何 利用 readystatechange 事 件 得 到 通知 。 类 似 
地 ， 用 于 读 取 用 户 选 择 本 地 文件 的 新 API《〈 见 22.6.5 节 ) 使 用 
像 "loadstart"、"progress" 和 "loadend" 事 件 来 实现 VO 过 程 的 异步 通知 。 


特定 API 事 件 


HTML5 及 相关 规范 定义 的 大 量 Web API 都 有 自己 的 事件 类 型 。 拖 放 
API《〈 见 17.7 节 ) 定义 了 诸 
如 "dragstart"、"dragenter"、"dragover" 和 和 "drop" 事 件 ， 应 用 程序 想 自 定义 
拖 放 源 〈drag source) 或 拖 放 目标 (drop target) 就 必须 处 理 这 些 相关 事 
件 。HTML5 的 <video> 和 <<audio> 之 元素 〈 见 21.2 节 ) 定义 一 长 串 
像 "waiting"、"playing"、"seeking" 和 "volumechange" 等 相关 事件 ， 这 些 事 
件 通常 仅 用 于 Web 应 用 ， 这 些 Web 应 用 和 希望 为 视频 和 音频 的 播放 定义 自 
定义 控件 。 

计时 器 和 错误 处 理 程 序 

己 经 在 第 14 章 介绍 过 的 计时 器 (timer〉 和 错误 处 理 程序 (error 
handler) 属于 客户 端 JavaScript 异 步 编程 模型 的 部 分 ， 并 有 相似 的 事件 。 
虽然 本 章 不 会 讨论 计时 器 和 错误 处 理 程序 ， 但 思考 它们 同事 件 处 理 之 间 
He 所 以 在 本 章 的 语 境 中 重读 14.1 人 和 14.6 节 会 发 现 很 有 
又。 


17.1.1 传统 事件 类 型 


处 理 鼠 标 、 键 盘 、HTML 表 单 和 Window 对 象 的 事件 都 是 web 应 用 中 
最 常用 的 ， 它 们 已 经 存在 很 长 的 时 间 并 得 到 了 广泛 的 文 持 。 接 下 来 会 说 

















明 这 类 事件 的 许多 重要 详细 信息 。 
1. 表 单 事件 


回 到 Web 和 JavaScript 的 早期 ， 表 单 和 超 链接 都 是 网 页 中 最 早 支 持 肢 
本 的 元 素 。 这 就 意味 着 表单 事件 是 所 有 事件 类 型 中 最 稳定 且 得 到 恨 好文 
持 的 那 部 分 。 当 提交 表单 和 重 置 表单 时 ， 雪 form> 元 素 会 分 别 触发 
submit 和 reset 事 件 。 当 用 户 和 类 按钮 表单 元 素 〈 包 括 单 选 按钮 和 复 选 
框 ) 交互 时 ， 它 们 会 发 生 click 事 件 。 当 用 户 通 过 输入 文字 、 选 择 选 项 或 
选择 复 选 框 来 改变 相应 表单 元 素 的 状态 时 ， 这 些 通常 维护 某 种 状态 的 表 
单元 素 会 触发 change 事 件 。 对 于 文本 输入 域 ， 只 有 用 户 和 表单 元 素 完 成 
交互 并 通过 Tab 键 或 单 击 的 方式 移动 焦点 到 其 他 元 素 上 时 才 会 触发 
change 事 件 。 啊 应 通过 键盘 改变 焦点 的 表单 元 素 在 得 到 和 失去 焦点 时 会 
分 别 触发 ftocus 和 blur 事 件 。 


15.9.3 节 涵 凋 了 所 有 表单 相关 事件 的 详细 信息 。 不 过 ， 这 里 还 有 一 
些 进 一 步 说 明 。 


通过 事件 处 理 程序 能 取消 submit 和 reset 事 件 的 默认 操作 ， 某 些 click 
事件 也 是 如 此 。focus 和 blur 事 件 不 会 冒 泡 ， 但 其 他 所 有 表单 事件 都 可 
以 。 正 定义 了 focusin 和 focusout 事 件 可 以 冒 泡 ， 它 们 可 以 用 于 人 奉 代 foucs 
和 blur 事 件 。jQuery 库 〈 见 第 19 章 ) 为 不 支持 focusin 和 focusout 事 件 的 浏 
览 器 模拟 了 这 两 个 事件 ， 同 时 3 级 DOM 事 件 规 范 也 正在 标准 化 它们 。 


最 后 注意 ， 无 论 用 户 何 时 输入 文字 〈 通 过 键 往 或 剪 切 和 粘贴 ) 到 到 
textarea 这 和 其 他 文本 输入 表单 元 素 ， 除 正 外 的 浏览 器 都 会 触发 input 事 
件 。 不 像 change 事 件 ， 每 次 文字 插入 都 会 触发 input 事 件 。 遗 憾 的 是 ， 
input 事 件 的 事件 对 象 没 有 指定 输入 文本 的 内 容 。〔 稍 后 介绍 的 textinput 
事件 将 会 成 为 这 个 事件 的 有 用 蔡 代 方案 。) 

2.Window 事 件 

Window 事 件 是 指 事件 的 发 生 与 浏览 器 窗口 本 身 而 非 窗 口中 显示 的 
但 是 ， 这 些 事件 中 有 一 些 会 和 文档 元 素 上 发 生 
和 事件 同名 。 


load 事 件 是 这 些 事件 中 最 重要 的 一 个 ， 当 文档 和 其 所 有 外 部 资源 
《比如 图 片 ) 完全 加 载 并 显示 给 用 户 时 就 会 触发 它 。 有 关 load 事 件 的 讨 










































































论 贯 罕 整 个 第 13 章 。DOMContentLoaded 和 readystatechange 是 load 事 件 的 
蔡 代 方案 ， 妆 文档 和 其 元 素 为 操作 准备 就 红 ， 但 外 部 资源 完全 加 载 完 毕 
之 前 ， 浏 览 器 就 会 尽早 触发 它们 。17.4 节 有 这 些 与 文件 加 载 相 关 事 件 的 
示例 。 


unload 事 件 和 load 相 对 ， 当 用 户 离 开 当 前 文档 转向 其 他 文档 时 会 触 
发 它 。unload 事 件 人 处 理 程序 可 以 用 于 保存 用 户 的 状态 ， 但 它 不 能 用 于 取 
消 用 户 转 向 其 他 地 方 。beforeunload 事 件 和 unload 类 似 ， 但 它 能 提供 询问 
用 户 是 否 确定 离开 当前 页 面 的 机 会 。 如 果 beforeunload 的 处 理 程序 返回 
字符 串 ， 那 么 在 新 页 面 加 载 之 前 ， 字 符 串 会 出 现在 展示 给 用 户 确认 的 对 
话 框 上 ， 这 样 用 户 将 有 机 会 取消 其 跳 转 而 留 在 当前 页 上 。 


Window 对 象 的 onerror 属 性 有 点 像 事 件 处 理 程 序 ， 当 JavaScript 出 错 
时 会 触发 它 。 但 是 ， 它 不 是 真正 的 事件 处 理 程 序 ， 因 为 它 能 用 不 同 的 参 
数 来 调用 。 更 多 详细 信息 请 看 14.6 节 。 


像 <img> 元 素 这 样 的 单个 文档 元 系 也 能 为 1oad 和 error 事 件 注 册 处 
理 程序 。 当 外 部 资源 (例如 图 片 ) 完 全 加 载 或 友 生 阻止 加 载 的 错误 时 整 
会 触发 它们 。 某 些 浏 览 器 也 支持 abort 事 件 (HTML5 将 其 标准 化 )， 当 
图 片 (或 其 他 网 络 资 源 ) 因为 用 户 停 止 加 载 进 程 而 导致 失 败 束 会 触发 
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前 面 介 绍 的 表单 元 素 的 focus 和 blur 事 件 也 能 用 做 Window 事 件 ， 当 
浏览 器 窗口 从 操作 系统 中 得 到 或 失去 键盘 焦点 时 会 触发 它们 。 


最 后 ， 当 用 户 调整 浏览 器 窗口 大 小 或 深 动 它 时 会 触发 resize 和 scroll 
事件 。scrol 事 件 也 能 在 任何 可 以 滚动 的 文档 元 素 上 触发 ， 比 如 那些 设 
置 CSS 的 overflow 属 性 〈 见 16.2.6 节 ) 的 元 素 。 传 递 给 resize 和 scroll 事 件 
处 理 程序 的 事件 对 象 是 一 个 非常 普通 的 Event 对 象 ， 它 没有 指定 调整 大 
小 或 发 生 滚动 的 详细 信息 属性 ， 但 可 以 通过 15.8 节 介绍 的 技术 来 确定 新 
窗口 的 尺寸 和 滚动 条 的 位 置 。 


3. 鼠 标 事件 


当 用 户 在 文档 上 移动 或 单 击 鼠 标 时 都 会 产生 鼠标 事件 。 这 些 事件 在 
鼠标 指针 所 对 应 的 最 深 磷 套 元 素 上 触 友 ， 但 它们 会 冒 泡 直 到 文档 最 项 
层 。 传 递 给 鼠标 事件 处 理 程序 的 事件 对 象 有 属性 集 ， 它 们 描述 了 当 事 件 
发 生 时 鼠标 的 位 置 和 按键 状态 ， 也 指明 当时 是 否 有 任何 辅助 键 按 下 。 























clientX 和 clientY 属 性 指定 了 鼠标 在 窗口 坐标 中 的 位 置 ，button 和 which 属 

性 指定 了 按 下 的 鼠标 键 是 哪个 。 【无论 如 何 请 看 Event 参 考 页 ， 因 为 这 

些 属 性 难以 简单 使 用 。) 当 键 盘 辅 助 键 按 下 时 ， 对 应 的 属性 altkey、 

ctrIKey、metaKey 和 shiftKey 会 设置 为 tue。 而 对 于 click 事 件 ，detail 属 性 
中 定 了 其 是 单 击 、 双 击 还 是 三 击 。 


用 户 每 次 移动 或 拖 动 鼠 标 时 ， 会 触发 mousemove 事 件 。 这 些 事件 的 
发 生 非 常 频 索 ， 所 以 mousemove 事 件 处 理 程序 一 定 不 能 触发 计算 密集 型 
任务 。 当 用 户 按 下 或 释放 鼠标 按键 时 ， 会 触发 mousedown 和 mouseup 事 
件 。 通 过 注册 mousedown 和 mousemove 事 件 处 理 程序 ， 可 以 探测 和 啊 应 
鼠标 的 拖 动 。 合 理 地 这 样 做 能 够 捕获 鼠标 事件 ， 其 至 当 和 鼠标 从 开始 元 素 
0 17.5 节 包含 一 个 处 理 拖 
动 的 示例 。 


人 mouseup 事 件 队 列 之 后 ， 浏 览 器 也 会 触发 click 事 
件 。 之 前 介绍 过 click 事 件 是 独立 于 设备 的 表单 事件 ， 但 实际 上 它 不 仅仅 
在 表单 元 素 上 触发 ， 它 可 以 在 任何 文档 元 素 上 触发 ， 同 时 传递 拥有 之 前 
A 如 果 用 户 在 相当 短 的 时 间 内 

续 两 次 单 击 鼠标 按键 ， 跟 在 第 二 个 click 事 件 之 后 是 dblclick 事 件 。 当 单 
浏览 器 通常 会 显示 上 下 文 菜 单 (context menu) 。 在 显 
示 有 菜单 之 前 ， 它 们 通常 会 触及 contextmenu 事 件 ， 而 取消 这 个 事件 就 可 以 
咀 止 菜单 的 显示 。 这 个 事件 也 是 获得 鼠标 右 击 通知 的 简单 方法 。 


当 用 户 移动 记 标 指针 从 而 使 它 悬 停 到 新 元 素 上 时 ， 浏 览 堪 就 会 在 该 
元 素 上 触 有 mouseover 事 件 。 当 鼠标 移动 指针 从 而 使 它 不 再 巧 停 在 某 个 
元 素 上 时 ， 浏 览 器 就 会 在 该 元 素 上 触发 mouseout 事 件 。 对 于 这 些 事 件 ， 
事件 对 象 将 有 relatedTarget 属 性 指明 这 个 过 程 涉及 的 其 他 元 素 。 到 
Event 参 考 页 查看 relatedTarget 属 性 的 下 等 效 属性 。) mouseover 和 
mouseout 事 件 和 这 里 介绍 的 所 有 鼠标 事件 一 样 会 旱 泡 。 但 这 通常 不 方 
便 ， 因 为 当 触 发 mouseout 事 件 处 理 程序 时 ， 你 不 得 不 检查 鼠标 是 否 真 的 
离开 目标 元 素 还 是 仅仅 是 从 这 个 元 素 的 一 个 子 元 素 移 动 到 另 一 个 。 正 因 
为 如 此 ， 正 提供 了 这 些 事件 的 不 冒 泡 Rs 
JQuery 模 拟 非 正 的 浏览 器 中 这 些 事件 的 文 持 〈 见 第 19 章 ) ， 同 时 3 级 
DOM 事 件 规范 把 它们 标准 化 了 。 


当 用 户 滚 动 鼠 标 滚轮 时 ， 浏 览 器 触发 mousewheel 事 件 〈 或 在 Firefox 
中 是 DOMMouseScroll 事 件 ) 。 传 递 的 事件 对 象 属性 指定 滚轮 转动 的 大 
小 和 方向 。3 级 DOM 事 件 规范 正在 标准 化 一 个 更 通用 的 多 维 wheel 事 


















































件 ， 一 旦 实现 将 取代 mousewheel 和 DOMMouseScroll 事 件 。17.6 节 包含 一 
个 mousewheel 事 件 示例 。 


4. 键 盘 事 件 


当 键 盘 聚 焦 到 Web 浏 览 器 时 ， 用 户 每 次 按 下 或 释放 键盘 上 的 按键 时 
都 会 产生 事件 。 键 盘 快 捷 键 对 于 操作 系统 和 浏览 器 本 身 有 特殊 意义 ， 它 
们 经 常 被 操作 系统 或 浏览 器 “ 吃 挥 "并 对 JavaScript 事 件 处 理 程序 不 可 见 。 
无 论 任何 文档 元 素 获取 键盘 焦点 都 会 触发 键盘 事件 ， 并 且 它 们 会 冒 泡 到 
Document 和 Window 对 象 。 如 果 没 有 元 素 获 得 焦点 ， 可 以 直接 在 文档 上 
触发 事件 。 传 递 给 键盘 事件 处 理 程序 的 事件 对 象 有 keyCode 字 段 ， 它 指 
定 按 下 或 释放 的 键 是 哪个 。 除 了 keyCode， 键 往事 件 对 象 也 有 altKey、 
ctrIKey、metaKey 和 shiftKey， 摘 述 键盘 辅助 键 的 状态 。 


keydown 和 keyup 事 件 是 低级 键盘 事件 ， 无 论 何 时 按 下 或 释放 按键 
(甚至 是 辅助 键 ) 都 会 触发 它们 。 当 keydown 事 件 产 生 可 打印 字符 时 ， 
在 keydown 和 keyup 之 间 会 触发 另外 一 个 keypress 事 件 。 当 按 下 键 重 复 产 
生字 符 时 ， 在 keyup 事 件 之 前 可 能 产生 很 多 keypress 事 件 。keypress 是 较 
高 级 的 文本 事件 ， 其 事件 对 象 指定 产生 的 字符 而 非 按 下 的 键 。 


所 有 浏览 器 都 支持 keydown、keyup 和 keypress 事 件 ， 但 有 一 些 互 用 
性 问题 ， 因 为 事件 对 象 的 keyCode 属 性 值 从 未 标准 化 过 。3 级 DOM 事 件 
规范 尝试 解决 之 前 的 互 用 性 问题 ， 但 尚未 实施 。17.9 节 包含 处 理 
keydown 事 件 的 示例 ，17.8 节 包含 处 理 keypress 事 件 的 示例 。 


17.1.2 DOM 事 件 


W3C 开 发 3 级 DOM 事 件 规范 已 经 长 达 十 年 之 久 。 在 写本 章 时 ， 饭 已 
经 做 了 大 量 修 订 使 其 适合 当前 浏览 器 的 现状 ， 现 在 终于 处 于 标准 化 
的 “最 后 征集 工作 草案 ”(]last call working draft) 阶段 。 它 标准 化 了 前 面 
介绍 的 许多 传统 事件 ， 同 时 增加 了 这 里 介绍 的 一 些 新 事件 。 这 些 新 事件 
ee 泛 文 持 ， 一 旦 标准 确定 ， 我 们 惑 期 望 浏览 右 厂 商 能 实现 
| 


如 上 所 述 ，3 级 DOM 事 件 规范 标准 化 了 不 冒 泡 的 focusin 和 focusout 
事件 来 取代 冒 泡 的 focus 和 blur 事 件 ， 标 准 化 了 冒 泡 的 mouseenter 和 
mouseleave 事 件 来 取代 不 冒 泡 的 mouseover 和 mouseout 事 件 。 此 版 本 的 标 
准 也 弃 用 了 大 量 由 2 级 DOM 事 件 规范 定义 但 未 得 到 广泛 实现 的 事件 类 
































型 。 浏 览 器 依旧 允许 产生 像 DOMActivate、DOMEFocusIn 和 
DOMNodeInserted 这 样 的 事件 ， 但 它们 不 再 必要 ， 同 时 本 书 的 文档 也 不 
会 列 出 它们 印 。 


3 级 DOM 事 件 规范 中 新 增 内 容 有 通过 wheel 事 件 对 二 维 鼠 标 滚 轮 提 
供 标准 支持 ， 通 过 textinput 事 件 和 传递 新 KeyboardEvent 对 象 作为 参数 给 
0 、keyup 和 keypress 的 事件 处 理 程序 来 给 文本 输入 事件 提供 更 好 

和 支持 。 


wheel 事 件 的 处 理 程序 接收 到 的 事件 对 象 除 了 所 有 普通 鼠标 事件 属 
性 ， 还 有 deltaX、deltaY 和 deltaZ 属 性 来 报告 三 个 不 同 的 鼠标 深 轴 。 大 多 
数 鼠 标 深 轮 是 一 维 或 两 维 的 ， 并 不 使 用 deltaZ。 更 多 关于 mousewheel 事 
件 的 内 容 请 参见 17.6 节 。 


如 上 所 述 ，3 级 DOM 事 件 规范 定义 了 keypress 事 件 ， 但 不 赞成 使 用 
它 而 使 用 称 为 textinput 的 新 事件 。 传 递 给 textinput 事 件 处 理 程 序 的 事件 对 
象 不 再 有 难以 使 用 的 数字 keyCode 属 性 值 ， 而 有 指定 输入 文本 字符 串 的 
data 属 性 。textinput 事 件 不 是 键盘 特定 事件 ， 无 论 通 过 键盘 、 剪 切 和 粘 
贴 、 拖 放 等 方式 ， 每 当 发 生 文 本 输入 时 束 会 触 上 友 它 。 规 范 定 义 了 事件 对 
象 的 inputMethod 属 性 和 一 组 代表 各 种 文本 输入 种 类 的 稼 量 〈 键 盘 、 粘 
贴 、 拖 放 、 手 写 和 语音 识别 等 ) 。 在 写本 章 时 ，Safari 和 Chrome 使 用 混 
合 大 小 写 的 textInput 来 文 持 这 个 事件 版 本 ， 其 事件 对 象 有 data 属 性 但 没 
有 inputMethed 属 性 。17.8 节 包含 使 用 textInput 事 件 的 示例 。 


新 DOM 标 准 通 过 在 事件 对 象 中 加 入 新 的 key 和 char 属 性 来 简化 
keydown、keyup 和 keypress 事 件 ， 这 些 属性 都 是 字符 串 。 对 于 产生 可 打 
印字 符 的 键盘 事件 ，key 和 char 值 将 等 于 生成 的 文本 。 对 于 控制 键 ，key 
属性 将 会 是 像 标 识 键 的 "Enter"、"Delete" 和 "Left" 这 样 的 字符 串 ， 而 char 
属性 将 是 null， 或 对 于 像 Tab 这 样 的 控制 键 有 一 个 字符 编码 ， 它 将 是 按键 
产生 的 字符 串 。 在 写本 章 时 ， 尚 未 有 浏览 器 文 持 Kkey 和 char 属 性 ， 但 如 果 
key 属 性 实现 了 ， 例 17-8 将 使 用 它 。 


17.1.3 HTML5 事 件 














HTML5 及 相关 标准 定义 了 大 量 新 的 Web 应 用 API( 见 第 22 章 ) ， 其 
中 许多 API 都 定义 了 事件 。 本 节 列 出 并 简要 介绍 这 些 HTML5 和 Web 应 用 
事件 。 其 中 一 些 事件 现在 已 经 可 以 开始 使 用 ， 但 更 详细 的 信息 在 本 书 的 
其 他 地 方 ， 另 外 一 些 尚 未 得 到 广泛 实现 ， 也 没有 详细 文档 。 








广泛 推广 的 HIML5 特 性 之 一 是 加 入 用 于 播放 音频 和 视频 的 生 audio 
> 和 <<video> 元 素 。 这 些 元 素 有 长 长 的 事件 列表 ， 它 们 触发 各 种 天 于 
网 络 事件 、 数 据 缓冲 状况 和 播放 状态 的 通知 : 


canplay 10adeddata playing stalled 
canplaythrough loadedmetadata progress suspend 
durationchange loadstart ratechange timeupdate 
emptied pause seeked volumechange 
ended play seeking waiting 


传递 给 媒体 事件 处 理 程序 的 事件 对 象 普 通 晶 没有 特殊 属性 ，target 
属性 用 于 识别 二 audio 宝 和 二 video 放 元 素 ， 然 而 这 些 元 素 有 许多 相关 的 
属性 和 方法 。21.2 节 有 更 多 关于 这 些 元 素 及 其 属性 和 事件 的 详细 内 容 。 


HTML5 的 拖 放 API 人 允许 JavaScript 应 用 参与 基于 操作 系统 的 拖 放 操 
人 实现 Web 和 原生 应 用 间 的 数据 传输 。 该 API 定义 了 如 下 7 个 事件 类 
型 : 








dragstart drag dragend 
dragenter dragover dragleave 
drop 


触发 拖 放 事件 的 事件 对 象 和 通过 鼠标 事件 发 送 的 对 象 类 似 ， 其 附加 
属性 dataTransfer 持 有 DataTransfer 对 象 ， 它 包含 关于 传输 的 数据 和 其 中 
可 用 的 格式 的 信息 。17.7 节 将 对 HTML5 拖 放 API 进 行 说 明和 演示 。 


HTML5 定 义 了 历史 管理 机 制 〈 见 22.2 节 ) ， 它 允许 Web 应 用 同 浏览 
器 的 返回 和 前 进 按钮 交互 。 这 个 机 制 洲 水 及 的 事件 是 hoshchange 和 和 
popstate。 这 些 事 件 是 类 似 load 和 unload 的 生命 周期 通知 事件 ， 它 在 
Window 对 象 上 触发 而 非 任何 单独 的 文档 元 素 。 


HTML5 为 HTML 表 单 定义 了 大 量 的 新 特性 。 除 了 标准 化 前 面 介绍 的 
表单 输入 事件 外 ，HTML5 也 定义 了 表单 验证 机 制 ， 包 括 当 验 证 失败 时 
在 表单 元 素 上 会 触及 invalid 事 件 。 除 Opera 外 的 浏览 器 厂商 已 经 慢 慢 实 
现 HTML5 的 新 表单 特性 和 事件 ， 但 本 书 没有 涵盖 它们 。 











HTML5 包 含 了 对 离线 Web 应 用 的 支持 〈 见 20.4 节 ) ， 它 们 可 以 安装 
到 本 地 应 用 缓存 中 ， 所 以 即使 浏览 堪 离 线 时 它们 依旧 能 运行 ， 比 如 当 移 
动 设备 不 在 网 络 范 围 内 时 。 相 关 的 两 个 最 重要 事件 是 offline 和 online， 无 
论 何 时 浏览 器 失去 或 得 到 网 络 连接 都 会 在 Window 对 象 上 触发 它们 。 标 
准 还 定义 了 大 量 其 他 事件 来 通知 应 用 下 载 进度 和 应 用 缓存 更 新 : 











cached checking downloading error 
noupdate obsolete progress updateready 


很 多 新 Web 应 用 API 都 使 用 message 事 件 进行 异步 通信 。 跨 文档 通信 
API《〈 见 22.3 节 ) 允许 一 台 服 务 器 上 的 文档 脚本 能 和 男 一 台 服 务 器 上 的 
文档 脚本 交换 消息 。 其 工作 受 限于 同 源 策略 〈 见 13.6.2 节 ) 这 一 安全 方 
式 。 友 送 的 每 一 条 消息 都 会 在 接收 文档 的 Window 上 触发 message 事 件 。 
传递 给 处 理 程序 的 事件 对 象 包含 data 属 性 ， 它 有 保存 信息 内 容 以 及 用 于 
识别 消息 发 送 者 的 source 属 性 和 origin 策 略 。message 事 件 的 使 用 方式 与 
使 用 Web Worker〈 见 13.6.2 节 ) 通信 、 通 过 Server-Sent 事 件 ( 见 18.3 市 ) 
和 WebSocket〈 见 22.9 节 ) 进行 网 络 通信 相似 。 


HTML5 及 相关 标准 定义 了 一 些 不 在 窗口 、 文 档 和 文档 元 素 的 对 象 
上 触发 的 事件 。XMLHttpRequest 规 范 第 2 版 和 File API 规 范 都 定义 了 一 系 
列 事件 来 跟踪 异步 JO 的 进度 。 它 们 在 XMLHttpRequest 或 FileReader 对 象 
上 触发 事件 。 每 次 读 取 操 作 都 是 以 loadstart 事 件 开 始 ， 接 着 是 progress 和 
loadend 事 件 。 此 外 ， 每 个 操作 仅 在 最 终 loadend 事 件 之 前 会 有 load、error 
或 abort 事 件 。 更 多 详细 信息 请 参见 18.1.4 节 和 22.6.5 节 。 


最 后 ，HIML5 及 相关 标准 定义 了 少量 庞杂 的 事件 类 型 。 在 Window 
对 象 上 发 生 的 Web 存 储 〈 见 20.1 节 ) API 定 义 了 storage 事 件 (在 Window 
对 象 上 ) 用 于 通知 存储 数据 的 改变 。HTML5 也 标准 化 了 最 早 由 
Microsoft 在 IE 中 引入 的 beforeprint 和 afterprint 事 件 。 顾 名 思 义 ， 当 文档 打 
印 之 前 或 之 后 立即 在 Window 对 象 上 触发 这 些 事件 ， 它 提供 了 打印 文档 
时 添加 或 删除 类 似 日 期 或 时 间 每 内 容 的 机 会 。 (这 些 事件 不 应 该 用 于 处 
理 打印 文档 的 样式 ， 因 为 CSS 媒 体 类 型 更 适合 这 个 用 途 。) 


17.1.4 ”触摸 屏 和 移动 设备 事件 


强大 的 移动 设备 的 广泛 采用 《特别 是 使 用 触摸 屏 的 那些 设备 ) 需要 
建立 新 的 事件 类 别 。 在 许多 情况 下 ， 触 摸 屏 事件 映射 到 传统 的 事件 类 型 

















《比如 click 和 srcol) ， 但 不 是 每 次 和 触摸 屏 UI 的 交互 都 能 仿效 鼠标 ， 

也 不 是 所 有 的 触摸 都 可 以 当做 鼠标 事件 处 理 。 本 节 主 要 介绍 运行 在 
Apple 的 iPhone 和 iPad 设 备 上 的 Safari 所 产生 的 手势 和 触摸 事件 ， 还 包括 
用 户 旋转 这 些 设备 时 产生 的 orientationchange 事 件 。 在 写本 章 时 ， 这 些 事 
件 尚 未 标准 化 ， 但 WwW3C 已 经 开始 用 Apple 的 触摸 事件 作为 起 点 制定 “触摸 
事件 规范 ”。 本 书 第 四 部 分 并 没有 记录 这 些 事件 ， 但 你 可 以 在 Apple 的 开 
发 者 中 心 (http://developer.apple.com/) 查询 更 多 信息 。 


Safari 产 生 的 手势 事件 用 于 两 个 手指 的 缩放 和 旋转 手势 。 当 手势 开 
始 时 生成 gesturestart 事 件 ， 而 手势 结束 时 生成 gestureend 事 件 。 在 这 两 个 
事件 之 间 是 跟踪 手势 过 程 的 gesturechange 事 件 队列 。 这 些 事件 传递 的 事 
件 对 象 有 数字 属性 scale 和 rotation。scale 属 性 是 两 个 手指 之 间 当 前 距离 和 
初始 距离 的 比值 。“ 捏 紧 ” 手 势 的 scale 值 小 于 1.0， 而 “ 撑 开 ”手势 的 scale 值 
大 于 1.0。rotation 属 性 是 指 从 事件 开始 手指 旋转 的 角度 ， 它 以 度 为 单 
位 ， 正 值 表示 按照 顺 时 针 方 回旋 转 。 


手势 事件 是 高 级 事件 ， 用 于 通知 己 经 翻译 的 手势 。 如 果 想 实现 自 定 
义 手 势 ， 你 可 以 监听 低级 触摸 事件 。 当 手指 触摸 屏幕 时 会 触发 touchstart 
事件 ， 当 手指 移动 时 会 触发 touchmove 事 件 ， 而 当 手 指 离开 屏幕 时 会 触 
发 touchend 事 件 。 不 像 鼠 标 事 件 ， 触 摸 事 件 并 不 直接 报告 触摸 的 坐标 。 
相反 ， 触 摸 事 件 传递 的 事件 对 象 有 一 个 changedTouches 属 性 ， 该 属性 是 
一 个 类 数组 对 象 ， 其 每 个 元 素 都 摘 述 触摸 的 位 置 。 


当 设 备 允 许 用 户 从 竖 屏 旋转 到 横 屏 模式 时 会 在 Window 对 象 上 触发 
orientationchanged 事 件 ， 访 事件 传递 的 事件 对 象 本 身 没 有 用 。 但 是 ， 在 
移动 版 的 Safari 中 ，Window 对 象 的 orientation 属 性 能 给 出 当前 方位 ， 其 值 
是 0、90、180 或 -90。 


17.2 ”注册 事件 处 理 程 序 


注册 事件 处 理 程 序 有 两 种 基本 方式 。 第 一 种 方式 出 现在 web 初期 ， 
给 事件 目标 对 象 或 文档 元 素 设 置 属性 。 第 二 种 方式 更 新 并 且 更 通用 ， 是 
将 事件 处 理 程序 传 递 给 对 象 或 元 素 的 一 个 方法 。 但 复杂 的 是 ， 每 种 技术 
都 有 两 个 版 本 。 可 以 在 JavaScript 代 码 中 设置 事件 处 理 程序 为 对 象 属性 ， 
或 对 于 文档 元 素 ， 可 以 在 HTML 中 直接 设置 相应 属性 。 对 于 通过 方法 调 
用 的 处 理 程 序 注册 ， 有 一 个 标准 方法 ， 命 名 为 addEventListener()， 除 IE8 
及 以 前 版 本 之 外 ， 所 有 浏览 器 都 文 持 这 种 方式 ， 而 下 9 之 前 的 正版 本 文 
































持 的 是 一 个 叫 attachEventO 的 不 同方 法 。 
17.2.1 设置 JavaScript 对 象 属性 为 事件 处 理 程序 


注册 事件 处 理 程序 最 简单 的 方式 就 是 通过 设置 事件 目标 的 属性 为 所 
需 事 件 处 理 程序 函数 。 按 照 约定 ， 事件 处 理 程 序 属性 的 名 字 由 " on" 后 面 
跟着 事件 名 组 成 : onclick、onchange、onload、onmouseover 等 。 注 意 这 
些 属 性 名 是 区 分 大 小 写 的 ， 所 有 都 是 小 号 ， 即 使 事件 类 型 是 由 多 个 词组 
成 《比如 "readystatechange") 。 下 面 是 两 个 事件 处 理 程 序 注 册 示 例 : 

















Od 个 函数 

// 该 函数 是 事件 处 理 程序 : 当 文档 加 载 完毕 时 调用 它 
window.onload=function(){// 查 找 一 个 form> 元 素 

var elt=document .getELementById("shipping_address");// 注 册 事 件 处 理 程序 函数 ， 
// 在 表单 提交 之 前 调用 它 
elt.onsubmit=function(){return validate(this);} 
























































这 种 事件 处 理 程 序 注册 技术 适用 于 所 有 浏览 器 的 所 有 党 用 事件 类 
。 一 般 情况 下 ， 所 有 广泛 实现 的 Web API 定义 的 事件 都 允许 通过 设置 
ei 性 来 注册 处 理 程序 。 


事件 处 理 程序 属性 的 缺点 是 其 设计 都 是 围绕 着 假设 每 个 事件 目标 对 
于 每 种 事件 类 型 将 最 多 只 有 一 个 处 理 程 序 。 如 果 想 编写 能 够 在 任意 文档 
中 都 能 使 用 的 脚本 库 代 码 ， 更 好 的 方式 是 使 用 一 种 不 修改 或 履 盖 任何 已 
有 注册 人 处理 程序 的 技术 (比如 addEventListener())。 


17.2.2 ”设置 HTML 标 签 属性 为 事件 处 理 程 序 


用 于 设置 的 文档 元 素 事 件 处 理 程序 属性 (property〉 也 能 换 成 对 应 
HTML 标 签 的 属性 (attribute〉。 如 果 这 样 做 ， 属 性 值 应 该 是 JavaScript 
代码 字符 串 。 这 段 代码 应 该 是 事件 处 理 程序 函数 的 主体 ， 而 非 完 整 的 函 
数 声 明 。 也 就 是 说 ，HTML 事 件 处 理 程序 代码 不 应 该 用 大 括号 包围 且 使 
用 function 关 键 字 作为 前 级 。 例 如 : 











二 button onclick="alert('Thank you' ) 思 > 点 击 这 里 < /button> 








如 果 HTML 事 件 处 理 程序 属性 包含 多 条 JavaScript 语 句 ， 要 记 住 必须 
使 用 分 号 分 隔 这 些 语句 或 断 开 属 性 值 使 其 跟 多 行 。 


某 些 事 件 类 型 通常 直接 在 浏览 器 而 非 任 何 特 定 文档 元 素 上 触发 。 在 
JavaScript 中 ， 这 些 事 件 处 理 程序 在 Window 对 象 上 注册 。 在 HTML 中 ， 
会 把 它们 放 到 二 body 二 标签 上 ， 但 浏览 器 会 在 Window 对 象 上 注册 它 
们 。 下 面 是 HIML5 规 范 章 案 定 义 的 这 类 事件 处 理 程序 的 完整 列表 : 


onafterprint onfocus ononline onresize 
onbeforeprint onhashchange onpagehide onstorage 
onbeforeunload onload onpageshow onundo 
onblur onmessage onpopstate onunload 
onerror onoffline onredo 


当 指 定 一 串 JavaScript 代 码 作为 HTML 事 件 处 理 程序 属性 的 值 时 ， 浏 
览 露 会 把 代码 串 转 换 为 类 似 如 下 的 函数 中 : 





function(event ){ 
with(document ){ 
with(this ， forml 和 
with(this){/* 这 里 是 编码 */ 























I 





0 它 将 在 非 严 格 模式 下 定义 这 个 函数 〈 见 5.7.3 
当 仔细 研究 17.3 节 的 事件 处 理 程序 调用 时 ， 我 们 将 看 到 关于 event 
吾 句 的 更 多 内 容 。 


客户 端 编程 的 通用 风格 是 保持 HTML 内 容 和 JavaScript 行 为 分 离 ， 遵 
循 这 条 规则 的 程序 员 应 禁止 〈 或 至 少 避免 ) 使 用 HTML 事 件 处 理 程序 属 
性 ， 因 为 这 些 属性 直接 混合 了 JavaScript 和 HTML 。 











17.2.3 addEventListener() 


在 除 正 8 及 之 前 版 本 外 的 所 有 浏览 器 都 文 持 的 标准 事件 模型 中 ， 任 
何 能 成 为 事件 目标 的 对 象 一 一 这 些 对 象 包括 Window 对 象 、Document 对 
象 科 所 有 文档 元 素 一 一 都 定义 了 一 个 名 叫 addEventListener() 的 方法 ， 使 
用 这 个 方法 可 以 为 事件 目标 注册 事件 处 理 程 序 。addEventListener() 接 受 
三 个 参数 。 第 一 个 是 要 注册 处 理 程序 的 事件 类 型 ， 这 个 事件 类 型 (或 名 


字 ) 是 字符 串 ， 但 它 不 应 该 包括 用 于 设置 事件 处 理 程序 属性 的 前 

缀 "on"。 第 二 个 参数 是 当 指定 类 型 的 事件 发 生 时 应 该 调用 的 函数 。 最 后 
一 个 参数 是 布尔 值 。 通 种 情况 下 ， 会 给 这 个 参数 传递 false。 如 果 相 反 传 
递 了 true， 那 么 函数 将 注册 为 捕获 事件 处 理 程 序 ， 并 在 事件 不 同 的 调度 
阶段 调用 。17.3.6 节 涵盖 事件 捕获 。 你 应 该 可 以 忽略 第 三 个 参数 并 无 须 
传递 false， 同 时 规范 最 终 应 该 会 改变 从 而 多 许 这 么 做 ， 但 在 写本 章 时 ， 
忽略 这 个 参数 会 在 当前 东 些 浏览 器 中 出 错 。 


下 面 这 段 代码 在 <button 之 元 素 上 注册 了 click 事 件 的 两 个 处 理 程 
序 。 注 意 所 用 两 个 技术 之 间 的 不 同 : 




















<button id="my button">click me 和 /button> 

<script> 

var b=document .getElementById("mybutton"); 
b.onclick=function(){alert("Thanks for clicking me! ");}; 
b.addEventListener("click",function(){alert("Thanks again! ");},false); 
</script> 





用 "click" 作 为 第 一 个 参数 调用 addEventListenerO) 不 会 影响 onclick 属 
性 的 值 。 在 前 面 的 代码 中 ， 单 击 按钮 会 产生 两 个 alert() 对 话 框 。 更 重要 
的 是 ， 能 通过 多 次 调用 addEventListener() 为 同一 个 对 象 注册 同一 事件 类 
型 的 多 个 处 理 程序 函数 。 当 对 象 上 发 生 事件 时 ， 所 有 该 事件 类 型 的 注册 
处 理 程 序 都 会 按照 注册 的 顺序 调用 。 使 用 相同 的 参数 在 同一 个 对 象 上 多 
次 调用 addEventListenerO 是 没 用 的 ， 处 理 程序 仍然 只 注册 一 次 ， 同 时 重 
复 调 用 也 不 会 改变 调用 处 理 程 序 的 顺序 。 


相对 addEventListener() 的 是 removeEventListener() 方 法 ， 它 同样 有 三 
个 参数 ， 从 对 象 中 删除 事件 处 理 程 序 函 数 而 非 添 加 ， 它 常用 于 临时 注册 
事件 处 理 程序 ， 然 后 不 久 惑 删除 它 。 例 如 ， 当 你 要 得 到 mousedown 事 件 
时 ， 可 以 为 mousemove 和 mouseup 事 件 注册 临时 捕获 事件 处 理 程序 来 看 
看 用 户 是 否 拖 动 女 标 。 当 mouseup 事 件 到 来 后 ， 可 以 注销 这 些 事件 处 理 
程序 。 在 这 种 情况 下 ， 事 件 处 理 程序 移 除 代码 如 下 所 示 : 











document ,removeEventListener("mousemove" ,handleMouseMovey true); 
document ,removeEventListener("mouseup" ,handJeMouseUp,true ) ; 





17.2.4 attachEvent() 


IE9 之 前 的 下 不 支持 addEventListener() 和 removeEventListener()。IE5 


及 以 后 版 本 定义 了 类 似 的 方法 attachEvent() 和 detachEvent()。 


attachEvent() 和 detachEvent() 方 法 的 工作 原理 与 addEventListener() 和 和 
removeEventListener() 类 似 ， 但 有 如 下 例外 : 


-因为 正事 件 模 型 不 文 持 事件 捕获 ， 所 以 attachEventO 和 
detachEvent() 要 求 只 有 两 个 参数 ,事件 类 型 和 处 理 程序 函数 。 


-IE 方法 的 第 一 个 参数 使 用 了 带 "on" 前 级 的 事件 处 理 程序 属性 名 ， 而 
非 没 有 前 绥 的 事件 类 型 。 例 如 ， 当 给 addEventListenerO 传 递 "click" 时 ， 
要 给 attachEventO 传 递 "onclick" 。 


attachEvent() 人 允许 相 同 的 事件 处 理 程序 函数 注册 多 次 。 当 特定 的 事 
件 类 型 发 生 时 ， 注 册 函 数 的 调用 次 数 和 注册 次 数 一 样 。 


经 常 可 以 看 到 的 事件 处 理 程序 注册 代码 是 在 文 持 addEventListener() 
的 浏览 器 中 就 调用 它 ， 否 则 惑 用 attachEvent(): 





var b=document .getElementById("mybutton"); 
var handler=function(){alert("Thanks! ");}; 
if(b.addEventListener) 
b.addEventListener("click",handler, false); 
else if(b.attachEvent) 
b.attachEvent("onclick",handler); 


17.3 ”事件 处 理 程序 的 调用 


一 旦 注册 了 事件 处 理 程序 ， 浏 览 喜 就 会 在 指定 对 象 上 发 生 指定 类 型 
事件 时 自动 调用 它 。 本 节 会 详细 介绍 事件 处 理 程序 的 调用 ， 说 明 事件 处 
理 程序 的 参数 、 调 用 上 下 文 Cihis 值 ) 、 调用 作用 域 和 事件 处 理 程序 返 
回 值 的 意义 。 遗 憾 的 是 ， 这 些 内 容 中 的 一 部 分 在 IE8 及 以 前 版 本 中 和 在 
其 他 浏览 器 中 是 不 同 的 。 


除了 介绍 单个 处 理 程序 如 何 调用 ， 本 节 也 会 说 明 事件 传播 的 机 制 ， 
即 单个 事件 如 条 能 能 在 原始 事件 目标 和 文档 的 容器 元 素 上 触发 多 个 处 理 程 
字 的 调用 。 


17.3.1 事件 处 理 程 序 的 参数 








通常 调用 事件 处 理 程序 时 把 事件 对 象 作 为 它们 的 一 个 参数 (有 一 个 
例外 ， 后 面 会 介绍 ) 。 事 件 对 象 的 属性 提供 了 有 关 事 件 的 详细 信息 。 例 
如 ，type 属 性 指定 了 发 生 的 事件 类 型 。17.1 节 提 到 了 各 种 事件 类 型 的 一 
些 其 他 事件 对 象 属性 。 


在 IE8 及 以 前 版 本 中 ， 通 过 设置 属性 注册 事件 处 理 程序 ， 当 调用 它 
们 时 并 未 传递 事件 对 象 。 了 取而代之， 需要 通过 全 局 对 象 window.event 来 
获得 事件 对 象 。 出 于 互通 性 ， 你 能 像 如 下 那样 编写 事件 处 理 程序 ， 这 样 
如 果 没 有 参数 就 使 用 window.event: 


function handler(event)t{ 
event=event | |window.event;// 处 理 程序 代码 出 现在 这 里 
} 
































回 使 用 attachEventO 注 册 的 事件 处 理 程 序 传递 事件 对 象 ， 但 它们 也 


能 使 用 window.event。 


记得 17.2.2 节 中 的 介绍 ， 当 通过 设置 HTML 属 性 注册 事件 处 理 程 序 
时 ， 浏 览 器 会 把 JavaScript 编 码 转换 到 一 个 函数 中 。 非 IE 浏 览 器 使 用 
event 参 数 来 构造 函数 ， 而 正在 构造 函数 时 没有 要 求 参 数 。 如 果 在 这 样 的 
函数 中 使 用 event 标 识 符 ， 那 么 引用 的 正 是 window.event。 在 这 两 种 情况 
下 ，HTML 事 件 处 理 程序 都 能 作为 event 引 用 事件 对 象 。 


17.3.2 事件 处 理 程序 的 运行 环境 


当 通 过 设置 属性 注册 事件 处 理 程序 时 ， 这 看 起 来 好 像 是 在 文档 元 素 
上 定义 了 新 方法 : 


























e.onclick=function( ){/* 处 理 程序 代码 */}; 








事件 处 理 程序 在 事件 目标 上 定义 ， 所 以 它们 作为 这 个 对 象 的 方法 来 
调用 (后面 会 介绍 一 个 和 下 相关 的 例外 〉 并 不 出 人 意料 。 这 就 是 说 ， 在 
事件 处 理 程序 内 ，this 关 键 字 指 的 是 事件 目标 。 


甚至 当 使 用 addEventListener0 注 册 时 ， 调 用 的 处 理 程 序 使 用 事件 目 
标 作 为 它们 的 this 值 。 但 是 ， 对 于 attachEvent() 来 讲 这 是 不 对 的 : 使 用 
attachEvent(O) 注 册 的 处 理 程序 作为 函数 调用 ， 它 们 的 this 值 是 全 局 











CWindow) 对 象 。 可 以 用 如 下 代码 来 解决 这 个 问题 : 





/A* 

* 在 指定 的 事件 目标 上 注册 用 于 处 理 指定 类 型 事件 的 指定 处 理 程序 函数 
* 确 保 处 理 程序 一 直 作 为 事件 目标 的 方法 调用 
A 


































































































function addEvent(target, type,handler){ 
if(target.addEventListener) 
target.addEventListener(type,handler, false); 
else 
ee attachEvent("on" 

fonetionKeventt// 失 外 人 人 的 方法 调用 ， 
// 传 递 事件 对 象 


return 有 call(target, event); 


} 


























注意 使 用 这 个 方法 注册 的 事件 处 理 程序 不 能 删除 ， 因 为 传递 给 
attachEvent() 的 包装 函数 没有 保留 下 来 传递 给 detachEvent()。 


17.3.3 ”事件 处 理 程 序 的 作用 域 


像 所 有 的 JavaScript 函 数 一 样 ， 事 件 处 理 程序 从 词法 上 讲 也 是 作用 
域 。 它 们 在 其 定义 时 的 作用 域 而 非 调用 时 的 作用 域 中 执行 ， 并 且 它 们 能 
夺取 导 个 作用 域 中 的 任何 一 个 本 地 变量 。 例 如 ， 之 前 的 addEvent0 卫 数 
就 证 明 过 


但 是 ， 通 过 HTML 属 性 来 注册 事件 处 理 程序 是 一 个 例外 。 它 们 被 转 
换 为 能 存 取 全 局 变量 的 顶级 函数 而 非 任何 本 地 变量 。 但 因为 历史 原因 ， 
它们 运行 在 一 个 修改 后 的 作用 域 链 中 。 通 过 HTML 属 性 定义 的 事件 处 理 
程序 能 好 像 本 地 变量 一 样 使 用 目标 对 象 、 容 器 二 form 二 对 象 ( 如 果 有 ) 
和 Document 对 象 的 属性 。17.2.2 节 展示 了 如 何 从 HTML 事件 处 理 程 序 属 
函数 ， 以 及 其 代码 近似 于 使 用 with 语句 修改 后 的 
连 


HTML 属 性 最 不 自然 的 地 方 包括 见长 的 代码 串 和 修改 后 的 作用 域 链 
允许 有 用 的 快捷 方式 。 可 以 使 用 tagName 蔡 代 this.tagName， 使 用 
getElementById(0 蔡 代 document.getElementById0。 并 且 ， 对 于 雪 form> 
中 的 文档 元 兹 ， 能 通过 ID 引用 任何 其 他 的 表单 元 素 ， 例 如 ， 用 zipcode 蔡 
代 this.form.zipcode。 


另 一 方面 ，HIML 事 件 处 理 程序 中 修改 的 作用 域 链 是 陷阱 之 源 ， 











为 作用 域 链 中 每 个 对 象 的 属性 在 全 局 对 象 中 都 有 相同 名 字 的 属性 。 例 
如 ， 由 于 Document 对 象 定义 (很 少 使 用 ) open() 方 法 ， 因 此 HTML 事 件 
处 理 程序 想 调用 Window 对 象 的 open0 方 法 就 必须 显 式 地 写 window.open 
而 不 是 open。 表 单 有 类 似 的 问题 但 破坏 性 更 大 ， 因 为 表单 元 素 的 名 字 和 
ID 在 包含 的 表单 元 素 上 定义 属性 〈 见 15.9.1 节 ) 。 例 如 ， 如 果 表 单 包含 
一 个 ID 是 "location" 的 元素 ， 那 么 要 是 表单 的 所 有 HTML 事 件 处 理 程序 想 
引用 window 的 location 对 象 ， 就 必须 使 用 window.location 而 不 能 是 
location 。 


17.3.4 ”事件 处 理 程 序 的 返回 值 


通过 设置 对 象 属性 或 HTML 属 性 注册 事件 处 理 程序 的 返回 值 有 时 是 
非常 有 意义 的 。 通 常情 况 下 ， 返 回 值 false 束 是 告诉 浏览 器 不 要 执行 这 个 
事件 相关 的 默认 操作 。 例 如 ， 表 单 提交 按钮 的 onclick 事 件 处 理 程序 能 返 
回 false 阻 止 浏览 器 提交 表单 。《〈 当 用 户 的 输入 在 客户 端 验证 失败 时 ， 这 
是 有 用 的 。〉 类 似 地 ， 如 果 用 户 输 入 不 合适 的 字符 ， 输 入 域 上 的 
onkeypress 事 件 处 理 程序 能 通过 返回 false 来 过 滤 键 盘 输 入 。〔 例 17-6 束 
是 用 这 种 方式 过 小 键盘 输入 。) 


Window 对 象 的 onbeforeunload 事 件 处 理 程 序 的 返回 值 也 非常 有 意 
义 。 当 浏览 器 将 要 跳 转 到 新 页 面 时 触发 这 个 事件 。 如 果 事 件 处 理 程 序 返 
回 一 个 字符 串 ， 那 么 它 将 出 现在 询问 用 户 是 否 想 离开 当前 页 面 的 标准 对 
话 框 中 。 

理解 事件 处 理 程序 的 返回 值 只 对 通过 属性 注册 的 处 理 程序 才 有 意义 
这 非常 重要 。 接 下 来 我 们 将 看 到 使 用 addEventListener() 或 attachEvent() 注 


册 事 件 处 理 程 序 转 而 必须 调用 preventDefault0 方 法 或 设置 事件 对 象 的 
retumValue 属 性 。 


17.3.5 ”调用 顺序 

文档 元 素 或 其 他 对 象 可 以 为 指定 事件 类 型 注册 多 个 事件 处 理 程序 。 
-0 的 事件 发 生 时 ， 浏 览 器 必须 按照 如 下 规则 调用 所 有 的 事件 处 理 程 
了 : 

:通过 设置 对 象 属性 或 HTML 属 性 注册 的 处 理 程序 一 直 优 先 调用 。 

:使 用 addEventListener() 注 册 的 处 理 程 序 按照 它们 的 注册 顺序 调 




















用 图 。 


:使 用 attachEvent() 注 册 的 处 理 程序 可 能 按照 任何 顺序 调用 ， 所 以 代 
码 不 应 该 依赖 于 调用 顺序 。 


17.3.6 ”事件 传播 


当 事 件 目标 是 Window 对 象 或 其 他 一 些 单独 对 象 〈 比 如 
XMLHttpRequest) 时 ， 浏 览 器 简单 地 通过 调用 对 象 上 适当 的 处 理 程序 
响应 事件 。 当 事件 目标 是 文档 或 文档 元 素 时 ， 情 况 比较 复杂 。 


在 调用 在 目标 元 素 上 注册 的 事件 处 理 函 数 后 ， 大 部 分 事件 会 * 冒 
泡 ? 到 DOM 树 根 。 调 用 目标 的 父 元 素 的 事件 处 理 程序 ， 然 后 调用 在 目标 
的 祖父 元 素 上 注册 的 事件 处 理 程 序 。 这 会 一 直到 Document 对 象 ， 最 后 到 
达 Window 对 象 。 事 件 冒 泡 为 在 大 量 单独 文档 元 素 上 注册 处 理 程序 提供 
了 蔡 代 方案 ， 即 在 共同 的 祖先 元 素 上 注册 一 个 处 理 程序 来 处 理 所 有 的 事 
件 。 例如， 可 以 在 二 form 之 元 素 上 注册 "change" 事 件 处 理 程序 来 取代 在 
表单 的 每 个 元 素 上 注册 "change" 事 件 处 理 程序 。 


发 生 在 文档 元 素 上 的 大 部 分 事件 都 会 冒 泡 ， 值 得 注意 的 例外 是 
focus、blur 和 scrol 事 件 。 文 档 元 素 上 的 load 事 件 会 冒 泡 ， 但 它 会 在 
Document 对 象 上 停止 冒 泡 而 不 会 传播 到 Window 对 象 。 只 有 当 整 个 文档 
都 加 载 完 毕 时 才 会 触发 Window 对 象 的 load 事 件 。 


事件 冒 泡 是 事件 传播 的 第 三 个 “阶段 >。 目 标 对 象 本 身 的 事件 处 理 程 
序 调用 是 第 二 个 阶段 。 第 一 个 阶段 甚至 发 生 在 目标 处 理 程序 调用 之 前 ， 
称 为 “捕获 ”阶段 。 回 顾 之 前 addEventListener() 把 一 个 布尔 值 作为 其 第 三 
个 参数 。 如 果 这 个 参数 是 true， 那 么 事件 处 理 程序 被 注册 为 捕获 事件 处 
理 程 序 ， 它 会 在 事件 传播 的 第 一 个 阶段 调用 。 事 件 冒 泡 得 到 广泛 的 文 
持 ， 它 能 用 在 包括 正在 内 的 所 有 浏览 器 中 ， 且 无 论 事件 处 理 程序 用 哪 种 
方式 注册 《除非 它们 被 注册 为 捕获 事件 处 理 程序 ) 。 而 事件 捕获 只 能 
于 以 addEventListener0) 注 册 且 第 三 个 参数 是 true 的 事件 处 理 程序 中 。 这 
意味 着 事件 捕获 无 法 在 IE9 之 前 的 下 中 使 用 ， 所 以 在 写本 章 时 ， 它 还 不 
是 通用 的 技术 。 


事件 传播 的 捕获 阶段 像 反 癌 的 冒 泡 阶段 。 最 先 调 用 Window 对 象 的 
捕获 人 处理 程序 ， 然 后 是 Document 对 象 的 捕获 处 理 程序 ， 接 着 是 body 对 象 
的 ， 再 然后 是 DOM 树 同 下 ， 以 此 类 推 ， 直 到 调用 事件 目标 的 父 元 素 的 
































捕获 事件 处 理 程 序 。 在 目标 对 象 本 身上 注册 的 捕获 事件 处 理 程序 不 会 被 
调用 。 


事件 捕获 提供 了 在 事件 没有 送 达 目标 之 前 查看 它们 的 机 会 。 事 件 捕 
获 能 用 于 程序 调试 ， 或 用 于 后 面 介 绍 的 事件 取消 技术 ， 过 滤 掉 事件 从 而 
使 目标 事件 处 理 程 序 绝 不 会 被 调用 。 事 件 捕获 党 用 于 处 理 鼠 标 拖 放 ， 
为 要 处 理 拖 放 事 件 的 位 置 不 能 是 这 个 元 素 内 部 的 子 元 系 。 请 看 例 17-2。 


17.3.7 事件 取消 


17.3.4 节 介绍 了 用 属性 注册 的 事件 处 理 程序 的 返回 值 能 用 于 取消 事 
件 的 浏览 器 默认 操作 。 在 支持 addEventListener() 的 浏览 器 中 ， 也 能 通过 
调用 事件 对 象 的 preventDefault0 方 法 取消 事件 的 默认 操作 。 不 过 ， 在 IE 
9 之 前 的 了 正中， 可 以 通过 设置 事件 对 象 的 returnValue 属 性 为 false 来 达到 同 
下 面 的 代码 假设 一 个 事件 处 理 程序 ， 它 使 用 全 部 三 种 取消 技 


function cancelHandler(event){ 
var event=event | |window.event;// 用 于 IE/* 这 里 是 处 理事 件 的 代码 */ 


























// 现 在 取消 事件 相关 的 默认 行为 
if(event.preventDefault )event .preventDefault();// 标 准 技术 
if(event.returnVvalue)event.returnValue=false;//IE 
return false;// 用 于 处 理 使 用 对 象 属性 注册 的 处 理 程序 

} 






























































当前 的 DOM 事 件 模型 草案 定义 了 Event 对 象 属性 defaultPrevented。 
它 尚 未 得 到 广泛 文 持 ， 但 其 目的 是 常态 下 这 个 属性 是 false， 但 如 果 
preventDefaut(O 被 调用 则 它 将 变 成 trueD。 


取消 事件 相关 的 默认 操作 只 是 事件 取消 中 的 一 种 ， 我 们 也 能 取消 事 
件 传 播 。 在 支持 addEventListener() 的 浏览 器 中 ， 可 以 调用 事件 对 象 的 一 
个 stopPropagation() 方 法 以 阻止 事件 的 继续 传播 。 如 果 在 同一 对 象 上 定义 
了 其 他 处 理 程 序 ， 剩 下 的 处 理 程序 将 依旧 被 调用 ， 但 调用 
stopPropagation() 之 后 任何 其 他 对 象 上 的 事件 处 理 程序 将 不 会 被 调用 。 
stopPropagation() 方 法 可 以 在 事件 传播 期 间 的 任何 时 间 调 用 ， 它 能 工作 在 
捕获 期 阶段 、 事 件 目 标本 吴 中 和 冒 泡 阶段 。 


IE9 之 前 的 正 不 文 持 stopPropagation() 方 法 。 相 反 ， 正 事件 对 象 有 一 
个 cancelBubble 属 性， 设置 这 个 属性 为 true 能 阻止 事件 进一步 传播 。 











CIE8 及 之 前 版 本 不 文 持 事件 传播 的 捕获 阶段 ， 所 以 冒 泡 是 唯一 竺 取消 
的 事件 传播 。) 


当前 的 DOM 事 件 规范 草案 在 Event 对 象 上 定义 另 一 个 方法 ， 命 名 为 
stopImmediatePropagation()。 类 似 stopPropagation()， 这 个 方法 阻止 了 任 
何其 他 对 象 的 事件 传播 ， 但 也 阻止 了 在 相同 对 象 上 注册 的 任何 其 他 事件 
处 理 程序 的 调用 。 在 写本 音 时 ， 某 些 浏览 器 文 持 
stopImmediatePropagation0， 但 另外 的 都 不 文 持 。 一 些 像 jQuery 和 YUI 之 
类 的 工具 库 定 义 了 路 平台 的 stopImmediatePropagation() 方 法 。 


17.4 ”文档 加 载 事件 


现在 已 经 介绍 了 JavaScript 事 件 处 理 的 基本 原理 ， 我 们 将 开始 深入 探 
索 具 体 事 件 类 别 ， 本 节 将 从 文档 load 事 件 开始 。 


大 部 分 web 应 用 都 需要 Web 浏 览 器 通知 它们 文档 加 载 完 毕 和 为 操作 
准备 就 绪 的 时 间 。Window 对 象 的 load 事 件 就 是 为 了 这 个 目的 ， 第 13 章 详 
细 地 讨论 过 它 ， 同 时 那 章 的 示例 13-5 使 用 了 onLoad0 工 具 函 数 。load 事 
件 直 到 文档 和 所 有 图 片 加 载 完毕 时 才 发 生 。 然 而 ， 在 文档 完全 解析 之 后 
但 在 所 有 图 片 全 部 加 载 完 毕 之 前 开始 运行 脚本 通常 是 安全 的 ， 所 以 如 果 
基于 "load" 发 生 之 前 的 事件 触发 脚本 会 提升 Web 应 用 的 启动 时 间 。 


当 了 文档 加 载 解 析 完 毕 且 所 有 延迟 (deferred) 脚本 都 执行 完毕 时 会 
触 友 DOMContentLoaded 事 件 ， 此 时 图 片 和 异步 (async〉 脚本 可 能 依旧 
在 加 载 ， 但 是 文档 已 经 为 操作 准备 就 绪 了 。 〈13.3.1 节 介绍 过 延迟 脚本 
和 异步 脚本 。) Firefox 引 入 了 这 个 事件 ， 然 后 它 被 包括 Microsoft 的 IE9 
在 内 的 所 有 其 他 浏览 器 厂 了 两 采用。 尽管 其 名 字 中 有 "DOM"， 并 属于 3 级 
DOM 事 件 标 准 的 一 部 分 ， 但 HTML5 标 准 化 了 它 。 


正如 13.3.4 节 所 述 ，document.readyState 属 性 随 着 文档 加 载 过 程 而 
变 。 在 正中 ， 每 次 状态 改变 都 伴随 着 Document 对 象 上 的 readystatechange 
事件 ， 当 下 接收 到 "complete" 状 态 时 使 用 这 个 事件 来 做 判断 是 可 行 的 。 
HIML5 标 准 化 了 readystatechange 事 件 ， 但 它 仅 在 load 事 件 之 前 立即 触 
发 ， 所 以 目前 尚 不 清楚 监听 '"readystatechange" 取 代 "load" 会 带 来 多 大 好 
处 。 




















例 17-1 定 义 了 whenReady0 函 数 ， 它 非 稼 像 示例 13-5 的 onLoadO) 函 
数 。 当 文档 为 操作 准备 束 绕 时 ， 传 递 给 whenReady0) 的 函数 将 会 作为 


Document 对 象 的 方法 调用 。 和 之 前 的 onLoad0 函 数 不 同 ，whenReady() 
监听 DOMContentLoaded 和 readystatechange 事 件 ， 而 使 用 load 事 件 仅仅 是 
为 了 兼容 那些 不 文 持 之 前 事件 的 较 老 浏览 器 。 接 下 来 本 节 及 后 面 章节 的 
一 些 例子 都 使 用 whenReady() 函 数 。 


例 17-1: 当 文 档 准备 就 绪 时 调用 函数 





A* 

* 传 递 函 数 给 whenReady( )， 当 文档 解析 完毕 且 为 操作 准备 就 绪 时 ， 
* 函数 将 作为 文档 对 象 的 方法 调用 
*DOMContentLoaded、readystatechange 或 1oad 事 件 发 生 时 会 触发 注册 函数 

* 一 且 文 档 准备 就 绪 ， 所 有 函数 都 将 被 调用 ， 任 何 传递 给 whenReady ( ) 的 函数 都 将 立即 调用 
A 
var whenReady=(function(){// 这 个 函数 返回 whenReady( ) 函 数 
var funcs=[];// 当 获得 事件 时 ， 要 运行 的 函数 

var ready=false;// 当 触发 事件 处 理 程序 时 ， 切 换 到 true 
// 当 文档 准备 就 绪 时 ， 调用 事件 处 理 程 序 

function handler(e){// 如 果 已 经 运行 过 一 次 ， 只 需要 返 臣 
if(ready)return;// 如 果 发 生 readystatechange 事 件 ， 
// 但 其 状态 不 是 "complete" 的 话 ， 那 么 文档 尚未 准备 好 
if(e.type==="readystatechange"&&document.readyState!=="complete") 
return;// 运 行 所 有 注册 函数 

// 注 意 每 次 都 要 计算 funcs .length， 

// 以 防 这 些 函 数 的 调用 可 能 会 导致 注册 更 多 的 函数 

for(var i=0;i<funcs.length;i++) 
funcs[i].call(document);// 现 在 设置 [ready 标 识 为 true， 并 移 除 所 有 函数 
ready=true; 

funcs=null; 


























































































































































































































} 

// 为 接收 到 的 任何 事件 注册 处 理 程序 

if(document.addEventListener){ 

document .addEventListener("DOMContentLoaded",handler, false); 
document .addEventListener("readystatechange",handler, false); 
window.addEventListener("load",handler, false); 

















else if(document.attachEvent){ 
document.attachEvent("onreadystatechange",handler); 
window.attachEvent("onload",handler); 


} 

// 返 回 whenReady( ) 函数 

return function whenrReady(f){ 
if(ready)f.call(document );// 若 准备 完毕 ， 只 需要 运行 它 
else funcs.push(ff);// 否 则 ， 加 入 队列 等 候 























} 
}()); 


17.5 ”鼠标 事件 


与 鼠标 相关 的 事件 有 不 少 ， 表 17-1 全 部 把 它们 列 出 了 。 
除 "mouseenter" 和 "mouseleave" 外 的 所 有 鼠标 事件 都 能 冒 泡 。 链 接 和 提交 
按钮 上 的 click 事 件 都 有 默认 操作 且 能 够 阻止 。 可 以 取消 上 下 文 荣 单 事件 








下 文 末 单 ， 但 一 些 浏览 器 有 配置 选项 导致 不 能 取消 上 下 文 


表 17.1， 鼠 标 事件 


类 型 
click 


contextmenu 


dblclick 
mousedown 
mouseup 
mousemove 


MOUSEOVET 


mouseout 


mouseenter 


mouseleave 


说 明 

高 级 事件 ， 当 用 户 按 下 并 释放 忌 标 按键 或 其 他 方式 “激活 ”元 系 时 触发 
可 以 取消 的 事件 ， 当 上 下 文 菜单 即将 出 现时 触发 。 当 前 浏览 器 在 鼠标 右 
击 时 显示 上 下 文 菜单 ， 所 以 这 个 事件 也 能 像 click 事 件 那 样 使 用 

当 用 户 双 击 鼠 标 时 触发 

当 用 户 按 下 鼠标 按键 时 触发 

当 用 户 释放 鼠标 按键 时 触发 

当 用 户 移动 鼠标 时 触发 

当 忌 标 进入 无 素 时 触发 。relatedTarget (在 下 中古 fromElement) 指 的 是 忌 
标 来 自 的 元 素 

当 孔 标 离开 元 素 时 触发 。relatedTarget (在 IE 中 是 toElement) 指 的 是 鼠标 
要 去 往 的 元 素 

类 似 “mouseover ” ， 但 不 冒 泡 IE 将 其 引入 ，HTMLS 将 其 标准 化 ， 但 疝 
未 广泛 实现 


类 似 “mouseout”， 但 不 冒 泡 。IE 将 其 引入，HTML5 将 其 标准 化 ,但 尚 
未 广泛 实现 





传递 给 鼠标 事件 处 理 程序 的 事件 对 象 有 clientX 和 clientY 属 性 ， 它 们 
指定 了 鼠标 指针 相对 于 包含 窗口 的 坐标 。 加 入 窗口 的 深 动 仿 移 量 ( 见 示 
例 15-8) 束 可 以 把 鼠标 位 置 转换 成 文档 坐标 。 














altKey、ctrIKey、metaKey 和 shiftKey 属 性 指定 了 当 事 件 发 生 时 是 否 
i 。 例 如 ， 这 让 你 能 够 区 分 普通 单 击 和 按 着 Shift 键 


button 属 性 指定 当 事 件 发 生 时 哪个 鼠标 按键 按 下 ， 但 是 ， 不 同 浏 览 
器 给 这 个 属性 赋 不 同 的 值 ， 所 以 它 很 难 用 ， 更 多 详细 信息 请 看 Event 参 
考 页 。 某 些 浏 览 句 只 在 单 击 左 键 时 才 触 发 click 事 件 ， 所 以 如 有 果 需 要 探测 
其 他 键 的 单 击 需 要 监 昕 mousedown 和 mouseup 事 件 。 通 常 contextmenu 事 
We 但 如 上 所 述 ， 当 事件 发 生 时 可 能 无 法 阻止 上 下 文 
菜单 的 显示 。 


鼠标 事件 对 象 有 一 些 其 他 的 鼠标 特定 属性 ， 但 它们 并 不 常用 ， 具 体 
请 看 Event 参 考 页 的 列表 。 


例 17-2 展 示 了 JavaScript 函 数 drag0， 它 会 在 mousedown 事 件 处 理 程 
序 中 调用 ， 其 允许 用 户 拖 放 绝对 定位 的 文档 元 素 。drag0 能 够 在 DOM 和 
正事 件 模型 中 运行 。 


drag0 接 受 两 个 参数 。 第 一 个 是 要 拖 动 的 元 素 ， 它 可 以 是 发 生 
mousedown 事 件 的 元 素 或 包含 元 素 〈( 例 如 ， 你 可 能 允许 用 户 拖 动 的 元 素 
看 起 来 像 标 题 栏 ， 而 拖 动 的 包含 元 系 像 窗口 ) 。 然 而， 无 论 是 哪 种 情 
况 ， 它 必须 是 使 用 CSS position 属性 绝对 定位 的 文档 元 素 。 第 二 个 参数 
是 触发 mousedown 事 件 的 事件 对 象 。 下 面 是 一 个 使 用 drag0 的 简单 例 
子 ， 它 定义 了 用 户 在 按 下 Shift 键 时 能 够 拖 动 的 和 img>: 




















<img src="draggable.gif" 
style="position:absolute;1left:100px;top:100px;" 
onmousedown="if(event.shiftkKey)drag(this,event);"> 





drag0 函 数 把 mousedown 事 件 发 生 的 位 置 转换 为 文档 坐标 ， 这 是 为 
了 计算 鼠标 指针 到 正在 移动 的 元 素 左 上 角 之 间 的 距离 。 示 例 15-8 使 用 
getScrollOffsets() 帮 助 坐标 转换 。 然 后 ，drag() 注 册 了 接着 mousedown 事 
件 发 生 的 mousemove 和 mouseup 事 件 的 事件 处 理 程 序 。mousemove 事 件 
处 理 程序 用 于 响应 文档 元 素 的 移动 ， 而 mouseup 事 件 处 理 程序 用 于 注销 
自己 和 mousemove 事 件 处 理 程序 。 


值得 注意 的 是 mousemove 和 mouseup 处 理 程序 注册 为 捕获 事件 处 理 
程序 。 这 是 因为 用 户 可 能 移动 鼠标 比 其 后 的 文档 元 素 更 快 ， 如 果 这 种 情 

















况 太 生 ， 某 些 mousemove 事 件 会 发 生 在 原始 目标 元 素 之 外 。 没 有 捕获 ， 
) 派 正确 的 处 理 程序 。IE 事 件 模 型 无 法 像 标 准 事件 模型 


这 些 事 件 将 无 法 分 





那样 提供 事件 捕获 ， 但 它 在 这 种 情况 下 有 一 个 专门 用 于 捕获 鼠标 事件 的 


setCapture() 方 法 。 





下 面 的 示例 代码 会 展示 它 是 如 何 工 作 的 。 


最 后 ， 注 意 drag0 中 定义 的 moveHandler0 和 upHandlerO 函 数 。 由 于 
在 舱 套 的 作用 域 中 定义 它们 ， 因 此 它们 能 使 用 drag0 的 参数 和 本 地 变 
量 ， 这 将 大 大 简化 它们 的 实现 。 


例 17-2: 拖 动 文档 元 素 





/A 


*Drag .js: 拖 动 绝对 定位 的 HTML 元 素 


* 这 个 模块 定义 了 一 个 drag( ) 函 数 ， 它 用 于 mousedown 事 件 处 理 程序 的 调用 












































* 随 后 的 mousemove 事 件 将 移动 指定 元 素 ，mouseup 事 件 将 终止 拖 动 





“这 些 实 岗 能 同 标 ; 














佳 和 IE 两 种 事件 模型 一 起 工作 









































他 地 方 介绍 的 getscroll0ffsets() 方 法 











* 它 需要 了 至 1 本 书 S 
大 
* 参 数 : 
大 


*elementToDrag: 








接收 mousedown 事 件 的 元 素 或 某 些 包含 元 素 








* 


* 





* 


局 必 须 是 绝对 定位 的 元 素 
它 的 style .left 和 style.top 值 将 随 着 用 户 的 拖 动 而 改变 









































*event: mousedown 事 件 对 象 


Sf 





function drag(elementToDrag,event){// 初 始 鼠 标 位 置 ， 转 换 为 文档 坐标 


var scroll=getScroll0ffsets();// 来 自 其 他 地 方 的 函数 


Var startX=eve 
Var startY=eve 


// 因 为 elementToDrag 是 绝对 定位 的 ， 





A/ 所 以 我 们 可 以 假 


var origX=elementToDrag.offsetLeft,; 















































nt.clientX+scroll.x; 
nt .clientYt+scroll.y;// 在 文档 坐标 下 ， 待 拖 动 元 素 的 初始 位 置 

















役 它 的 offsetParent 就 是 文档 的 body 元 素 











var origY=elementToDrag.offsetTop;// 计 算 mousedown 事 件 和 元 素 左上 1 之 间 的 距离 
// 我 们 将 它 另 存 为 鼠标 移动 的 距离 
var deltaX=startX-origxX; 


var deltaY=startY-origY;// 注 册 用 于 响应 接着 mousedown 事 件 发 生 的 mousemove 和 mouseup 事 件 的 

















件 处 理 程 序 


if(document ,ad 





// 在 document 对 象 上 注册 捕获 事件 处 理 程序 


















































dEventListener ){// 标 准 事件 模型 















































document .addEventListener("mousemove",moveHandler, true); 
document .addEventListener("mouseup",upHandler, true); 




















} 
else if(document ,attachEvent){// 用 于 IE5 一 8 的 IE 事件 模型 


// 在 IE 事件 模型 中 ， 















































// 捕 获 事件 是 通过 调用 元 素 上 的 setCapture( ) 捕 获 它 们 














elementToDrag. 
elementToDrag. 
elementToDrag 
elementToDrag. 


} 
// 我 们 处 理 了 这 个 事件 ， 不 让 任何 其 他 元 素 看 到 它 











setCcapture(); 
attachEvent ("onmousemove",moveHandler ); 





.attachEvent ("onmouseup",upHandler );// 作 为 nouseup 事 件 看 待 鼠 标 





attachEvent("onlosecapture",upHandler ); 









































if(event.stopPropagation)event.stopPropagation( );// 标 准 模型 




















i 








山中 





获 的 丢失 


出 中 





else event.cancelBubble=true;//IE 

// 现 在 阻止 任何 默认 操作 

if(event .preventDefault)event .preventDefault();// 标 准 模型 
else event.returnVvalue=false;//IE/** 

* 当 元 素 正在 被 拖 动 时 ， 这 就 是 捕获 mousemove 事 件 的 处 理 程序 

* 它 用 于 移动 这 个 元 素 

A 

function moveHandler(e){ 
if(1e)e=window.event;//IE 事 件 模 型 

// 移 动 这 个 元 素 到 当前 鼠标 位 置 ， 
// 通 过 滚动 条 的 位 置 和 初始 单 击 的 偏 移 量 来 调整 

var scroll=getSscrolloffsets(); 
elementToDrag.style.left=(e.clientX+scroll.x-deltaX)+"px"; 
elementToDrag.style.top=(e.clientYt+scroll.y-deltaY)+"px";// 同 时 不 让 任何 其 他 元 素 看 到 这 
























































































































































if(e.stopPropagation)e.stopPropagation();// 标 准 
else e.cancelBubble=true;//IE 

了 MA * 

* 这 是 捕获 在 拖 动 结束 时 发 生 的 最 终 mouseup 事 件 的 处 理 程序 

* */ 

function upHandler(e)t{ 
if(!e)e=window.event;//IE 事 件 模 型 

// 注 销 捕获 事件 处 理 程序 

if(document .removeEventListener ){//DOM 事 件 模 型 
document .removeEventListener("mouseup",upHandler, true); 
document .removeEventListener("mousemove",moveHandler, true); 













































































} 

else if(document.detachEvent){//IE 5+ 事 件 模型 
eJementToDrag ,detachEvent("onlosecapture" ,UpHandJer ) ; 
elementToDrag.detachEvent("onmouseup",upHandler ); 
elementToDrag.detachEvent("onmousemove",moveHandler ) ; 
elementToDrag.releaseCapture( ); 

} 

// 并 且 不 让 事件 进一步 传播 
if(e.stopPropagation)e.stopPropagation();// 标 准 模型 
else e.cancelBubble=true;//IE 

} 

} 



































下 面 的 代码 展示 了 在 HTML 文件 中 如 何 使 用 drag0“〈 它 是 示例 16-2 带 


拖 动 功能 的 简化 版 ) : 





<script src="getScrolloffsets.js"></script><!--drag() 需 要 这 个 - -> 
<script src="Drag.js"></script> 

二 !-- 定 义 drag()--> 

去 !- -要 拖 动 的 元 素 - -> 

<div style="position:absolute;left:100px;top:100px;width:250px; 
background-color:white;border:solid black;"> 

二 1!-- 通 过 "标题 栏 " 拖 动 整个 元 素 ， 注 意 onmousedown 属 性 - - > 

<div style="background-color:gray;border-bottom:dotted black; 
padding:3px;font-family:sans-serif;font-weight:bold;" 
onmousedown="drag(this.parentNode, event ); "> 

拖 动 我 <!- -标题 栏 的 内 容 - - > 

</div> 

去 !- -可 拖 动 元 素 的 内 容 - - > 

<p> 这 是 一 个 测试 。 测 试 中 ， 测 试 中 ， 测 试 中 ， 和 Xp><p> 测 试 </p> 之 <p> 测 试 </p> 
</div> 

















这 里 的 关键 是 内 部 过 div> 元 素 的 onmousedown 必 性。 注意 ， 它 使 用 
this.parentNode 指 定 整 个 容器 元 素 将 被 拖 动 。 


17.6 ”鼠标 该 轮 事件 


所 有 的 现代 浏览 器 都 支持 鼠标 深 轮 ， 并 在 用 户 深 动 深 轮 时 触发 事 
件 。 浏 览 器 通常 使 用 鼠标 滚轮 滚动 或 缩放 文档 ， 但 可 以 通过 取消 
mousewheel 事 件 来 阻止 这 些 默认 操作 。 


有 一 些 互 用 性 问题 影响 滚轮 事件 ， 但 编写 路 平台 的 代码 依旧 可 行 。 
在 写本 章 时 ， 除 Firefox 之 外 的 所 有 浏览 器 都 支持 "mousewheel" 事 件 ， 但 
Firefox 使 用 "DOMMouseScroll"， 而 3 级 DOM 事 件 规范 草案 建议 使 用 事件 
名 "wheel" 蔡 代 "mousewheel"。 除 了 事件 名 的 不 同 ， 同 各 种 事件 传递 的 事 
件 对 象 也 使 用 了 不 同 的 属性 名 来 指定 深 轮 发 生 的 旋转 量 。 最 后 注意 ， 基 
础 硬件 也 会 导致 鼠标 深 轮 之 间 的 区 别 。 某 些 硬件 允许 向 前 向 后 的 一 维 深 
动 ， 而 另 一 些 (尤其 是 在 Mac 上 ) 也 人 允许 向 左 向 右 滚 动 〈 在 这 些 鼠 标 
上 ，*“ 滚 轮 ” 其 实 是 轨迹 球 ) 。3 级 DOM 规 范 草 案 甚至 包括 支持 三 维 鼠 
标 “ 深 轮 "， 除 了 上 下 左右 ， 它 还 能 报告 顺 时 针 或 逆 时 针 旋 转 。 


传递 给 "mousewheel" 处 理 程序 的 事件 对 象 有 wheelDelta 属 性 ， 其 指 
定 用 户 深 动 深 轮 有 多 远 。 远 离 用 户 方 回 的 一 次 鼠标 深 轮 “ 单 击 ” 的 
wheelDelta 值 通常 是 120， 而 接近 用 户 方向 的 一 次 “ 单 击 ” 的 值 是 -120 加 。 
在 Safari 和 Chrome 中 ， 为 了 文 持 使 用 二 维 轨迹 球 而 非 一 维 深 轮 的 Apple 鼠 
标 ， 除 了 wheelDelta 属 性 外 ， 事 件 对 象 还 有 wheelDeltaX 和 wheelDeltaY ， 
而 wheelDelta 和 wheelDeltaY 的 值 一 直 相 同 。 


在 Firefox 中 ， 可 以 使 用 非 标 准 的 DOMMouseScroll 事 件 取代 
mousewheel， 使 用 事件 对 象 的 detail 属 性 取代 wheelDelta。 但 是 ，detail 属 
性 值 的 缩放 比率 和 正 负 符号 不 同 于 wheelDelta，detaijl 值 乘 以 -40 和 
wheelDelta 值 相等 。 


在 写本 章 时 ，3 级 DOM 事 件 规范 草案 标准 定义 了 wheel 事 件 作为 
mousewheel 和 DOMMouseScroll 的 标准 版 本 。 传 递 给 wheel 事 件 处 理 程 序 
的 事件 对 象 将 有 deltaX、deltaY 和 deltaZ 属 性 ， 以 指定 三 个 维度 的 旋转 。 
这 些 值 必须 乘 以 -120 才 和 mousewheel 事 件 的 wheelDelta 值 和 正 负 符号 相 
匹配 。 
































对 于 所 有 这 些 事件 类 型 来 次 ， 其 事件 对 象 就 像 鼠 标 事件 对 象 : 它 包 
括 鼠 标 指针 的 坐标 和 键盘 辅助 键 的 状态 。 


例 17-3 演 示 了 如 何 使 用 鼠标 深 轮 事件 和 如 何 实现 跨 平 台 的 互 用 性 。 
它 定 义 了 enclose(0) 函 数 在 一 个 较 大 的 内 容 元 素 〈( 比 如 图 片 》 周 围 包 装 了 
一 个 指定 尺寸 的 “ 徐 体 ”或 “ 视 口 ”并 定义 了 鼠标 深 轮 事件 处 理 程序 让 用 
户 既 能 在 视 口内 移动 内 容 元 素 也 能 调整 视 口 大 小 。 可 以 像 下 面 这 样 在 代 
人 码 中 使 用 enclose() 函 数 : 








<script Src="whenReady, js" 之 入 /Script> 

所 Script src="Enclose.js"></script> 

<script> 

whenReady (function(){ 

enclose(document .getElementById("content"),400,200,-200, -300); 

}); 

</script> 

<style>div.enclosure{border:solid black 10px;margin:10px;}<=/style> 
<img id="content"src="testimage.jpg"/> 





为 了 能 够 在 所 有 常用 浏览 器 中 正确 地 工作 ， 例 17-3 必 须 执行 一 些 浏 
览 器 测试 〈 参 见 13.4.5 节 ) 。 这 个 示例 提前 使 用 了 3 级 DOM 事 件 规范 草 
案 ， 包 括 在 代码 中 使 用 了 wheel 事 件 ， 当 浏览 器 实现 它 时 即 可 使 用 外。 
它 也 包含 未 来 的 一 些 证 明 ， 当 Firefox 开 始 支 持 wheel 或 mousewheel 事 件 
时 就 停止 使 有 DOMMouseScroll。 注 意 ， 例 17-3 也 是 演示 元 素 几何 形状 
和 CSS 定 位 技术 的 示例 ， 这 些 技术 会 在 15.8 节 和 16.2.1 节 中 说 明 。 


例 17-3: 处 理 鼠 标 滚轮 事件 




















// 把 内 容 元 素 装 入 到 一 个 指定 大 小 (最 小 是 50x50) 的 窗 体 或 视 口内 

// 可 选 参数 contentX 和 contentY 指 定 内 容 相 对 于 窗 体 的 初始 偏 移 量 

A//〈 如 果 指 定 ， 它 们 必须 <=0) 

// 这 个 窗 体 有 mousewheel 事 件 处 理 程序 ， 

// 它 允许 用 户 平移 元 素 和 缩放 窗 体 

function enclose(content,framewidth,frameheight,contentX,contentY){// 这 些 参 数 不 仅 仅 
是 初始 值 ， 
// 它 们 保存 当前 状态 ， 能 被 mousewhee1 处 理 程序 使 用 和 修改 
framewidth=Math.max(framewidth, 50); 
frameheight=Math.max(frameheight, 50); 
contentX=Math.min(contentxXx,0)||10; 
contentY=Math.min(contentY,0)||19;// 创 建 frame 元 素 ， 且 设置 CSS 类 名 和 样式 
var frame=document.createElement ("div"); 
frame .className="enclosure";// 这 样 我 们 能 在 样式 表 中 定义 样式 
frame.style.width=framewidth+"px";// 设 置 frame 的 尺寸 
frame.style.height=frameheight+"px"; 
frame.style.overflow="hidden";// 没 有 深 动 条 ， 不 能 溢出 
frame.style.boxSizing="border-box";//border-box 简 化 了 调整 frame 大 小 的 计算 
frame.style.webkitBoxSizing="border-box"; 
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frame.style.MozBoxSizing="border-box";// 把 frame 放 入 文档 中 ， 并 把 内 容 移入 frame 
content.parentNode.insertBefore(frame,content); 
frame.appendChild(content );// 确 定 元 素 相 对 于 frame 的 位 
content.style.position="relative"; 
content.style.left=contentX+"px"; 
content.style.top=contentY+"px";// 我 们 将 需要 针对 下 面 一 些 特定 浏览 器 怪癖 进行 处 理 



























































var isMacwebkit=(navigator.userAgent.indexof("Macintosh")!==-1&& 
navigator .userAgent.indexOof ("webKit")!==-1); 
var isFirefox=(navigator.userAgent.indexof("Gecko")!==-1);// 注 册 mousewheel 事 件 处 型 


frame.onwheel=wheelHandler;// 未 来 浏览 器 

frame .onmousewheel=wheelHandler;// 大 多 数 当 前 浏览 器 
if(isFirefox)// 仅 Firefox 
frame.addEventListener("DOMMouseScroll",wheelHandler, false); 
function wheelHandler (event){ 

var e=event | |window.event;// 标 准 或 TE 事件 对 象 

// 查 找 wheel 事 件 对 象 、 mousewheel 事 件 对 象 (包括 2D 和 14D 形式 ) 

// 和 Firefox 的 DOMMouseScrol1 事 件 对 象 的 属性 ， 
// 从 事件 对 象 中 提取 旋转 量 
// 绽 放 delta 以 便 一 次 鼠标 滚轮 " 单 击 "相对 于 屏幕 的 缩放 增 量 是 30 像 素 
// 如 果 未 来 浏览 器 在 同一 事件 上 同时 触发 "wheel" 和 "mousewheel"， 
// 这 里 最 终 会 重复 计算 ， 
// 所 以 ， 和 希望 取消 whee1 事 件 将 阻止 nousewhee1 事 件 的 产生 
var deltaX=e.deltaX*-30||//wheel 事 件 
e.wheelDeltaX/4||//mousewheel 

0;// 属 性 未 定义 

var deltaY=e.deltaY*-30||//wheel 事 件 
e.wheelDeltaY/4| 1//Webkit 中 的 mousewheel 事 件 
(e.wheelDeltaY===undefined& &// 如 果 没 有 2D 属 性 ， 
e.wheelDelta/4)||// 那 么 就 用 1D 的 深 轮 属性 
e.detail*-10||//Firefox 的 DOMMouseScroll 事 件 

0;// 属 性 未 定义 

// 在 大 多 数 浏览 器 中 ， 每 次 鼠标 深 轮 单 击 对 应 的 delta 是 120 
// 但 是 ， 在 Mac 中 ， 和 鼠标 深 轮 似乎 对 速度 更 敏感 ， 
// 其 delta 值 通常 要 大 120 倍 ， 使 ) App1e 鼠 标 至 少 如 此 

// 使 用 浏览 器 测试 解决 这 个 问题 

if(isMacwebkit){ 

deltaX/=30; 

deltaY/=30; 
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} 

// 如 果 在 Firefox 未 来 版 本 ) 中 得 到 mousewhee1 或 whee1 
// 那 么 就 不 再 需要 DOMMouseScroll 
if(isFirefox&&e.type!=="DOMMouseScroll1") 





出 中 





件 ， 























frame.removeEventListener ("DOMMouseScroll",wheelHandler, false);// 获 取 内 容 元 素 的 当前 





var contentbox=content.getBoundingClientRect(); 
var contentwidth=contentbox.right-contentbox.1left; 
var contentheight=contentbox.bottom-contentbox.top; 
if(e.altKey ){// 如 果 按 下 Alt 键 ， 就 可 以 调整 frame 大 小 
if(deltaX)t{ 

framewidth-=deltaX;// 新 宽度 ， 但 不 能 比 内 容 大 
framewidth=Math.min(framwidth,contentwidth); 
framewidth=Math.max(framewidth,50);// 且 也 不 能 比 50 小 
frame.style.width=framewidth+"px";// 在 frame 上 设置 它 





























} 

if(deltaY){ 

frameheight-=deltaY;// 同 样 的 操作 对 frame 的 高 度 做 一 
frameheight=Math.min(frameheight,contentheight); 
frameheight=Math.max(frameheight-deltayY, 50); 
frame.style.height=frameheight+"px"; 


} 


人 





} 

else{// 没 有 按 下 Alt 辅 助 键 ， 就 可 以 平移 Frame 中 的 内 容 

if(deltaX){// 不 能 再 深 动 了 

var minoffset=Math.min(framewidth-contentwidth,0);// 把 deltax 添 加 到 contentX 中 ， 但 不 能 
小 于 minoffset 

contentX=Math.max(contentX+deltaX,minoffset); 

contentX=Math.min(contentX,0);// 或 比 0 大 

content.style.left=contentX+"px";// 设 置 新 的 偏 移 量 

















} 

if(deltaY){ 

var minoffset=Math.min(frameheight-contentheight,0);// 把 deltaY 添 加 到 contentY,， 但 不 
能 小 于 minoffset 

contentY=Math.max(contentY+deltaY,minoffset); 

contentY=Math.min(contentY,0);// 或 比 0 大 

content.style.top=contentY+"px";// 设 置 新 的 偏 移 

} 


} 

// 不 让 这 个 事件 冒 泡 ， 阻 止 任何 默认 操作 
// 这 会 阻止 浏览 器 使 用 mousewhee1 事 件 滚 动 文档 
// 和 希望 对 于 相同 的 鼠标 滚动 ， 

// 调 用 wheel 事 件 上 的 preventDefault( ) 也 能 阻止 nousewheel 事 件 的 产生 
if(e.preventDefault)e.preventDefault(); 
if(e.stopPropagation)e.stopPropagation(); 
e.cancelBubble=true;//IE 事 件 
e.returnValue=false;//IE 事 件 
return false; 


} 


17.7 ” 拖 放 事件 


例 17-2 展 示 了 如 何在 应 用 中 响应 鼠标 拖 动 。 使 用 像 那样 的 技术 允许 
在 网 页 中 拖 起 和 “放置 元素， 但 真正 的 “ 拖 放 ”是 男 一 回 事 。 拖 放 (Drag- 
and-Drop，DnD) 是 在 “ 拖 放 源 (drag source) ”和 “ 拖 放 目标 (drop 
target) ”之 间 传 输 数 据 的 用 户 界 面 ， 它 可 以 存在 相同 应 用 之 间 也 可 是 不 
同 应 用 之 间 。 拖 放 是 复杂 的 人 机 交互 ， 用 于 实现 拖 放 的 API 总 是 很 复 
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它们 必须 和 底层 OS 结合 ， 使 它们 能 够 在 不 相关 的 应 用 间 工 作 。 

它们 必须 适用 于 “移动 “复制 * 和 “链接 ”数据 传输 操作 ， 人 允许 拖 放 
源 和 拖 放 目标 通过 设置 限制 允许 的 操作 ， 然 后 让 用 户 选 择 (通常 使 用 键 
盘 辅助 键 ) 许可 设置 。 

它们 必须 为 拖 放 源 提供 一 种 方式 指定 待 拖 动 的 图 标 或 图 像 。 


, 它们 必须 为 拖 放 源 和 拖 放 目 标的 DnD 交 互 过 程 提供 基于 事件 的 通 
H。 


在 Microsoft 在 正 的 早期 版 本 引入 了 DnD API。 它 并 不 是 精心 设计 且 
良好 归档 的 API， 但 其 他 浏览 器 都 尝试 复制 它 ， 且 HITML5 标 准 化 了 类 似 
IE DnD API 的 东西 并 增加 了 使 API 更 易于 使 用 的 新 特性 。 在 写本 章 时 ， 
这 些 新 的 易于 使 用 的 DanD API 尚 未 实现 ， 所 以 本 节 包 括 了 IE _ API 来 表示 
对 HTM5 标 准 祝 福 。 


IE DnD API 难 以 使 用 以 及 当前 浏览 器 的 不 同 实现 使 得 无 法 共同 使 用 
API 一 些 较 复杂 的 部 分 ， 但 它 人 允许 Web 应 用 像 普 通 的 桌面 应 用 一 样 参 与 
应 用 间 DnD。 浏 览 器 一 直 能 够 实现 简单 的 DnD。 如 果 在 Web 浏 览 嚣 中选 
择 了 文本 ， 非 常 容易 把 文本 拖 到 字 人 处理 器 中 。 同 时 如 果 在 字 处 理 器 中 选 
择 一 个 URL， 你 能 把 它 拖 到 浏览 器 中 并 使 浏览 器 访问 这 个 URL。 本 节 演 
示 了 如 何 创建 自 定 义 拖 放 源 和 上 自 定义 拖 放 目标 ， 前 者 传输 数据 而 不 是 其 
文本 内 容 ， 后 者 以 某 种 方式 啊 应 拖 放 数据 而 不 是 仅 显 示 它 。 


DnD 总 是 基于 事件 且 JavaScript API 包 含 两 个 事件 集 ， 一 个 在 拖 放 源 
上 触发 ， 另 一 个 在 拖 放 目标 上 和 触发。 所 有 传递 给 DnD 事 件 处 理 程序 的 事 
件 对 象 都 类 似 忌 标 事件 对 象 ， 另 外 它 拥 有 dataTransfer 属 性。 这 个 属性 引 
用 DataTransfer 对 象 ， 该 对 象 定义 DnD API 的 方法 和 属性 。 


拖 放 源 事件 相当 简单 ， 我 们 区 从 它们 开始 。 任 何 有 HTML draggab 
le 属性 的 文档 元 素 都 是 拖 放 源 。 当 用 户 开 始 用 鼠标 在 拖 放 源 上 拖 动 时 ， 
浏览 器 并 没有 选择 元 素 内 容 ， 相 反 ， 它 在 这 个 元 素 上 触发 dragstart 事 
件 。 这 个 事件 的 处 理 程序 就 调用 dataTransfer.setData() 指 定 当 前 可 用 的 拖 
放 源 数据 (和 数据 类 型 )。 ( 当 新 的 HTML5 API 实 现时 ， 可 以 用 
dataTransfer.items.add() 代 蔡 。)〉 这 个 事件 处 理 程 序 也 可 以 设置 
dataTransfer.effectAllowed 来 指定 支持 “移动 “复制 * 和 “链接 ”传输 操作 
中 的 几 种 ， 同 时 它 可 以 调用 dataTransfer.setDragImage() 或 
dataTransfer.addElement()〔 在 那些 支持 这 些 方法 的 浏览 右 中 ) 指定 图 片 
或 文档 元 素 用 做 拖 动 时 的 视 党 表现 。 


在 拖 动 的 过 程 中 ， 浏 览 喜 在 拖 放 源 上 触发 拖 动 事件 。 如 果 想 更 新 拖 
动 图 片 或 修改 提供 的 数据 ， 可 以 监听 这 些 事件 ， 但 一 般 不 需要 注册 “ 拖 
动 ” 事 件 处 理 程序 。 


当 放置 数据 发 生 时 会 触发 dragend 事 件 。 如 果 拖 放 源 支 持 "移动 " 操 
作 ， 它 就 会 检查 dataTransfer.dropEffect 去 看 看 是 否 实际 执 行 了 移动 操 
作 。 如 果 执 行 了 ， 数 据 束 被 传输 到 其 他 地 方 ， 你 应 该 从 拖 放 源 中 删除 


六 
书 。 


























实现 简单 的 自 定 义 拖 放 源 只 需要 dragstart 事 件 。 例 17-4 就 是 这 样 的 
例子 ， 它 在 <span> 元 素 中 用 "hh:mm" 格 式 显 示 当 前 时 间 ， 并 每 分 钟 更 
新 一 次 时 间 。 假 设 这 是 示例 要 做 的 一 切 ， 用 户 能 选择 时 钟 中 显示 的 文 
本 ， 然 后 拖 动 这 个 时 间 。 但 在 这 个 例子 中 JavaScript 代 码 通 过 设置 时 钟 元 
素 的 draggable 属 性 为 tue 和 定义 ondragstart 事 件 处 理 程序 函数 来 使 得 时 钟 
成 为 自 定 义 拖 放 源 。 事 件 处 理 程序 使 用 dataTransfer.setData0 指 元 
整 的 时 间 惟 字符 串 〈 包 括 日 期 、 秒 和 时 区 信息 ) 作为 竺 拖 动 的 数据 。 
还 调用 dataTransfer.setDragIcon0 指 定 竺 拖 动 的 图 片 〈 一 个 时 钟 图 标 ) 。 


例 17-4: 一 个 自 定义 拖 放 源 








<script src="whenReady.js"></script> 

<script> 

whenReady (function( ){ 

var clock=document .getElementById("clock");// 时 钟 元 素 
var icon=new Image();// 用 于 拖 动 的 图 片 
icon.src="clock-icon.png";// 图 片 URL 
// 每 分 钟 显示 一 次 时 间 
function displayTime( ){ 
var now=new Date( ) ;// 获 取 当 前 时 间 

var hrs=now.getHours(),mins=now.getMinutes(); 
if(mins=10)mins="0O"+mins,; 
clock.innerHTML=hrs+":;"+mins;// 显 示 当前 时 间 
setTimeout(dispLayTime,60000);// 一 分 钟 后 将 再 次 运行 
























































} 

displayTime( );// 使 时 钟 能 够 拖 动 
// 我 们 也 能 通过 HTML 属 性 实现 这 个 目的 : <span draggable="true">， 
clock.draggable=true;// 设 置 拖 动 事件 处 理 程序 
clock.ondragstart=function(event)t{ 
var event=event| |window.event;// 用 于 IE 兼 容 性 
//dataTransfer 属 性 是 拖 放 API 的 关键 
var dt=event.dataTransfer;// 告 诉 浏览 器 正在 拖 动 的 是 什么 

// 把 Date() 构 造 函 数 用 做 一 个 返回 时 间 惟 字符 串 的 函数 

dt.setData("Text" ,Date()+"Xn");V// 在 支持 的 浏览 器 中 ， 告 诉 它 拖 动 图 标 来 表现 时 间 玲 
// 没 有 这 行 代码 ， 浏 览 器 也 可 以 使 用 时 钟 文本 图 像 作为 拖 动 的 值 
if(dt.setDragImage)dt.setDragImage(icon,o,0); 













































































































































































. 

}); 

</script> 

<style> 

#clock{/* 使 时 钟 好 看 一 些 */ 

font:bold 24pt sans;background:#ddf;padding:10px; 
border:solid black 2px;border-radius:10px; 


</style> 

hi 二 从 时 钟 中 拖 出 时 间 惟 过/h1>> 

二 span id="clock" 二 </span 二 <!-- 时 间 显 示 在 这 里 - - > 

<textarea cols=60 rows=20></textarea> 二 !-- 把 时 间 惟 放置 在 这 里 - - > 















































拖 放 目标 比 拖 放 源 更 棘手 。 任 何 文档 元 素 都 可 以 是 拖 放 目标 ， 这 不 
需要 像 拖 放 源 一 样 设置 HTML 属 性 ， 只 需要 简单 地 定义 合适 的 事件 监听 


程序 。 (但 是 使 用 新 的 HTML5 DnD API, 将 可 以 在 拖 放 目 标 上 定义 
dropzone 属 性 来 取代 定义 后 面 介绍 的 一 部 分 事件 处 理 程序 。) 有 4 个 事 
件 在 拖 放 目标 上 触发 。 当 拖 放 对 象 (dragged object) 进入 文档 元 素 时 ， 
浏览 器 在 这 个 元 素 上 触发 dragenter 事 件 。 拖 放 目 标 应 该 使 用 
dataTransfer.types 属 性 确定 拖 放 对 象 的 可 用 数据 是 否 是 它 能 理解 的 格 

式 。 (也 可 以 检查 data ”Transfer.effectAllowed 确 保 拖 放 源 和 拖 放 目标 同 
意 使 用 移动 、 复 制 和 链接 操作 中 的 一 个 。) 如果 检 查 成 功 ， 拖 放 目 标 必 
须要 让 用 户 和 浏览 右 都 知道 它 对 放置 感 兴 趣 。 可 以 通过 改变 它 的 边框 或 
背景 颜色 来 癌 用 户 反 饿 。 令 人 吃惊 的 是 ， 拖 放 目 标 通过 取消 事件 来 告知 
浏览 器 它 对 放置 感 兴 趣 。 


如 果 元 素 不 取消 浏览 器 发 送 给 它 的 dragenter 事 件 ， 浏 览 右 将 不 会 把 
它 作 为 这 次 拖 放 的 拖 放 目标 ， 并 不 会 同 它 再 发 送 任何 事件 。 但 如 果 拖 放 
目标 取消 了 dragenter 事 件 ， 浏 览 器 将 发 送 dragover 事 件 表示 用 户 继 续 在 
目标 上 拖 动 对 象 。 再 一 次 令 人 吃惊 的 是 ， 拖 放 目 标 必 须 监 听 且 取消 所 有 
这 些 事情 来 表明 它 继 续 对 放置 感 兴趣 。 如 果 拖 放 目 标 想 指定 它 只 允许 移 
动 、 复 制 或 链接 操作 ， 它 应 该 使 用 dragover 事 件 处 理 程 序 来 设置 
dataTransfrer.dropEftect。 


如 果 用 户 移动 拖 放 对 象 离开 通过 取消 事件 表明 有 兴趣 的 拖 放 目标 ， 
那么 在 拖 放 目 标 上 将 触发 dragleave 事 件 。 这 个 事件 的 处 理 程序 应 该 恢复 
元 素 的 边框 或 背景 颜色 或 取消 任何 其 他 为 响应 dragenter 事 件 而 执行 的 可 
视 化 反 饿 。 遗 憾 的 是 ，dragenter 和 dragleave 事 件 会 冒 泡 ， 如 果 拖 放 目 标 
内 部 有 髓 套 元 素 ， 想 知道 dragleave 事 件 表示 拖 放 对 象 从 拖 放 目标 离开 到 
目标 外 的 事件 还 是 到 目标 内 的 事件 非常 困难 。 


最 后 ， 如 果 用 户 把 拖 放 对 象 放 置 到 拖 放 目标 上 ， 在 拖 放 目 标 上 会 触 
发 drop 事 件 。 这 个 事件 的 处 理 程序 应 该 使 用 dataTransfer.getData() 获 取 传 
输 的 数据 并 做 一 些 适当 的 处 理 。 男 外 ， 如 果 用 户 在 拖 放 目标 放置 一 或 多 
个 文件 ，dataTransfer.files 属 性 将 是 一 个 类 数组 的 File 对 象 。《〈 见 例 18-11 
的 说 明 。) 使 用 新 的 HTML5 API，drop 事 件 处 理 程序 将 能 遍历 
dataTransfer.items[] 的 元 素 去 检查 文件 和 非 文 件数 据 。 


例 17-5 演 示 如 何 使 < 二 元 素 成 为 拖 放 目标 ， 同 时 如 何 使 它们 中 的 
<li 之 元 素 成 为 拖 放 源 。 这 个 示例 是 一 段 不 唐 突 的 JavaScript 名 代码 ， 它 
查找 class 属 性 包含 "dnd" 的 二 Ul> 元 素 ， 在 它 找到 的 此 类 列表 上 注册 DnD 
事件 处 理 程序 。 这 些 事件 处 理 程序 使 列表 本 号 成 为 拖 放 目 标 ， 在 这 个 列 
表 上 放置 的 任何 文本 会 变 成 新 的 列表 项 并 插入 到 列表 尾部 。 这 些 事件 处 





























理 程序 也 监听 列表 项 的 拖 动 ， 使 得 每 个 列表 项 的 文本 可 用 于 传输 。 拖 放 
源 事件 处 理 程序 允许 “复制 ?和 "移动 操作， 并 在 移动 操作 下 放置 对 象 时 
人 








例 17-5: 作为 拖 放 目 标 和 拖 放 源 的 列表 





WA 

*DnD API 相 当 复 杂 ， 且 浏览 器 也 不 完全 兼容 
* 这 个 例子 基本 正确 ， 但 每 个 浏览 器 会 有 一 点 不 同 ， 每 个 似乎 都 有 自身 独 有 的 bug 
* 这 些 代码 不 会 尝试 浏览 器 特有 的 解决 方案 

*/ 
whenReady (function( ){// 当 文档 准备 就 绕 时 运行 这 个 函数 

// 查 找 所 有 的 <ul class='dnd' 元 素 ， 并 对 其 调用 dnd( ) 函 数 

var lists=document.getElementsByTagName("ul"); 

var regexp=/\bdnd\b/; 

for(var i=0;i<1lists.1length;i++) 
if(regexp.test(lists[i].className))dnd(lists[i]);// 为 列表 元 素 添加 拖 放 事 件 处 理 程 序 
function dnd(list){ 

var original class=list.className;// 保 存 原始 CSS 类 

var entered=0;// 跟 踪 进 入 和 离开 
// 当 拖 放 对 象 首次 进入 列表 时 调用 这 个 处 理 程序 
// 它 会 检查 拖 放 对 象 包含 的 数据 格式 它 是 否 能 处 理 
// 如 果 能 ， 它 返回 false 来 表示 有 兴趣 放置 
// 在 这 种 情况 下 ， 它 会 高 亮 拖 放 目 标 ， 让 用 户 知道 该 兴 
list.ondragenter=function(e)t{ 
e=e | |window.event;// 标 准 或 TE 事件 
var from=e. relatedTarget; //dragenter 和 dragleave 事 件 冒 泡 ， 
// 它 使 得 在 像 <ul 二 元 素 有 一 1i 二 子 元 素 的 情况 下 ， 

// 何 时 高 亮 显示 或 取消 高 亮 显示 元 素 变 得 棘手 

// 在 定义 relatedTarget 的 浏览 器 中 ， 我 们 能 跟踪 它 

// 否 则 ， 我 们 需要 通过 统计 进入 和 离开 的 次 数 

// 如 果 从 列表 外 面 进入 或 第 一 次 进入 ， 

// 那 么 需要 做 一 些 处 理 
entered++; 

if( (from& & !ischild(from,1list))||entered==1){// 所 有 的 DnD 信 息 都 在 dataTransfer 对 象 上 
var dt=e.dataTransfer;//dt.types 对 象 列 出 可 用 的 拖 放 数 据 的 类 型 或 格式 
//HTML5 定 义 这 个 对 象 有 contains() 方 法 
// 在 一 些 浏览 器 中 ， 它 是 一 个 有 index0f( ) 方 法 的 数组 
// 在 IE8 以 及 之 前 版 本 中 ， 它 根本 不 存在 
var types=dt .types;// 可 用 数据 格式 是 什么 

// 如 果 没 有 任何 类 型 的 数据 或 可 用 数据 是 纯 文本 格式 ， 

// 那 么 高 亮 显 示 列 表 让 用 户 知 道 我 们 正在 监听 拖 放 ， 

/7 同时 返回 false 让 浏览 器 知晓 

if(!types||//IE 

(types.contains& &types.contains("text/plain"))||//HTMLS 
(types.indexOof & &types.indexof("text/plain")!=-1))//webkit 





































































































































































































































































































































































































































































































































































































list.className=original class+"droppable"; 
return false; 











} 

// 如 果 我 们 无 法 识别 数据 类 型 ， 我 们 不 希望 拖 放 
return;// 没 有 取消 
} 

return false;// 如 果 不 是 第 一 次 进入 ， 我 们 继续 保持 兴趣 
}; // 当 鼠标 指针 悬 停 在 列表 上 时 ， 会 调用 这 个 处 理 程序 





















































els 





// 我 们 必须 定义 这 个 处 理 程序 
list.ondragover=function(e){return 


用 用 这 个 处 理 





程序 









































并 返回 false， 和 否则 这 个 拖 放 操 作 将 取消 








// 如 果 我 们 真正 离开 这 个 列表 (不 是 仅仅 从 一 个 列表 项 到 另 一 个 〉， 
// 那 么 取消 高 亮 显示 它 
list.ondragleave=function(e)t{ 
e=e| |lwindow.event,; 


var to=e.relatedTarget;// 如 果 我 们 要 到 列表 以 外 的 元 素 或 打破 i 


























// 那 么 取消 高 亮 显示 列表 
entered--， 
if((to&&!ischild(to,1ist))||lentered<==0){ 
lJist.className=original class,; 
entered=0; 























} 

return false; 

};// 当 实际 放置 时 ， 会 调用 这 个 程序 
// 我 们 会 接受 放下 的 文本 间 





false;};// 当 拖 放 对 象 移出 






































// 获 得 


//"Text" 是 "text/plain" 的 昵称 ， 
//IE 不 支持 "text/plain"， 所 以 在 这 E 
var dt=e.dataTransfer;//dataTr 
var text=dt.getData("Text");// 获 取 放 置 的 纯 文本 数 j 


// 如 果 得 到 一 些 文 本 ， 把 它 放 入 列表 尾部 的 新 项 中 





放置 的 纯 文 本 数 




















// 获 得 事 









































中 下 
~ 
fi 




















if(text){ 
var item=document .createElement ("1i");// 创 建新 <1i>> 
item.draggable=true;// 使 它 可 拖 动 
item.appendchild(document.createTextNode(text));// 添 加 文本 
list.appendchild(item); // 把 它 添加 到 列表 


// 恢 复 列 表 的 原始 村 





























f 式 日 重 1 

















置 进 入 次 数 

















list.className=original class,; 
entered=0， 
return false 


} 
};// 使 原 

















台所 有 列表 项 都 可 拖 动 


dj"Text" 


fer 对 象 


中 


:将 其 放 到 一 个 新 的 1i 二 元 素 中 
list.ondrop=function(e)t{ 
e=e||window,event 届 








var items=list.getElementsByTagName("1i"); 
for(var i=0;i<items.length;i++) 


items[i]. draggable= true;// 为 拖 动 列表 项 注 
// 注 意 我 们 把 处 理 各 应 放 在 列表 上 ， 
冒 ; 

始 拖 动 对 象 ， 


// 让 寻 


// 当 在 列表 中 开 











了 件 从 列表 项 向 上 









































list.ondragstart=function(e)t{ 
var e=e| |window.event; 


var target=e.target| le. srcElement;// 如 果 它 不 是 从 1i 二 向 上 冒 
EE 要 的 dataTransfer 对 象 


会 调用 这 个 处 理 程序 


主 册 习 














if(target.tagName!=="LI")return false; // 获 得 最 
var dt=e.dataTransfer; // 设 置 拖 动 的 数据 和 数据 类 型 


dt.setData("Text", target.inn 
dt .effectAllowed="copyMove"; 
};// 当 成 功 的 放置 后 ， 将 调 





















































j 这 个 处 理 程序 





list.ondragend=function(e){ 
e=e| |lwindow.event; 
var target=e. target| |e.srcElement;// 如 果 这 个 拖 放 操 作 是 move， 那 么 要 删除 列表 项 


// 在 IE8 中 ， 它 将 是 "none",， 





// 但 为 IE 强 制 设置 "move" 会 阻止 其 他 浏览 器 给 用 户 选 择 复制 还 是 移动 世 
if(e.dataTransfer.dropEffect==="move") 

















和 件 处 理 


BT J 




















列表 或 从 其 子 元 素 中 移出 时 ， 














请 








和 












































target .parentNode.removeChild(target); 


} 
// 这 是 在 ondragenter 和 ondragleave 使 用 的 工 














// 如 果 a 是 b 的 子 元 素 则 返回 true 
function ischild(a,b)t{ 








其 函数 





9 





可 


机 会 


下 和 进入 次 数 的 平 








erText||target.textContent ) ;// 设 置 允 许 复 








除非 在 之 前 的 ondrop 处 里 程序 中 显 式 设置 它 为 move 


生 | 





让 


泡 ， 那 么 忽略 它 





I 和 移动 这 些 数 扩 


for(;a;a=a.parentNode)if(a===b)return true; 
return false; 


} 
}); 


17.8 ”文本 事件 


浏览 器 有 3 个 传统 的 键盘 输入 事件 。keydown 事 件 和 keyup 事 件 是 低 
级 事件 ， 下 一 节 会 介绍 。 不 过 ，keypress 事 件 是 较 高 级 的 事件 ， 它 表示 
产生 了 一 个 可 打印 字符 。3 级 DOM 事 件 规范 草案 定义 一 个 更 通用 的 
textinput 事 件 ， 不 管 来 源 ( 例 如 : 键盘 、 精 贴 或 拖 放 形式 的 数据 传输 、 
亚洲 语言 输入 法 、 声 音 或 手写 识别 系统 ) ， 无 论 何 时 用 户 输入 文本 时 都 
会 触发 它 。 在 写本 章 时 ，textinput 事 件 尚 未 得 到 文 持 ， 但 Webkit 浏 览 喜 
支持 一 个 非常 类 似 的 "textInput"〈 使 用 大 写字 母 1) 事件 。 


建议 中 的 textinput 事 件 和 已 经 实现 的 textImnput 事 件 都 传递 一 个 简单 的 
事件 对 象 ， 它 有 一 个 用 于 保存 输入 文本 的 data 属 性 。〔( 男 一 个 属性 
inputMethod 是 建议 用 于 指定 输入 源 ， 但 它 尚 未 实现 。) 对 于 键盘 输入 ， 
data 属 性 通常 只 保存 单个 字符 ， 但 其 他 输入 源 通 常 可 能 包含 多 个 字符 。 


通过 keypress 事 件 传递 的 对 象 更 加 混乱 。 一 个 keypress 事 件 表示 输入 
的 单个 字符 。 事 件 对 象 以 数字 Unicode 编 码 的 形式 指定 字符 ， 所 以 必须 
用 String.fromCharCode() 把 它 转 换 成 字符 串 。 在 大 多 数 浏览 器 中 ， 事 件 
对 象 的 keyCode 属 性 指定 了 输入 字符 的 编码 。 但 是 由 于 历史 的 原因 ， 
Firefox 使 用 的 是 charCode 属 性 。 大 多 数 浏 览 器 只 在 当 产 生 可 打印 字符 时 
触发 keypress 事 件 。 但 是 Firefox 在 产生 非 打 印字 符 时 也 触发 keypress 事 
件 。 为 了 检测 这 种 情况 〈 这 样 就 能 忽略 非 打 印字 符 ) ， 可 以 查找 有 
charCode 属 性 但 值 为 0 的 事件 对 象 。 


可 以 通过 取消 textinput、textInput 和 keypress 事 件 来 阻止 字符 输入 ， 
这 意味 着 可 以 使 用 这 些 事件 来 过 滤 输 入 。 例 如 ， 你 可 能 想 阻 止 用 户 在 只 
接受 数字 数据 的 域 中 输入 字母 。 例 17-6 是 一 段 不 唐 突 的 JavaScript 代 码 模 
块 ， 它 恰好 实现 了 这 种 过 滤 。 它 查找 有 额外 属性 《〈 非 标准 ) data- 
allowed-chars 的 二 input type=text 之 元 素 。 这 个 模块 在 这 类 文本 输入 域 上 
注册 了 textinput、textInput 和 keypress 事 件 的 处 理 程序 来 限制 用 户 只 能 输 
入 出 现在 许可 属性 值 中 的 字符 。 例 17-6 顶 部 注释 的 开头 部 分 包含 使 用 这 
个 模块 的 一 些 HTML 代 码 示例 。 


























例 17-6: 过 滤 用 户 输入 





yA 
*InputFilter.js: ` 唐 突 地 过 滤 <ijnput 二 元 素 的 键盘 输入 






































“这 个 模 岂 查 找 文档 中 拥有 "data-allowed-chars" 属 性 的 所 有 二 input type="text" 之 元 素 














它 为 所 有 这 类 元 素 都 注册 keypress、 textInput 和 textinput 事 件 处 理 程序 ， 
人 用 户 只 能 输入 出 现在 许可 属性 值 中 的 字符 
* 如 果 二 input 二 元 素 也 有 一 个 "data-messageid" 属 性 ， 
* 那 么 认为 这 个 值 是 男 一 个 文档 元 素 的 id 
* 如 果 用 户 输入 了 不 允许 的 字符 ， 那 么 会 显示 消息 元 素 
* 如 果 用 户 输入 了 允许 的 字符 ， 那 么 会 隐藏 消息 元 素 
* 这 个 信息 id 元 素 用 于 向 用 户 说 明 拒 绝 输 入 的 原因 


大 个 


已 通常 应 该 由 CSS 控 制 样式 ， 所 以 它 开始 不 可 见 

































































































































































* 下 面 是 使 用 这 个 模块 的 HTML 代 码 示例 
* 邮政 编码 : 二 input id="zip"type="text" 
*data-allowed-chars="0123456789"data-messageid="zipwarn'" > 












































han id="zipwarn'"style="color:red;Vvisibility:hidden" 之 只 支持 数字 </span> 














* 这 个 模块 相当 地 不 唐 突 ， 它 没有 定义 全 局 命名 空间 中 的 任何 符号 

*/ 

whenReady (function( ){// 当 文档 加 载 完 毕 时 ， 运 行 这 个 函数 

// 查 找 所 有 < input 之 元 素 

var inputelts=document .getElementsByTagName("input");// 遍 历 它们 
for(var i=0;i<inputelts.Jlength;i++){ 












































var elt=inputelts[i];// 跳 过 不 是 文本 域 或 没有 data-allowed-chars 属 性 的 元 素 


if(elt.type!="text"||!elt.getAttribute("data-allowed-chars")) 
continue;// 在 input 元 素 上 注册 事件 处 理 程序 函数 

/7 传统 的 Keypress 事 件 处 理 程序 能 够 在 任何 地 方 运行 

//textInput (混合 大 小 写 ) 在 2010 年 后 Safari 和 Chrome 支 持 

//textinput (小 写 ) 是 3 级 DOM 事 件 规范 草案 中 的 版 本 
if(elt.addEventListener){ 
elt.addEventListener("keypress",filter,false); 
elt.addEventListener("textInput",filter, false); 
elt.addEventListener("textinput",filter, false); 






































} 

else{// 不 支持 addEventListener( ) 的 IE 也 不 会 支持 textinput 
elt.attachEvent("onkeypress",filter); 

} 

// 这 是 用 于 过 滤 用 户 输入 的 keypress、textInput 和 textinput 事 件 处 理 程序 
function filter(event){// 获 取 事 件 对 象 和 目标 元 素 对 象 

var e=event | |window.event;// 标 准 或 TE 模型 
var target=e.target||e. srcElement; // 标 准 或 TE 模型 

var text=null;// 输 入 的 文本 

// 获 取 输 入 的 字符 或 文本 
if(e.type==="textinput"||e.type==="textInput")text=e.data; 
else{// 这 是 传统 的 keypress 事 件 

// 对 于 可 打印 键 的 keypress 事 件 ，Firefox 使 用 charcode 














































































































var code=e.charCode| le.keyCode;// 如 果 按 下 的 是 任何 形式 的 功能 键 ， 不 要 过 滤 它 





业 


if(code<321||//ASCII 控 制 字 符 
e.charcode==0| |// 功 能 键 ( 仅 指 Firefox) 
e.ctrlKey||e.altkKey)// 按 下 辅助 键 
return;// 不 过 滤 这 个 事件 
// 把 字符 编码 转化 为 字符 囊 


var text=String.fromCharCode(code); 



































} 
// 现 在 需要 从 input 元 素 中 寻找 所 需 信 息 





azr 亡 和 全 


var allowed=target.getAttribute("data-allowed-chars");// 合 法 字符 

var messageid=target.getAttribute("data-messageid");// 信 息 元 素 id 

if(messageid)// 如 果 存 在 消息 元 素 jd， 那 么 获取 这 个 元 素 

var messageElement=document .getElementById(messageid);// 遍 历 输 入 文本 中 的 字符 

for(var i=0;i<text.length;i++)t{ 

Var c=text.charAt(i); 

if(allowed.index0f(c)==-1){// 这 是 不 允许 的 字符 吗 ? 

// 如 果 存 在 不 合法 字符 ， 显 示 消息 元 素 

if(messageElement)messageElement .style.visibility="visible";// 取 消 默认 行为 ， 所 有 不 会 
插入 文本 

if(e.preventDefault)e.preventDefault(); 

if(e.returnValue)e.returnValue=false; 

return false; 


















































} 
// 如 果 所 有 的 字符 都 合法 ， 隐 藏 存在 的 消息 元 素 


if(messageElement)messageElement.style.visibility="hidden"; 

















}); 





keypress 和 textinput 事 件 是 在 新 输入 的 文本 真正 插入 到 聚焦 的 文档 元 
素 前 触发 ， 这 就 是 这 些 事件 处 理 程序 能 够 取消 事件 和 阻止 文本 插入 的 原 
因 。 浏 览 器 也 实现 了 在 文本 插入 到 元 素 后 才 触 发 的 input 事 件 类 型 input。 
虽然 这 些 事件 不 能 取消 ， 不 能 指定 其 事件 对 象 中 的 最 新 文本 ， 但 它们 能 
以 某 种 形式 提供 元 素 文 本 内 容 发 生 改 变 的 通知 。 例 如 ， 如 果 想 确保 输入 
框 中 输入 的 任何 文本 都 是 大 写 ， 那 么 可 以 像 如 下 这 样 使 用 input 事 件 : 

















姓氏 : 二 input type="text"oninput="this.value=this.value.toUpperCase();"> 





HTML5 标 准 化 了 input 事 件 ， 除 下 外 的 所 有 浏览 器 都 支持 它 。 在 下 

中 ， 可 以 使 用 不 标准 的 propertychange 事 件 检测 文本 输入 元 素 的 value 属 

人 例 17-7 展 示 可 以 用 一 种 跨 平 台 的 方式 强制 所 
险 入 都 大 写 。 


例 17-7: 使 用 propertychange 事 件 探 测 文本 输入 





function forceToUpperCase(element){ 

if(typeof element==="string")element=document ,getEJementById(eJement ) ， 

element .oninput=upcase 

element .onpropertychange=upcaseOnPropertyChange;// 简 易 案例 : 用 于 input 事 件 的 处 理 程 序 

function upcase(event ){this.value=this.value.toUpperCase( );}// 疑 难 案例 : 用 于 
propertychange 事 件 的 处 理 程序 

function upcaseOnPropertyChange(event){ 

var e=event | |window.event;// 如 果 value 属 性 发 生 改 变 

if(e. propertyName==="value"){// 移 除 onpropertychange 处 里 程序 ， 避 人 免 循环 调 

this.onpropertychange=null;// 把 值 都 变 成 大 写 

this.value=this .value. toUpperCase( ); // 然 后 恢复 原来 的 propertychange 处 理 程序 

this,onpropertychange=upcaseonPropertyCchange 



















































































nn 

















} 
} 
} 


17.9 ”键盘 事件 


当 用 户 在 键盘 上 按 下 或 释放 按键 时 ， 会 发 生 keydown 和 keyup 事 件 。 
它们 由 辅助 键 、 功 能 键 和 字母 数字 键 产生 局 如 果 用 户 按 键 时 间 足 够 长 会 
导致 它 开 始 重复 ， 那 么 在 keyup 事 件 到 达 之 前 会 收 到 多 个 keydown 事 件 。 


这 些 事件 相关 的 事件 对 象 都 有 数字 属性 keyCode， 指 定 了 按 下 的 键 
是 哪个 。 对 于 产生 可 打印 字符 的 按键 ，keyCode 值 是 按键 上 出 现 的 主要 
字符 的 Unicode 编 码 。 无 论 Shift 键 处 于 什么 状态 ， 字 母 键 总 是 产生 大 写 
keyCode 值 ， 这 是 因为 它们 出 现在 物理 键盘 上 。 类 似 地 ， 即 使 为 了 输入 
标点 字符 而 按 下 了 Shift 键 ， 但 数字 键 产 生 的 keyCode 值 就 是 出 现在 对 应 
键 上 的 数字 。 对 于 不 可 打印 键 ，keyCode 属 性 将 是 一 些 其 他 值 。keyCode 
值 尚 未 标准 化 ， 但 适当 的 跨 浏 览 器 兼容 性 是 可 行 的 。 例 17-8 包 含 一 个 从 
keyCode 值 到 功能 键 名 字 的 映射 。 


类 似 鼠 标 事件 对 象 ， 键 盘 事件 对 象 有 altKey、ctrIKey、metakey 和 
shiftKey 属 性 ， 当 事件 发 生 时 ， 如 末 对 应 的 辅助 键 被 按 下 ， 那 么 它们 会 
被 设置 为 true。 


keydown 和 keyup 事 件 及 keyCode 属 性 已 经 使 用 了 十 多 年 ， 但 从 未 标 
准 化 。3 级 DOM 事 件 规范 草案 标准 化 了 keydown 和 keyup 事 件 类 型 ， 但 没 
有 党 试 标准 化 keyCode。 相 反 ， 它 定义 了 新 属性 key， 它 会 以 字符 串 的 形 
式 包 售 键 名 。 如 果 按 键 对 应 的 是 一 个 可 打印 字符 ， 那 么 key 属 性 将 仅仅 
是 这 个 可 打印 字符 。 如 果 按 键 是 功能 键 ， 那 么 key 属 性 将 是 
像 "F2"、"Home" 或 "Left" 这 样 的 值 。 


在 写本 章 时 ，3 级 DOM 事 件 的 key 属 性 尚未 在 任何 浏览 器 中 实现 。 
但 是 ， 像 Safari 和 Chrome 这 类 基于 Webkit 的 浏览 器 为 这 些 事件 的 事件 对 
象 定义 了 一 个 keyldentifier 属 性 。 类 似 key，keyldentifier 是 字符 串 而 非 数 
字 ， 并 且 对 于 功能 键 ， 它 是 像 "Shift"、"Enter" 这 样 有 用 的 值 。 对 于 可 打 
印字 符 ， 该 属性 保存 了 这 个 字符 的 Unicode 编 码 的 字符 串 表 示 形 式 ， 其 
用 处 要 小 一 些 。 例 如 ， 对 于 A 键 ， 它 是 "U+0041"。 











例 17-8 定 义 了 一 个 Keymap 类 ， 把 





像 "PageUp"、"Alt_Z" 和 "ctrl+alt+shift+F5" 这 些 按键 标识 符 映 射 到 
JavaScript 函 数 ， 这 些 函数 会 作为 按键 的 响应 而 调用 。 以 JavaScript 对 象 
的 形式 把 按键 崔 绑 定 传 给 Keymap0 构 霹 轴 数 ， 在 对 象 中 属性 名 是 按键 标 
识 符 ， 而 属性 值 是 处 理 程 序 函 数 。 使 用 bind0 和 unbind(O 方 法 添加 和 移 除 
绑 定 。 使 用 install0) 方 法 在 HTML 元 素 〈( 通 常 是 Document 对 象 ) 上 配置 
Keymap。 通 过 在 元 素 上 注册 keydown 事 件 处 理 程序 配置 Keymap。 每 次 
键 被 按 下 ， 处 理 程 序 检查 是 否 有 与 按键 相关 的 函数 。 如 果 有 ， 束 调用 
它 。 在 keydown 事 件 处 理 程序 中 如 果 能 定义 3 级 DOM 事 件 的 key 属 性 就 会 
优先 使 用 它 。 如 果 没 有 ， 它 会 查找 Webkit 的 keyIdentifier 属 性 然后 使 用 
它 。 和 否则 ， 已 退 同 使 用 个 标准 的 keyCode 属 性 。 例 17-8 开 头 有 段 很 长 的 
注释 来 解 兰 这 个 模块 的 更 多 详细 信息 。 


例 17-8: 键盘 快捷 键 的 Keymap 类 














/* 
*Keymap .js: 绑 定 键盘 事件 和 处 理 程 序 函 数 




















* 这 个 模块 定义 一 个 Keymap 类 
* 这 个 类 的 实例 表示 按键 标识 符 〈 下 面 有 定义 〉 到 处 理 程序 函数 的 映射 
*Keymap 能 配置 到 HTML 元 素 上 以 处 理 keydown 事 件 

* 当 此 类 事件 发 生 时 ，Keymap 会 使 用 它 的 映射 来 调用 合适 的 处 理 程序 




























































































* 当 创建 Keymap 时 ， 
* 能 传 入 一 个 JavaScript 对 象 ， 它 表示 Keymap 绑 定 的 初始 设置 
* 对 象 的 属性 名 是 按键 标识 符 ， 而 属性 值 是 处 理 程序 函数 

* 在 创建 Keymap 之 后 ， 
* 通 过 给 bind( ) 方 法 传 入 按键 标识 符 和 处 理 程 序 函 数 可 以 添加 一 个 新 绑 定 
* 能 给 unbind( ) 方 法 传 入 按键 标识 符 来 移 除 绑 定 
* 通 过 给 Keymap 的 ijnstall( ) 方 法 传 入 像 document 对 象 这 样 的 HTML 元 素 ， 然 后 就 可 以 使 
“install( ) 方 法 给 指定 的 对 象 添加 onkeydown 事 件 处 理 程序 

* 当 调用 这 个 处 理 程序 时 ， 
* 它 判断 按 下 键 的 按键 标识 符 ， 

* 如 果 有 这 个 按键 标识 符 的 任何 绑 定 ， 就 调用 对 应 的 处 理 程序 函数 
* 一 个 Keymap 可 以 在 多 个 HTML 元 素 上 配置 


大 


“按键 标识 符 


“按键 标识 符 是 一 个 区 分 大 小 写 的 字符 串 ， 
* 它 表示 按键 加 上 同一 时 刻 按 下 的 辅助 键 

* 按键 的 名 字 通 常 是 按键 上 的 字符 〈 不 会 变 ) 

“法 定 的 键 名 包括 NAM、 7"、 nF2"、 "PageUp"、 "Left"、 "Backspace" 和 "Esc" 
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* 请 参阅 模块 的 Keymap ,keyCodeToKeyName 对 象 中 的 键 名 列表 
* 这 里 有 3 级 DOM 规 范 定义 的 键 名 子 集 ， 
* 并 且 当 实现 时 这 个 类 将 使 用 事件 对 象 的 key 属 性 


* 按键 标 识 符 也 可 能 包含 辅助 键 前 绥 

* 这 些 前 缀 是 ALlt、Ctr1L、Meta 和 Shift 

* 它 们 区 分 大 小 写 ， 且 必须 使 用 空格 、 下 划 线 、 连 字符 或 "+" 来 和 按键 名 或 彼此 分 天 
* 例 如 : "SHIFT+A"、"Alt_F2"、"meta-v" 和 "ctrl alt left" 

* 在 Mac 中 ，Meta 是 Commnad 键 ，AlLt 是 0ption 键 











































































































这 个 











* 一 些 浏览 器 把 Windows 刍 映射 到 Meta 辅 助 键 
* 处 理 程 序 函 数 


* 处理 程序 在 配置 Keymap 的 文档 或 文档 元 素 上 作为 其 方法 调用 ， 
* 并 传 入 两 个 参数 : 
*1 )keydown 事 件 的 事件 对 象 
*2 ) 按 下 的 按键 的 标识 符 
* 处 理 程序 的 返回 值 就 是 keydown 处 理 程序 的 返回 值 

* 如 果 处 理 程序 函数 返回 false， 

*Keymap 将 停止 冒 泡 并 取消 和 keydown 事 件 相关 的 默认 操作 









































































































































限制 | 


* 在 所 有 按键 上 绑 定 一 个 事件 处 理 函 数 是 不 可 能 的 
* 操 作 系统 会 限制 一 些 按键 序列 《例如 ，AlLt+F4) 



































全 











而 浏览 器 本 身 也 可 能 限制 其 他 一 些 按键 序列 (比如 : Ctrl+S) 

这 些 代码 受 限 于 浏览 器 、0S 和 本 地 设置 。 功 能 键 和 有 辅助 键 的 功能 键 工 作 得 很 好 ， 
而 没有 辅助 键 的 字母 数字 键 也 工作 得 很 好 

*Ctrl 和 Alt 与 字母 键盘 键 的 结合 非常 强健 


* 在 美国 标准 键盘 布局 上 ， 
* 能 够 支持 大 多 数 不 需 要 Shift 键 的 标点 字符 (= 
但 是 它们 不 特别 适合 其 他 备查 布局 ， 应 该 得 多 






































































































































[] ; '，, 八 但 不 包括 连 字符 ) 















































/这 是 构造 函数 

function Keymap(bindings)t{ 
this.map={};// 定 义 按键 标识 符 -二 处 理 程序 映射 
if(bindings){// 给 它 复 制 初始 绑 定 

for(name in bindings)this,.bind(name,bindings[name]); 


} 


} 

// 绑 定 指 定 的 按键 标识 符 和 指定 的 处 理 程序 函数 

Keymap .prototype,bind=function(key,func){ 

this ,map[Keymap .normalize(key)]=func 

}; 7// 删 除 指定 按键 标识 符 的 绑 定 

Keymap .prototype,unbind=function(key){ 

delete this.map[Keymap.normalize(key)]; 

};// 在 指定 HTML 元 素 上 配置 Keymap 

Keymap .prototype.install=function(element ){// 这 是 事件 处 理 程序 函数 

var keymap=this; 

function handler(event){freturn keymap.dispatch(event,element);}// 现 在 安装 它 
if(element.addEventListener) 

element.addEventListener("keydown",handler, false); 

else if(element.attachEvent) 

element.attachEvent("onkeydown",handler); 

};// 这 个 方法 基于 Keymap 绑 定 分 派 按键 事件 

Keymap .prototype.dispatch=function(event,element){// 开 始 没 有 辅助 键 和 键 名 

var modifiers="" 

var keyname=nu11;// 按 照 标准 的 小 写字 母 顺 序 构建 辅助 键 字符 串 
if(event.altkey)modifiers+="alt_"; 
if(event.ctrlkey)modifiers+="ctrl1_"; 
if(event.metakey)modifiers+="meta _"; 
if(event.shiftKey)modifiers+="shift_";// 如 果实 现 3 级 DOM 规 范 的 key 属 性 ， 获 取 keyname 很 容易 
if(event.key)keyname=event.key;// 在 Safari 和 Chrome 上 用 keyIdentifier 获 取 功 能 键 键 名 

else if(event.keyIdentifier& &event.keyIdentifier.substring(0,2)!=="U+") 
keyname=event .keyIdentifier;// 否 则 ， 使 用 keyCcode 属 性 和 后 面 编码 到 键 名 的 映射 
else keyname=Keymap.keyCodeToKeyName[event.keyCode];// 如 果 不 能 找 出 键 名 ， 只 能 返回 并 忽略 
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山中 


有 件 
if(!keyname)return;// 标 准 的 按键 jd 是 辅助 键 加 上 小 写 的 键 名 
var keyid=modifiers+keyname.toLowerCase();// 现 在 查看 按键 标识 符 是 否 绑 定 了 任何 东西 







































































var handler=this.map[keyid]; 
if(handler ){// 如 果 这 个 键 有 处 理 程序 ， 调 用 它 

// 调 用 处 理 程序 函数 

var retval=handler.call(element,event, keyid);// 如 果 处 理 程序 返 





















































| 


false， 取 消 默认 操作 并 阻 














if(retval===false)t{ 
if(event.stopPropagation)event.stopPropagation( );//DOM 模 型 
else event.cancelBubble=true;//IE 模 型 

if(event. preventDefault )event .preventDefault();//DOM 

else event.returnValue=false;//IE 








| 


} 

// 返 回 处 理 程 序 的 返 
return retval 
} 

};// 用 于 把 按键 标识 符 转 换 成 标准 形式 的 工具 函数 

// 在 非 Mac 硬 件 ， 我 们 这 里 把 "meta" 了 映射 到 "ctr1"， 

// 这 样 在 Mac 中 "Meta+C" 将 变 成 "Command+C"， 其 他 都 是 "Ctr1l+C" 
Keymap .normalize=function(keyid){ 
keyid=keyid.toLowerCase();// 一 切 都 小 写 

var words=keyid.split(/ 八 s+|[\-+_]/);// 分 割 辅助 键 和 键 名 
var keyname=words .pop();// 键 名 是 最 后 一 个 

keyname=Keymap .aliases[keyname]||keyname;// 它 是 别名 吗 ? 
words .sort();// 排 序 剩 下 的 辅助 键 

words .push(keyname );// 添 加 到 序列 化 名 字 后 面 
return words.join("_");// 把 它们 拼接 起 来 
}; 
Keymap ,aliases={// 把 按键 的 常见 别名 映射 到 它们 的 "正式 名 " 

"escape":"esc",// 键 名 使 用 3 级 DOM 规 范 的 定义 和 后 面 的 编码 到 键 名 的 映射 

"delete":"del",// 所 了 的 键 和 值 都 必须 小 写 

"return":"enter", 

"ctrl":"control", 

"space":"spacebar", 

"jins":"insert" 

};// 传 统 的 keydown 事 件 对 象 的 keycode 属 性 是 不 标准 的 

// 但 下 面 的 值 似乎 可 以 在 大 多 数 浏 览 器 和 0S 中 可 行 

Keymap .keyCodeToKeyName={// 使 用 词 或 方向 键 的 按键 
8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Control",18:"Alt", 
19:"Pause",20:"CapsLock",27:"Esc",32:"Spacebar",33:"PageUp", 

34:"PageDown", 35:"End",36:"Home",37:"Left",38:"Up",39: 人 

40:"Down", 45:"Insert", 46:"Del", // 主 键盘 〈 非 数字 小 键盘 ) 上 的 数字 

48:"0", 49: vi 50:"2", 51: Loy 52: Van 53: si 54: "6", 55: ya = 0 





值 
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dn 


















































二 < 
ru 





们 不 区 分 大 小 写 

65:"A",66:"B", 67:"C",68:"D", 69:"E", 70:"F",71:"6",72:"H",73:"1", 

FA 75: "K"， 76:"L",77:"M",78:"N",79:"0",80:"Pp",81:"Q", 82:"R", 

83:"S", 84: "TT 85:"U",86:"V",87:"W",88:"X",89:"Y",90:"Z",// 数 字 小 键盘 的 数字 和 标点 符号 








按键 (0pe ra 不 支持 这 些 ) 


96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8", 105:"9", 
106: "Multiply" ,107:"Add",109:"Subtract",110:"Decimal",111:"Divide",// 功 能 刍 
112:"F1",113:"F2",114:"F3", 115:"F4", 116:"F5", 117:"F6", 
118:"F7",119:"F8",120:"F9", 121:"F10", 122:"F11", 123: "F12", 
124:"F13",125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18", 
130:"F19",131:"F20",132:"F21",133:"F22",134:"F23",135:"F24", // 不 需要 按 下 Shift 键 的 标 





点 符号 键 





| 


// 连 字符 不 兼容 ，FF 返 回 的 编码 和 减 号 一 样 
59:";",61:"=",186:";",187:"=", //Firefox 和 0pera 返 回 59, 61 
188:",",190:".",191:"/",192:"",219:"[",220:"\\", 221:"]",222:""" 


}; 




















上 包括 HIML5 规 范 在 内 的 一 些 资料 基于 它们 注册 的 方式 从 技术 上 区 分 


处 理 程 序 (handler) 和 监听 程序 〈listener) ， 但 本 书 视 这 两 个 技术 术语 
为 同义词 。 

思 ] 标 准 为 不 同 的 事件 类 型 定义 了 事件 对 象 接 口 的 等 级 层次 。 例 如 ， 
Event 接 口 定 义 了 无 额外 详细 信息 的 基础 事件 ，MouseEvent 子 接口 定义 
了 在 传递 鼠标 事件 的 事件 对 象 中 有 用 的 附加 字段 ， 而 KeyEvent 子 接口 定 
义 了 可 用 于 键盘 事件 的 字段 。 在 本 书 中 ， 第 四 部 分 把 所 有 的 常用 事件 接 
口 都 并 入 到 Event 参 考 页 。 

DB 在 名 字 中 使 用 "DOM" 的 唯一 常用 事件 就 是 DOMContentLoaded。 这 个 
事件 由 Mozilla 引 入， 但 绝 不 属于 DOM 事 件 标准 的 一 部 分 。 

[412 级 DOM 事 件 规范 并 未 定义 调用 顺序 ， 但 当前 的 浏览 器 都 是 按照 注册 
人 并 且 3 级 DOM 事 件 规 范 章 案 标 准 化 了 这 种 
行为 。 

[5] 第 19 章 介绍 的 jQuery 事件 对 象 有 一 个 defaultPrevented0) 方 法 而 非 属 

性 


性 。 
[6] 这 里 的 * 单 击 ?* 指 的 是 滚动 滚轮 的 最 小 单位 ， 所 以 我 们 得 到 的 
ee 整数 倍 ， 正 负 值 表示 滚轮 的 两 个 方向 ， 其 最 小 值 
缘 为 120。 
[7] 这 是 有 风险 的 ， 如 果 未 来 的 实现 不 匹配 当前 使 用 的 规范 草案 ， 那 么 这 
将 适得其反 ， 示 例 将 无 法 运行 。 
[8] 英 文 为 Unobtrusive Javascript， 在 网 页 中 编写 JavaScript 的 一 种 通用 方 
法 。 详 细 内 容 请 看 http://en.wikipedia.org/wiki/Unobtrusive_JavaScript。 
[9] 辅 助 键 Cmodifier key) 一 般 是 指 Shift 键 、Ctrl (control) 键 、Alt 键 、 
AltGr (Alternate Graphic) 键 、Super 键 〈Window 键 盘 上 指 Window 键 ， 
Mac OS 键 盘 指 的 是 Command 键 ，Sun 键 盘 指 的 是 Meta 键 ) 和 Fn 键 
(Function， 常 见于 笔记 本 键盘 ， ， 更 多 细节 请 看 
http://en.wikipedia.org/wiki/Computer_keyboard。 功 能 键 (function key) 
一 般 是 指 类 似 F1、F2 这 些 以 F 加 数字 组 成 的 键 ， 更 多 细节 请 看 
http://en.wikipedia.org/wiki/Function Keys。 

















第 18 章 ”脚本 化 HITP 


超 文 本 传输 协议 〈HyperText Transfer Protocol，HTTP) 规定 Web 浏 
览 器 如 何 从 Web 服 务 器 获取 文档 和 向 Web 服 务 器 提交 表单 内 容 ， 以 及 
Web 服 务 器 如 何 啊 应 这 些 请 求 和 提交 。Web 浏 览 器 会 处 理 大 量 HTTP。 
通常 ，HTTP 并 不 在 脚本 的 控制 下 ， 只 是 当 用 户 单 击 链接 、 提 交 表 单 和 
输入 URL 时 才 发 生 。 


但 是 ， 用 JavaScript 代 码 操纵 HTTP 是 可 行 的 。 当 用 脚本 设置 window 
对 象 的 location 属 性 或 调用 表单 对 象 的 submit(0) 方 法 时 ， 都 会 初始 化 HTTP 
请 求 。 在 这 两 种 情况 下 ， 浏 览 器 会 加 载 新 页 面 。 这 种 用 脚本 控制 HTTP 
的 方法 在 多 框架 页 面 中 非常 有 用 ， 但 这 并 非 我 们 在 此 讨论 的 主题 。 相 
反 ， 本 章 会 说 明 在 没有 导致 Web 浏 览 器 重新 加 载 任何 窗口 或 窗 体 的 内 容 
情况 下 ， 脚 本 如 何 实现 Web 浏 览 器 与 服务 器 之 间 的 通信 。 


术语 Ajax 描 述 了 一 种 主要 使 用 脚本 操纵 HTTP 的 Web 应 用 架构 山 。 
Ajax 应 用 的 主要 特点 是 使 用 脚本 操纵 HTTP 和 和 Web 服务器 进行 数据 交 
换 ， 不 会 导致 页 面 重 载 。 避 免 页 面 重 载 (这 是 Web 初 期 的 标准 做 法 ) 的 
能 力 使 web 应 用 感觉 更 像 传统 的 桌面 应 用 。Web 应 用 可 以 使 用 Ajax 技术 
把 用 户 的 交互 数据 记录 到 服务 器 中 ; 也 可 以 开始 只 显示 简单 页 面 ， 之 后 
按 需 加 载 额 外 的 数据 和 页 面 组 件 来 提升 应 用 的 启动 时 间 。 


Comet 是 和 使 用 脚本 操纵 HTTP 的 Web 应 用 架构 相关 的 术语 外 。 在 某 
种 意义 上 ，Comet 和 Ajax 相反 。 在 Comet 中 ，Web 服 务 器 发 起 通信 并 异步 
发 送 消 息 到 客户 端 。 如 果 Web 应 用 需要 啊 应 服务 端 发 送 的 消息 ， 则 它 会 
使 用 Ajax 技术 发 送 或 请 求 数据 。 在 Ajax 中 ， 客 户 端 从 服务 端 “ 拉 ”数据 ， 
而 在 Comet 中 ， 服 务 端 向 客户 端 “ 推 ”数据 。Comet 还 包括 其 他 名 词 
(如 “服务 器 推 >”、“Ajax 推 > 和 “HTTP 流 ”) 。 


实现 Ajax 和 Comet 的 方式 有 很 多 种 ， 而 这 些 底层 的 实现 有 时 称 为 传 
输 协议 (transport) 。 例 如 ，<img> 元 素 有 一 个 src 属 性 。 当 脚本 设置 
这 个 属性 为 URL 时 ， 浏 览 器 发 起 的 HTTP GET 请 求 会 从 这 个 URL 下 载 图 
片 。 因 此 ， 脚 本 通过 设置 <img 二 元 素 的 src 属 性 ， 且 把 信息 作为 图 片 
URL 的 查询 字符 串 部 分 ， 就 把 能 经 过 编码 信息 传递 给 Web 服 务 器 。Web 
服务 器 实际 上 必须 返回 某 个 图 片 来 作为 请 求 结 果 ， 但 它 一 定 要 不 可 见 : 
例如 ， 一 个 1x1 像 素 的 透明 图 片 乌 。 

















<<img> 之 元 素 无 法 实现 完整 的 Ajax 传输 协议 ， 因 为 数据 交换 是 单 同 
的 : 客户 端 能 发 送 数据 到 服务 器 ， 但 服务 器 的 啊 应 一 直 是 张 图 片 导 致 客 
户 端 无 法 轻易 从 中 提取 信息 。 然 而 ， 二 iframe 放 元 素 更 加 强大 ， 为 了 把 
<iframe 之 作为 Ajax 传输 协议 使 用 ， 脚 本 首先 要 把 发 送 给 Web 服 务 器 的 
言 息 编码 到 URL 中 ， 然 后 设置 二 iframe 放 的 src 属 性 为 该 URL。 服 务 器 能 
创建 一 个 包含 啊 应 内 容 的 HTML 文 档 ， 并 把 它 返 回 给 Web 浏 览 器 ， 并 且 
在 二 iframe 中 显示 它 。 二 iframe 这 需要 对 用 户 不 可 见 ， 例 如 可 以 使 用 
CSS 隐 藏 它 。 脚 本 能 通过 遍历 二 iframe 放 的 文档 对 象 来 读 取 服 务 端 的 响 
应 。 注 意 ， 这 种 访问 受 限 于 13.6.2 节 介绍 的 同 源 策 略 问题 。 


实际 上 ，< 雪 script 之 元 素 的 src 属性 能 设置 URL 并 发 起 HTTP ”GET 请 
求 。 使 用 二 script 二 元 素 实现 脚本 操纵 HTTP 是 非常 吸引 人 的 ， 因 为 它们 
可 以 跨 域 通信 而 不 受 限 于 同 源 策 略 。 通 常 ， 使 用 基于 <<script> 的 Ajax 传 
输 协 议 时 ， 服 务 器 的 响应 采用 JSON 编 码 〈 见 6.9 节 ) 的 数据 格式 ， 当 执 
行 脚 本 时 ，JavaScript 解 析 器 能 自动 将 其 “解码 ”。 由 于 它 使 用 JSON 数 据 
格式 ， 因 此 这 种 Ajax 传输 协议 也 叫做 "JSONP"。 


虽然 在 <iframe 之 和 <<script 之 传输 协议 之 上 能 实现 Ajax 技术 ， 但 通 
常 还 有 更 简单 的 方式 。 一 段 时 间 以 来 ， 所 有 浏览 器 都 支持 
XMLHttpRequest 对 象 ， 它 定义 了 用 脚本 操纵 HTTP 的 API。 除 了 常用 的 
GET 请 求 ， 这 个 API 还 包含 实现 POST 请 求 的 能 力 ， 同 时 它 能 用 文本 或 
Document 对 象 的 形式 返回 服务 器 的 啊 应 。 虽 然 它 名 字 叫 
XMLHttpRequest API， 但 并 未 没有 限定 只 能 使 用 XML 文档 ， 它 能 获取 
任何 类 型 的 文本 文档 。18.1 节 涵盖 XMLHttpRequest ”API 和 本 章 的 大 部 
分 。 本 章 的 大 部 分 Ajax 示 例 都 将 使 用 XMLHttpRequest 对 象 来 实现 协议 方 
案 ， 我 们 也 将 在 18.2 节 演示 如 何 使 用 基于 二 script 二 的 传输 协议 ， 因 为 < 
script 二 元 素 有 规避 同 源 限制 的 能 


XML 是 可 选 的 


"Ajax" 中 的 X 表 示 XML， 这 个 HITP (XMLHttpRequest) 的 主要 客 
户 端 API 在 其 名 字 中 突出 了 XML， 并 且 后 面 我 们 将 看 到 XMLHttpReduest 
对 象 的 其 中 一 个 属性 叫 responseXML 。 它 看 起 来 像 说 明 XML 是 用 脚本 操 
纵 HTTP 的 重要 部 分 ， 但 实际 上 它 不 是 ， 这 些 名 字 只 是 XML 流行 时 的 遗 
迹 。 当 然 ，Ajax 技 术 能 和 XML 文档 一 起 工作 ， 但 使 用 XML 只 是 一 种 选 
择 ， 实 际 上 很 少 使 用 。XMLHttpRequest 规 范 列 出 了 这 个 令 人 困惑 名 字 
的 不 足 之 处 : 


























对 象 名 XMLHttpRequest 是 为 了 兼容 Web， 虽 然 这 个 名 字 的 每 个 部 分 
都 可 能 造成 误导 。 首 先 ， 这 个 对 象 文 持 包括 XML 在 内 的 任何 基于 文本 
的 格式 。 其 次 ， 它 能 用 于 HTTP 和 HTTPS 请 求 〈 一 些 实现 支持 除了 HTTP 
和 HTTPS 之 外 的 协议 ， 但 规范 不 包括 这 些 功能 ) 。 最 后 ， 它 所 支持 的 请 
求 是 一 个 广义 概念 ， 指 的 是 对 于 定义 的 HTTP 方 法 的 涉及 HTTP 请 求 或 啊 
应 的 所 有 活动 。 


Comet 传 输 协 议 比 Ajax 更 精妙 ， 但 都 需要 客户 辣 和 服务 器 之 间 建 并 
(必要 时 重新 建立 ) 连接 ， 同 时 需要 服务 器 保持 连接 处 于 打开 状态 ， 这 
样 它 才 能 够 发 送 异 步 信 息 。 隐 藏 的 和 <iframe> 能 像 Comet 传 输 协 议 一 样 
有 有 用， 例如， 如 果 服 务 器 以 二 iframe 二 中 待 执 行 的 二 script 二 元 素 的 形式 
发 送 每 条 消息 。 实 现 Comet 的 一 种 更 可 靠 跨 平台 方案 是 客户 端 建立 一 个 
和 服务 器 的 连接 (使 用 Ajax 传 输 协 议 ) ， 同 时 服务 器 保持 这 个 连接 打开 
直到 它 需 要 推送 一 条 消息 。 服 务 器 每 发 送 一 条 消 恩 就 关闭 这 个 连接 ， 这 
样 可 以 确保 客户 端正 确 接收 到 消息 。 处 理 该 消息 之 后 ， 客 户 端 马上 为 后 
续 的 消息 推送 建立 一 个 新 连接 。 


实现 可 靠 的 路 平台 Comet 传 输 协议 是 非常 有 挑战 性 的 ， 所 以 大 部 分 
使 用 Comet 架 构 的 Web 应 用 开发 者 依赖 于 像 Dojo 这 样 的 web 框架 库 中 的 
传输 协议 。 在 写本 章 时 ， 浏 览 器 正 开始 实现 HTML5 相 关 草 案 中 的 
Server-Sent 事 件 ， 它 用 EventSource 对 象 的 形式 定义 了 简单 的 Comet 
API。18.3 节 涵盖 EventSource API 且 演示 了 一 个 使 用 XMLHttpRequest 实 
现 的 简单 模拟 示例 。 


在 Ajax 和 Comet 之 上 构建 更 高 级 的 通信 协议 是 可 行 的 。 例 如 ， 这 些 
客户 端 /服务 器 技术 可 以 用 做 RPC (Remote Procedure Call， 远 程 过 程 调 
用 ) 机 制 或 发 布 /订阅 事件 系统 的 基础 。 


但 是 ， 本 章 不 会 介绍 像 上 面 这 样 更 高 级 的 协议 ， 我 们 重点 在 能 使 
Ajax 和 Comet 可 用 的 API 上 。 


18.1 使 用 XMLHttpRequest 


浏览 器 在 XMLHttpRequest 类 上 定义 了 它们 的 HITP API。 这 个 类 的 
每 个 实例 都 表示 一 个 独立 的 请 求 /响应 对 ， 并 且 这 个 对 象 的 属性 和 方法 
允许 指定 请 求 细节 和 提取 响应 数据 。 很 多 年 前 Web 浏览 器 就 开始 支持 
XMLHttpRequest， 并 且 其 API 已 经 到 了 W3C 制 订 标准 的 最 后 阶段 。 同 

















时 ，W3cC 正 在 制订 *2 级 XMLHttpRequest" 标 准 草案 。 本 节 涵 盖 
XMLHttpRequest 核 心 API， 也 包括 当前 至 少 被 两 蒜 浏 览 器 支持 的 部 分 2 
级 XMLHttpRequest 标 准 草案 (我 们 将 其 称 为 XHR2) 。 


当然 ， 使 用 这 个 HTTP API 必 须 做 的 第 一 件 事 就 是 实例 化 
XMLHttpRequest 对 象 : 





var request=new XMLHttpRequest( ) ， 





你 也 能 重用 已 存在 的 XMLHttpRequest， 但 注意 这 将 会 终止 之 前 通 
过 该 对 象 挂 起 的 任何 请 求 。 


IE6 中 的 XMLHttpRequest 





Microsoft 最 早 把 XMLHttpRequest 对 象 引 入 到 IE5 中 ， 且 在 IE5 和 IE6 
中 它 只 是 一 个 ActiveX 对 象 。IE7 之 前 的 版 本 不 支持 非 标 准 的 
XMLHttpRequest0 构 造 函 数 ， 但 它 能 像 如 下 这 样 模拟 : 





// 在 ITE5 和 IE6 中 模拟 XMLHttpRequest( ) 构 造 函数 
if(window.XMLHttpRequest===undefined){ 
window.XMLHttpRequest=function(){ 

try{// 如 果 可 用 ， 则 使 用 ActiveX 对 象 的 最 新 版 本 

return new ActiveXOobject("Msxml12.XMLHTTP.6.0"); 












































} 
catch(e1){ 
try{// 否 则 ， 回 退 到 较 旧 的 版 本 

return new ActiveXOobject("Msxml12.XMLHTTP.3.0"); 























} 
catch(e2){// 否 则 ， 抛 错 
throw new Error("XMLHttpRequest is not supported"); 


、 


I 





一 个 HTTP 请 求 由 4 部 分 组 成 : 

HTTP 请求 方法 或 “动作 ”(verb) 

:正在 请 求 的 URL 

一 个 可 选 的 请 求 头 集合 ， 其 中 可 能 包括 吴 份 验证 信息 





一 个 可 选 的 请 求 主体 

服务 器 返回 的 HTTP 响 应 包含 3 部 分 : 

一 个 数字 和 文字 组 成 的 状态 码 ， 用 来 显示 请 求 的 成 功 和 失败 
一 个 响应 头 集合 

响应 主体 


接 下 来 的 前 面 两 节 会 展示 如 何 设置 HTTP 请 求 的 每 个 部 分 和 如 何 碍 
询 HTTP 啊 应 的 每 个 部 分 ， 随 后 的 核心 章节 会 涵盖 更 多 的 专门 议题 。 


HTTP 的 基础 请 求 / 响 应 架构 非常 简单 并 且 易 于 使 用 。 但 在 实践 中 会 
有 各 种 各 样 随 之 而 来 的 复杂 问题 : 客户 端 和 服务 器 交换 cookie， 服 务 器 
重 定 同 浏 览 器 到 其 他 服务 器 ， 绥 存 某 些 资源 而 剩 下 的 不 缓存 ， 某 些 客户 
端 通过 代理 服务 器 发 送 所 有 的 请 求 等 。XMLHttpRequest 不 是 协议 级 的 
HTTP API 而 是 浏览 器 级 的 API。 浏 览 器 需要 考虑 cookie、 重 定向 、 绥 存 
和 代理 ， 但 代码 只 需要 担心 请 求 和 响应 。 


XMLHttpRequest 和 本 地 文件 


网 页 中 可 以 使 用 相对 URL 的 能 力 通 常 意味 着 我 们 能 使 用 本 地 文件 系 
统 来 开发 和 测试 HTML， 并 避免 对 Web 服 务 器 进行 不 必要 的 部 署 。 然 后 
当 使 用 XMLHttpRequest 进 行 Ajax 编 程 时 ， 这 通常 是 不 可 行 的 。 
XMLHttpRequest 用 于 同 HTTP 和 HTTPS 协 议 一 起 工作 。 理 论 上 ， 它 能 够 
同 像 FTP 这 样 的 其 他 协议 一 起 工作 ， 但 比如 像 请 求 方法 和 响应 状态 人 码 等 
部 分 API 是 HTTP 特 有 的 。 如 果 从 本 地 文件 中 加 载 网 页 ， 那 么 该 页 面 中 的 
脚本 将 无 法 通过 相对 URL 使 用 XMLHttpRequest， 因 为 这 些 URL 将 相对 
于 file://URL 而 不 是 http://URL。 而 同 源 策略 通常 会 阻止 使 用 绝对 
http://URL 《请 参见 18.1.6 节 ) 。 结 果 是 当 使 用 XMLHttpRequest 时 ， 为 了 
测试 它们 通常 必须 把 文件 上 传 到 Web 服 务 器 (或 运行 一 个 本 地 服务 
es 


18.1.1 指定 请 求 


创建 XMLHttpRequest 对 象 之 后 ， 发 起 HTTP 请 求 的 下 一 步 是 调用 
XMLHttpRequest 对 象 的 open0 方 法 去 指定 这 个 请 求 的 两 个 必需 部 分 : 方 


























法 和 URL。 





request .open("GET'", // 开 始 一 个 HTTP_ GET 请 求 
"data.csv");//URL 的 内 容 








open0 的 第 一 个 参数 指定 HTTP 方 法 或 动作 。 这 个 字符 串 不 区 分 大 小 
写 ， 但 通常 大 家 用 大 写字 母 来 匹配 HTTP 协 议 。"GET" 和 "POST" 方 法 是 
得 到 广泛 支持 的 。"GET" 用 于 常规 请 求 ， 它 适用 于 当 URL 完 全 指定 请 求 
资源 ， 当 请 求 对 服务 器 没有 任何 副作用 以 及 当 服务 器 的 响应 是 可 缓存 
时 。"POST" 方 法 常用 于 HTML 表 单 。 它 在 请 求 主体 中 包含 额外 数据 〈 表 
单数 据 ) 且 这 些 数 据 常 存储 到 服务 器 上 的 数据 库 中 《副作用 ) 。 相 同 
URL 的 重复 POST 请 求 从 服务 器 得 到 的 啊 应 可 能 不 同 ， 同 时 不 应 该 绥 存 
使 用 这 个 方法 的 请 求 。 


除了 "GET" 和 "POST" 之 外 ，XMLHttpRequest 规 范 也 允许 
把 "DELETE"、"HEAD'"、"OPTIONS" 和 "PUT'" 作 为 open0 的 第 1 个 参数 。 
("HTTPCONNECT"、"TRACE" 和 "TRACK" 因 为 安全 风险 已 被 明确 禁 
止 。) 旧 浏 览 器 并 不 支持 所 有 这 些 方法 ， 但 至 少 "HEAD'" 得 到 广泛 支 
持 ， 例 18-13 演 示 如 何 使 用 它 。 


open0 的 第 2 个 参数 是 URL， 它 是 请 求 的 主题 。 这 是 相对 于 文档 的 
URL， 这 个 文档 包含 调用 open() 的 脚本 。 如 果 指 定 绝 对 URL、 协 议 、 主 
机 和 端口 通常 必须 匹配 所 在 文档 的 对 应 内 容 : 跟 域 的 请 求 通常 会 报错 。 

(但 是 当 服 务 器 明确 允许 跨 域 请 求 时 ，2 级 XMLHttpRequest 规 范 会 允许 
它 ， 见 18.1.6 节 。) 


如 果 有 请 求 头 的 话 ， 请 求 进程 的 下 个 步骤 是 设置 它 。 例 如 ，POST 
请 求 需 要 "Content-Type" 头 指定 请 求 主题 的 MIME 类 型 : 




















request.setRequestHeader ("Content-Type", "text/plain"); 





如 果 对 相同 的 涉 调用 setRequestHeader() 多 次 ， 新 值 不 会 取代 之 前 指 
Ei 相反 ，HTTP 请 求 将 包含 这 个 头 的 多 个 副本 或 这 个 头 将 指定 多 
| 


你 不 能 目 己 指定 "Content-Length"、"Date"、"Referer" 或 "User- 
Agent" 头 ，XMLHttpRequest 将 目 动 添加 这 些 头 而 防止 伪造 它们 。 类 似 


地 ，XMLHttpRequest 对 象 自动 处 理 cookie、 连 接 时 间 、 字 符 集 和 编码 判 
断 ， 所 以 你 无 法 向 setRequestHeader() 传 递 这 些 头 : 


Accept-Charset Content-Transfer-Encoding TE 
Accept-Encoding Date Trailer 
Connection Expect Transfer-Encoding 
Content-Length Host Upgrade 

Cookie Keep-Alive User-Agent 
Cookie2 Referer Via 


你 能 为 请 求 指定 "Authorization" 头 ， 但 通常 不 需要 这 么 做 。 如 果 请 
求 一 个 受 密 人 码 保护 的 URL， 把 用 户 名 和 密码 作为 第 4 个 和 第 5 个 参数 传递 
给 open()， 则 XMLHttpRequest 将 设置 合适 的 涉 。〔 接 下 来 我 们 将 了 解 关 
于 open0 可 选 的 第 三 个 参数 。 可 选 的 用 户 名 和 密码 参数 会 在 第 四 部 分 有 


间 朋 #2 











使 用 XMLHttpRequest 发 起 HTTP 请 求 的 最 后 一 步 是 指定 可 选 的 请 求 
主体 并 向 服务 器 发 送 它 。 使 用 send0 方 法 像 如 下 这 样 做 : 





request.send(null); 





GET 请 求 绝 对 没有 主体 ， 所 以 应 该 传递 null 或 省 略 这 个 参数 。POST 
请 求 通常 拥有 主体 ， 同 时 它 应 该 匹配 使 用 setRequestHeader() 指 定 
的 "Content-Type" 头 。 


顺序 问题 


HTTP 请 求 的 各 部 分 有 指定 顺序 : 请 求 方法 和 URL 首 先 到 达 ， 然 后 
是 请 求 头 ， 最 后 是 请 求 主体 。XMLHttpRequest 实 现 通常 直 到 调用 send0) 
方法 才 开始 启动 网 络 。 但 XMLHttpRequest API 的 设计 似乎 使 每 个 方法 都 
将 写 入 网 络 流 。 这 意味 着 调用 XMLHttpRequest 方 法 的 顺序 必须 匹配 
HTTP 请 求 的 架构 。 例 如 ，setRequestHeader() 方 法 的 调用 必须 在 调用 
open() 之 前 但 在 调用 sendO 之 后 ， 否 则 它 将 抛 出 异常。 


例 18-1 使 用 了 我 们 目前 介绍 的 所 有 XMLHttpRequest 方 法 。 它 用 
POST 方法 发 送 文本 字符 串 给 服务 器 ， 并 忽略 服务 器 返回 的 任何 啊 应 。 























例 18-1: 用 POST 方法 发 送 纯 文 本 给 服务 器 





function postMessage(msg){ 

var request=new XMLHttpRequest();// 新 请 求 

request .open("POST", "/1l0g.php");// 用 POST 向 服务 器 端 发 送 脚 本 
// 用 请 求 主体 发 送 纯 文本 消息 
request.setRequestHeader ("Content-Type",// 请 求 主体 将 是 纯 文本 
"text/plain;charset=UTF-8"); 

request.send(msg);// 把 msg 作 为 请 求 主体 发 送 

// 请 求 完成 ， 我 们 将 忽略 任何 响应 和 任何 错误 

} 









































注意 例 18-1 中 的 send() 方 法 局 动 请 求 ， 然 后 返回 ， 当 它 等 每 服务 器 
的 啊 应 时 并 不 阻塞 。 接 下 来 章节 介绍 的 几乎 都 是 异步 处 理 HTTP 啊 应 。 


18.1.2 ”取得 响应 


一 个 完整 的 HTTP 响应 由 状态 码 、 响 应 头 集合 和 响应 主体 组 成 。 这 
些 都 可 以 通过 XMLHttpRequest 对 象 的 属性 和 方法 使 用 : 


status 和 和 statusText 属 性 以 数字 和 文本 的 形式 返回 HTTP 状 态 码 。 这 
些 属性 保存 标准 的 HTTP 值 ， 像 200 和 "OK" 表 示 成 功 请 求 ，404 和 "Not 
Found" 表 示 URL 不 能 匹配 服务 器 上 的 任何 资源 。 


.使 用 getResponseHeader0 和 getAll]ResponseHeadersO) 能 查询 响应 
头 。XMLHttpRequest 会 目 动 处 理 cookie: 它 会 从 getAllResponseHeaders() 
头 返 回 集 合 中 过 滤 抒 cookie 头 ， 而 如 果 给 getResponseHeaderO 传 递 "Set- 
Cookie" 和 "Set-Cookie2" 则 返回 null。 


.响应 主体 可 以 从 responseText 属 性 中 得 到 文本 形式 的 ， 从 
responseXML 属 性 中 得 到 Document 形 式 的 。 (这 个 属性 名 是 有 历史 的 : 
它 实 际 上 对 XHTML 和 XML 文 要 有 效 ， 但 XHR2 说 它 也 应 该 对 普通 的 
HTML 文 档 工 作 。) 关于 responseXML 的 更 多 内 容 请 看 18.1.2 节 下 面 
的 “2. 啊 应 解码 ” 节 。 


XMLHttpRequest 对 象 通常 《除了 见 18.1.2 节 下 面 的 1. 同步 响应 ” 节 
的 内 容 ) 异步 使 用 : 发 送 请 求 后 ，send(0) 方 法 立即 返回 ， 直 到 啊 应 返 
回 ， 前 面 列 出 的 啊 应 方法 和 属性 才 有 效 。 为 了 在 啊 应 准备 就 绪 时 得 到 通 
知 ， 必 须 监听 XMLHttpRequest 对 象 上 的 readystatechange 事 件 〈 或 者 
18.1.4 节 描述 新 的 XHR 进 度 事件 ) 。 但 为 了 理解 这 个 事件 类 型 ， 你 必须 




















理解 readyState 属 性 。 


readyState 是 一 个 整数 ， 它 指定 了 HTTP 请 求 的 状态 ， 同 时 表 18-1 列 
出 了 它 可 能 的 值 。 第 一 列 的 符号 是 XMLHttpRequest 构 造 函 数 定 义 的 荫 
量 。 这 些 常量 是 XMLHttpRequest 规 范 的 一 部 分 ， 但 老 的 浏览 器 和 IE 8 没 
有 定义 它们 ， 通 常 看 到 使 用 人 硬 编码 值 4 来 表示 XMLHttpRequest.DONE。 








表 18-1; XMLHttpRequest 的 readyState 值 


前 量 值 含义 

UNSENT 0 open() 尚 未 调用 
OPENED ] open() 已 调用 
HEADERS_RECEIVED 2 接收 到 头 信息 
LOADING 3 接收 到 啊 应 主体 
DONE 4 啊 应 完成 


理论 上 ， 每 次 readyState 属 性 改变 都 会 触发 readystatechange 事 件 。 实 
际 中 ， 当 readyState 改 变 为 0 或 1 时 可 能 没有 触发 这 个 事件 。 当 调用 send0) 
时 ， 即 使 readyState 仍 处 于 OPENED 状 态 ， 也 通常 触发 它 。 某 些 浏览 器 在 
LOADING 状 态 时 能 触发 多 次 事件 来 给 出 进度 反馈 。 当 readyState 值 改变 
为 4 或 服务 器 的 啊 应 完成 时 ， 所 有 的 浏览 器 都 触发 readystatechange 事 
件 。 因 为 在 啊 应 完成 之 前 也 会 触发 事件 ， 所 以 事件 处 理 程序 应 该 一 直 检 
验 readyState 值 。 


为 了 监听 readystatechange 事 件 ， 请 把 事件 处 理 函 数 设 置 为 
XMLHttpRequest 对 象 的 onreadystatechange 属 性 。 也 能 使 用 
addEventListenerO 〈 或 在 IE8 以 及 之 前 版 本 中 使 用 attachEventO0) ， 但 通 
党 每 个 请 求 只 需要 一 个 处 理 程序 ， 所 以 只 设置 onreadystatechange 更 容 














例 18-2 定 义 了 getTextO 函 数 来 演示 如 何 监听 readystatechange 事 件 。 





事件 处 理 程序 首先 要 确保 请 求 完 成 。 如 果 这 样 ， 它 会 检查 啊 应 状态 码 来 
取保 请 求 成 功 。 然 后 它 查 找 "Content- Type" 关 只 呈 员 册 让 全 i 是 期 
望 的 类 型 。 如 果 3 个 条 件 都 得 到 满足 ， 它 会 把 啊 应 主体 (以 文本 形式 ) 

发 送 给 指定 的 回调 函数 。 


例 18-2: 获取 HITP 啊 应 的 onreadystatechange 





// 发 出 一 个 HTTP GET 请 求 以 获得 指定 URL 的 内 容 
// 当 响应 成 功 到 达 ， 验 证 它 是 否 是 纯 文 本 
// 如 果 是 ， 把 它 传递 给 指定 回调 函数 
function getText(url,callback){ 

var request=new XMLHttpRequest();// 创 建新 请 求 

request .open("GET", url1);// 指 定 待 获取 的 URL 

request .onreadystatechange=function(){// 定 义 事件 处 理 程序 
// 如 果 请 求 完 成 ， 则 它 是 成 功 的 

if(request.readyState===4& &request,status===200){ 
var type=request.getResponseHeader("Content-Type"); 
if(type.match(/^text/))// 确 保 响 应 是 文本 
callback(request.responseText );// 把 它 传递 给 回调 函数 
} 
























































}; 
request .send(null);// 立 即 发 送 请 求 
} 





1. 同 步 响应 


其 本 身 的 性 质 ， 异 步 处 理 HTTP 响 应 是 最 好 的 方式 。 然 而 
支持 步 啊 应 。 如 果 把 false 作 为 第 学 数 人 递 给 
open()， 那 么 send0) 方 法 将 阻塞 直到 请 求 完 成 。 在 这 种 情况 下 ， 不 需要 使 
用 事件 处 理 程序 : 一 旦 send0 返 回 ， 仅 需要 检查 XMLHttpRequest 对 象 的 
status 和 responseText 属 性 。 比 较 例 18-2 中 getText() 函 数 的 同步 代码 : 














// 发 起 同步 的 HTTP GET 请 求 以 获得 指定 URL 的 内 容 

// 返 回响 应 文本 ， 或 如 果 请 求 不 成 功 或 响应 不 是 文本 就 报错 

function getTextSync(url){ 

var request=new XMLHttpRequest();// 创 建新 请 求 
request.open("GET", url, false);// 传 递 false 实 现 同步 
request.send(null);// 立 即 发 送 请 求 

// 如 果 请 求 不 是 209 OK， 就 报错 
if(request.status!==200)throw new Error(request.statusText ),;// 如 果 类 型 错误 ， 就 报错 
var type=reduest .getResponseHeader("Content-Type" ) 
if(!type.match(/^text/)) 

throw new Error("Expected textual response;got:"+type); 
return request.responseText; 




















司 步 请 求 是 吸引 人 人 的， 但 应 该 避免 使 用 它们 。 客 户 闻 JavaScript 是 单 





线程 的 ， 当 send() 方 法 阻塞 时 ， 它 通常 会 导致 整 Se 如 果 
连接 的 服务 器 响应 慢 ， 那 么 用 户 的 浏览 器 将 冻结 。 然 而 ， 参 见 22.4 节 可 
接受 的 使 用 同步 请 求 的 场景 。 


2. 啊 应 解码 


在 前 面 的 示例 中 ， 我 们 假设 服务 器 使 用 
~ 'text/plain"、"text/html" 或 "text/css" 这 样 的 MIME 类 型 及 送 文 本 啊 应 ， 
然后 我 们 使 用 XMLHttpRequest 对 象 的 responseText 属 性 得 到 它 。 


但 是 还 是 其 他 方式 来 处 理 服 务 右 的 啊 应 。 如 果 服 务 嚣 发 送 XML 或 
XHTML 文档 作为 其 啊 应 ， 你 能 通过 responseXML 属 性 获得 一 个 解析 形 
式 的 XML 文 档 。 这 个 属性 的 值 是 一 个 Document 对 象 ， 可 以 使 用 第 15 章 
介绍 的 技术 搜索 和 遍历 它 。 (XHR2 草 案 规 范 指出 浏览 器 也 应 该 自动 解 
析 "text/html" 类 型 的 啊 应 ， 使 它们 也 能 通过 responseXML 属 性 获取 其 
Document 文 档 对 象 ， 但 在 写本 章 时 当前 浏览 器 还 没有 这 人 么 做 。) 


如 果 服 务 器 想 发 送 诸 如 对 象 或 数组 这 样 的 结构 化 数据 作为 其 啊 应 ， 
它 应 该 传输 JSON 编 码 〈 参 见 6.9 节 ) 的 字符 串 数 据 。 当 接收 它 时 ， 可 以 
把 responseText 属 性 传递 给 JSON.parse0 。 例 18-3 是 例 18-2 的 归纳 : 它 9 
现 指定 UREL 的 GET 请 求 并 当 UREL 的 内 容 准 备 束 绪 时 把 它们 传递 给 指定 的 
回调 函数 。 但 它 不 是 一 直 传递 文本 ， 而 是 传递 Document 对 象 或 使 用 
JSON.parse() 编 码 的 对 象 或 字符 串 。 


例 18-3: 解析 HITP 啊 应 














// 发 起 HTTP GET 响应 以 获取 指定 URL 的 内 容 

// 当 响应 到 达 时 ， 把 它 以 解析 后 的 XML Document 对 象 、 解 析 后 的 JSON 对 象 

// 或 字符 串 形式 传递 给 回调 函数 

function get(url,callback)t{ 

var request=new XMLHttpRequest();// 创 建新 请 求 

request .open("GET", url1);// 指 定 待 获取 的 URL 

request . onreadystatechange= function(){// 定 义 事件 监听 器 

// 如 果 请 求 完成 且 成 功 

if(request.readyState===4& &request. status===268){// 获 得 响应 的 类 型 

var type=request.getResponseHeader ("Content-Type");// 检 查 类 型 ， 这 样 我们 不 能 在 将 来 得 到 
HTML 文 档 

if(type.indexof("xm]l")!==-1&&request.responseXML) 

callback(request.responseXML ) ; /ADocument 对 象 响应 












































callback(JSON,.parse(request.responseText ) ) ;//JSON 响 应 
else 
callback(request.responseText );// 字 符 串 响应 





}; 


request.send(nulL1) ;// 立 即 发 送 请 求 
} 





例 18-3 检 查 该 啊 应 的 "Content-Type" 头 且 专 门 处 
理 "applicatiomjson" 影 响 。 你 可 能 希望 特殊 编码 的 另 一 个 啊 应 类 型 
是 "application/javascript" 或 "text/javascript"。 你 能 使 用 XMLHttpRequest 请 
求 JavaScript 肢 本， 然后 使 用 全 局 eval()( 参 见 4.12.2 节 ) 执行 这 个 脚本 。 
但 是 ， 在 这 种 情况 下 不 需要 使 用 XMLHttpRequest 对 象 ， 因 为 二 script 
元 素 本 里 操纵 HTTP 肢 本 的 能 力 完 全 可 以 实现 加 载 并 执行 脚本 。 见 示例 
13-4， 且 记 住 二 script 二 元 素 能 发 起 跨 域 HTTP 请 求 ， 而 XMLHttpRequest 
API 则 禁止 。 


Web 服 务 端 通常 使 用 二 进 制 数 据 ( 例 如 ， 图 片 文 件 ) 啊 应 HTTP 请 
求 。responseText 属 性 只 能 用 于 文本 ， 且 和 它 不 能 妥善 处 理 二 进 制 啊 应 ， 
即使 对 最 终 字 符 串 使 用 了 charCodeAt(0) 方 法 。XHR2 定 义 了 处 理 二 进 制 响 
应 的 方法 ， 但 在 写本 章 时 ， 浏 览 器 厂商 还 没有 实现 它 。 进 一 步 详情 请 参 
见 22.6.2 节 。 


服务 器 啊 应 的 正常 解码 是 假设 服务 器 为 这 个 啊 应 发 送 了 "Content- 
Type" 涉 和 正确 的 MIME 类 型 。 例 如 ， 如 果 服 务 器 发送 XML 文 档 但 没有 
设置 适当 的 MIME 类 型 ， 那 么 XMLHttpRequest 对 象 将 不 会 解析 它 且 设置 
responseXML 属性。 或 者 ， 如 末 服 务 器 在 "Content-Type" 头 中 包含 了 错误 
的 "charset" 参 数 ， 那 么 XMLHttpRequest 将 使 用 错误 的 编码 来 解析 响应 ， 
并 且 responseText 中 的 字符 可 能 是 错 的 。XHR2 定 义 了 
overrideMimeType() 方 法 来 解决 这 个 问题 ， 并 且 大 量 的 浏览 器 已 经 实现 
了 它 。 如 果 相 对 于 服务 器 你 更 了 解 资 源 的 MIME 类 型 ， 那 么 在 调用 
send() 之 前 把 类 型 传递 给 overrideMimeType()， 这 将 使 XMLHttpRequest 忽 
略 "Content-Type" 头 而 使 用 指定 的 类 型 。 假 设 你 将 下 载 XML 文 件 ， 而 你 
计划 把 它 当 成 纯 文本 对 待 。 可 以 使 用 setOverrideMimeType() 让 
XMLHttpRequest 知 道 它 不 需要 把 文件 解析 成 XML 文 档 : 

















// 不 要 把 响应 作为 XML 文 档 处 理 


request.overrideMimeType("text/plain;charset=utf-8") 





18.1.3 ”编码 请 求 主体 
HTTP POST 请 求 包括 一 个 请 求 主体 ， 它 包含 客户 端 传递 给 服务 器 的 


数据 。 在 例 18-1 中 ， 请 求 主体 是 简单 的 文本 字符 串 。 但 是 ， 我 们 通 第 使 
用 HITP 请 求 发 送 的 都 是 更 复杂 的 数据 。 本 节 演 示 这 样 做 的 一 些 方法 。 


1. 表 单 编码 的 请 求 


考虑 HTML 表 单 。 当 用 户 提交 表单 时 ， 表 单 中 的 数据 〈 每 个 表单 元 
素 的 名 字 和 值 ) 编码 到 一 个 字符 串 中 并 随 请 求 发 送 。 默 认 情况 下 ， 
HTML 表 单 通过 POST 方法 发 送 给 服务 器 ， 而 编码 后 的 表单 数据 则 用 做 
请 求 主体 。 对 表单 数据 使 用 的 编码 方案 相对 简单 ， 对 每 个 表单 元 素 的 名 
字 和 值 执行 普通 的 URL 编 码 〈 使 用 十 六 进 制 转 义 码 替 换 特 殊 字符 ) ， 使 
用 等 号 把 编码 后 的 名 字 和 值 分 开 ， 并 使 用 “&* 符 号 分 开 名 / 值 对 。 一 个 简 
单 表单 的 编码 像 如 下 这 样 ， 











find=pizza&zipcode=02134&radius=1km 


表单 数据 编码 格式 有 一 个 正式 的 MIME 类 型 : 





application/x-www-form-urlencoded 





当 使 用 POST 方法 提交 这 种 顺序 的 表单 数据 时 ， 必 须 设 置 "Content- 
Type" 请 求 头 为 这 个 值 。 


注意 ， 这 种 类 型 的 编码 并 不 需要 HTML 表 单 ， 在 本 章 我 们 实际 上 将 
不 需要 直接 使 用 表单 。 在 Ajax 应 用 中 ， 你 希望 发 送 给 服务 器 的 很 可 能 是 
一 个 JavaScript 对 象 。《〈 这 个 对 象 可 能 从 HTML 表单 的 用 户 输入 中 得 到 ， 
但 这 里 不 是 问题 。) 前 面 展示 的 数据 变 成 JavaScript 对 象 的 表单 编码 形式 


可 能 是 : 





find:"pizza", 
zipcode:02134, 
radius:"1km" 


表单 编码 在 Web 上 如 此 广泛 使 用 ， 同 时 所 有 服务 器 并 的 编程 语言 都 
能 得 到 良好 的 支持 ， 所 以 非 表 单数 据 的 表单 编码 通常 也 是 容易 实现 的 事 
情 。 例 18-4 展 示 了 如 何 实现 对 象 属性 的 表单 编码 。 








例 18-4: 用 于 HTTP 请 求 的 编码 对 象 





区 

* 编 码 对 象 的 属性 ， 

* 如 果 它 们 是 来 自 HTML 表 单 的 名 / 值 对 ， 使 用 application/x-www-form-urlencoded 格 式 
*/ 












































function encodeFormData(data)t{ 
if(!1data)return"";// 一 直 返 回 字符 串 
var pairs=[];// 为 了 保存 名 = 值 对 
for(var name :in data){// 为 每 个 名 字 
if(!1data.hasOwnProperty(name))continue;// 跳 过 继承 属性 
if(typeof data[name]==="function")continue;// 跳 过 方法 
var value=data[name] .toString();// 把 值 转换 成 字符 串 
name=encodeURIComponent (name.replace("%20", "+"));// 编 码 名 字 
value=encodeURIComponent(value.replace("%20", "+"));// 编 码 值 
pairs.push(name+"="+value);// 记 住 名 = 值 对 

} 















































return pairs.join('&');// 返 回 使 用 "&" 连 接 的 名 / 值 对 
} 





使 用 已 定义 的 encodeFormData0 函 数 ， 我 们 能 容易 地 写 出 像 例 18-5 
中 postData() 函 数 这 样 的 工具 函数 。 需 要 注意 的 是 ， 简 单 来 说 ， 
postData0) 函 数 〈 在 随后 的 示例 中 有 相似 的 函数 ) 不 能 处 理 服务 器 的 响 
应 。 当 啊 应 完成 ， 它 传递 整个 XMLHttpRequest 对 象 给 指定 的 回调 函 
数 。 这 个 回调 函数 负责 检查 响应 状态 码 和 提取 响应 文本 。 


例 18-5: 使 用 表单 编码 数据 发 起 一 个 HTTP POST 请 求 














function postData(ur]l,data,callback){ 

var request=new XMLHttpRequest(); 

request .open("POST", url1);// 对 指定 URL 发 生 POST 请 求 

request .onreadystatechange=function(){// 简 单 的 事件 处 理 程序 
if(request.readystate===4&&callback)// 当 响应 完成 
callback(request );// 调 用 回调 函数 



































了 
request ,setRedquestHeader("Content-Type",// 设 置 Content -Type 
"application/x-www-form-urlencoded"); 
request.send(encodeFormData(data));// 发 送 表 单 编码 的 数据 
} 
































表单 数据 同样 可 以 通过 GET 请 求 来 提交 ， 既 然 表 单 提交 的 目的 是 为 
了 执行 只 读 查 询 ， 因 此 GET 请 求 比 POST 请 求 更 合适 。( 当 提交 表单 的 
目标 仅仅 是 一 个 只 读 查 询 ，GET 比 POST 更 合适 。) GET 请 求 从 来 没有 
主体 ， 所 以 需要 发 送 给 服务 器 的 表单 编码 数据 “负载 ?要 作为 URL (后 跟 
一 个 问号 ) 的 查询 部 分 。encodeFormData0 工 具 函 数 也 能 用 于 这 种 GET 
请 求 ， 且 例 18-6 演 示 了 如 何 使 用 它 。 





例 18-6: 使 用 表单 编码 数据 发 起 GET 请 求 





function getData(ur]l,data,callback){ 
var request=new XMLHttpRequest( ) ， 

request .open("GET", ur1L+// 通 过 添加 的 编码 数据 获取 指定 的 url 
"?"+encodeFormData(data)); 























request .onreadystatechange=function(){// 简 单 事件 处 理 程 序 
1f'(regquest: readyState===4&&callback)callback(request); 








request .Send (null);// 发 送 请 求 
} 





HTML 表 单 在 提交 的 时 候 会 对 表单 数据 进行 URL 编 码 ， 但 使 用 
XMLHttpRequest 能 给 我 们 编码 自己 想 要 的 任何 数据 。 随 着 服务 器 上 的 
适当 文 持 ， 我 们 的 pizza 碍 询 数据 将 编码 成 一 个 更 清晰 的 URL， 如 下 : 





http://restaurantfinder .example.com/02134/1km/pizza 





2.JSON 编 码 的 请 求 


在 POST 请 求 主 体 中 使 用 表单 编码 是 常见 惯例 ， 但 在 任何 情况 下 它 
都 不 是 HTTP 协 议 的 必需 品 。 近 年 来 ， 作 为 Web 交 换 格 式 的 JSON 已 经 得 
到 普及 。 例 18-7 展 示 如 何 使 用 JSON.stringify() (参见 6.9 节 ) 编码 请 求 主 
体 。 注 意 这 个 示例 和 例 18-5 的 不 同 仅 在 最 后 两 行 。 


例 18-7: 使 用 JSON 编 码 主体 来 发 起 HTTP POST 请 求 











function postJSON(ur]l, data,callback){ 

var reguest=new XMLHttpRequest(); 

request .open("POST", url1);// 对 指定 URL 发 送 POST 请 求 

request. onreadystatechange= function( ){// 简 单 的 事件 处 理 程序 
if(request.readyState===4&&callback)// 当 响应 完成 时 
callback (request );// 调 用 回调 函数 





























/ 
request,.setRequestHeader("Content-Type", "application/json"); 
request.send(JSON.stringify(data)); 


} 





3.XML 编 码 的 请 求 


XML 有 时 也 用 于 数据 传输 的 编码 。JavaScript 对 象 的 用 表单 编码 或 
JSON 编 码 版 本 表达 的 pizza 查 询 ， 也 能 用 XML 文档 来 表示 它 。 例 如 ， 它 





看 起 来 如 下 所 示 : 





<query> 

<find zipcode="02134"radius="1km"> 
pizza 

</find> 

</query> 





在 目前 展示 的 所 有 示例 中 ，XMLHttpRequest 的 send0 方 法 的 参数 是 
一 个 字符 串 或 null。 可 以 在 这 里 传 入 XML Document 对 象 。 例 
18-8 展 示 如 何 创建 一 个 简单 的 XML Document 对 象 并 使 用 它 作 为 HTTP 请 
求 的 主体 。 


例 18-8: 使 用 XML 文档 作为 其 主体 的 HITP POST 请 求 

















// 在 XML 中 编码 什么 东西 、 在 哪儿 和 半径 ， 然 后 向 指定 的 URL 发 送 POST 请 求 

// 当 接收 到 响应 时 ， 调 用 回调 函数 

function postQuery(url,what,where,radius,callback){ 

var request=new XMLHttpRequest(); 

request .open("POST", url1);// 对 指定 的 URL 发 送 POST 请 求 

request .onreadystatechange=function(){// 简 单 的 事件 处 理 程序 
if(request.readyState===4& &callback)callback(request); 
};//Create an XML document with root element<query> 

var doc=document.implementation.createDocument("","query",null); 
var query=doc.documentElement;//<=query 元 素 

var find=doc.createElement("find");// 创 建 <find 元 素 
query.appendchild(find);// 并 把 它 添加 到 query 二 中 
find,.setAttribute("zipcode",where);// 设 置 <find 二 的 属性 
find.setAttribute("radius",radius); 
find.appendCchild(doc,.createTextNode(what ) ) ;// 并 设置 <find> 的 内 容 
// 现 在 向 服务 器 发 送 XML 编 码 的 数据 
// 注 意 将 自动 设置 Content -Type 头 
request ,send(doc ) ; 














































































































注意 : 例 18-8 不 曾 为 请 求 设 置 "Content-Type" 头 。 当 给 send() 方 法 传 
入 XML 文档 时 ， 并 没有 预先 指定 "Content-Type" 头 ， 但 XMLHttpRequest 
对 象 会 自动 设置 一 个 合适 的 头 。 【类似 地 ， 如 果 给 send0 传 入 一 个 字符 
串 但 没有 指定 Content-Type 头 ， 那 么 XMLHttpRequest 将 会 添 
加 "ext/plain;charset=UTF-8" 头 。) 在 例 18-1 的 代码 中 显 式 设置 了 这 个 
头 ， 但 实际 上 对 于 纯 文 本 的 请 求 主 体 并 不 需要 这 么 做 。 


4. 上 传 文件 


HTML 表 单 的 特性 之 一 是 当 用 户 通过 <<input type="file" 之 元 素 选 择 





文件 时 ， 表 单 将 在 它 产生 的 POST 请 求 主体 中 发 送 文 件 内 容 。HTML 表 
单 始终 能 上 传 文件 ， 但 到 目前 为 止 它 还 不 能 使 用 XMLHttpRequest API 做 
相同 的 事情 。 然 后 ，XHR2 API 人 允许 通过 向 send0) 方 法 传 入 File 对 象 来 实 
现 上 传 文件 。 


没有 File0 对 象 构造 函数 ， 脚 本 仅 能 获得 表示 用 户 当 前 选择 文件 的 
File 对 象 。 在 文 持 File 对 象 的 浏览 句 中 ， 每 个 <<input type='"file" 之 元 素 有 
一 个 files 属 性 ， 它 是 File 对 象 中 的 类 数组 对 象 。 拖 放 API〈 参 见 17.7 节 ) 
允许 通过 拖 放 事件 的 dataTransfer.files 属 性 访问 用 户 “ 拖 放 ” 到 元 素 上 的 文 
件 。 我 们 将 在 22.6 节 和 22.7 节 看 到 更 多 关于 File 对 象 的 内 容 。 但 现在 来 
讲 ， 可 以 将 它 当 做 一 个 用 户 选择 文件 完全 不 透明 的 表示 形式 ， 适 用 于 通 
过 send0 来 上 传 文件 。 例 18- 9 是 一 个 日 袋 的 JavaScript 图 数 ， 它 对 某 些 文 
ee es 这 样 它们 能 自动 把 任何 选择 过 
的 文件 内 容 通 过 POST 方法 自动 发 送 到 指定 的 URL。 


例 18-9: 使 用 HTTP POST 请 求 上 传 文件 


























// 查 找 有 data-up1Loadto 属 性 的 全 部 <input type="file" 之 元 素 ， 

// 并 注册 onchange 事 件 处 理 程序 

// 这 样 任何 选择 的 文件 都 会 自动 通过 POST 方 法 发 送 到 指定 的 "uploadto"URL 
// 服 务 器 的 响应 是 忽略 的 
whenReady (function( ){// 当 文档 准备 就 绪 时 运行 

var elts=document .getElementsByTagName ("input");// 所 有 的 ijnput 元 素 
for(var i=0;i<elts.length;i+t+){// 遍 历 它 们 

var input=elts[i]; 
if(input.type!=="file")continue;// 跳 过 所 有 非 文 件 上 传 元 素 

var url=input.getAttribute("data-uploadto");// 获 取 上 传 URL 
if(!1url)continue;// 跳 过 任何 没有 URL 的 元 素 
input.addEventListener("change", function(){// 当 用 户 选 择 文件 时 
var file=this.files[0];// 假 设 单 个 文件 选择 

if(!file)return; // 如 果 没 有 文件 ， 不 做 任何 事情 

var xhr=new XMLHttpRequest();// 创 建新 请 求 

xhr .open("POST", Url1);// 向 这 个 URL 发 送 POST 请 求 

xhr.send(file); // 把 文件 作为 主体 发 送 

},false); 

} 


}); 

































































































































































正如 我 们 在 22.6 节 所 看 到 的 ， 文 件 类 型 是 更 通用 的 二 进 制 大 对 象 
(Blob) 类 型 中 的 一 个 子 类 型 。XHR2 人 允许 向 send0) 方 法 传 入 任何 Blob 对 
象 。 如 果 没 有 显 式 设置 Content-Type 头 ， 这 个 Blob 对 象 的 type 属 性 用 于 
设置 竺 上传 的 Content-Type 头 。 如 果 需 要 上 传 已 经 产生 的 二 进 制 数据 ， 
人 
主体 。 


5.multipart/form-data 请 求 


当 HITML 表 单 同 时 包含 文件 上 传 元 素 和 其 他 元 素 时 ， 浏 览 右 不 能 使 
用 普通 的 表单 编码 而 必须 使 用 称 为 "multipart/form-data" 的 特殊 Content- 
Type 来 用 POST 方法 提交 表单 。 这 种 编码 包括 使 用 长 “边界 ”字符 串 把 请 
求 主体 分 离 成 多 个 部 分 。 对 于 文本 数据 ， 手 动 创建 "multipart/form- 
data" 请 求 主体 是 可 和 的 ， 但 很 复杂 。 


XHR2 定 义 了 新 的 FormData API， 它 容易 实现 多 部 分 请 求 主体 。 首 
先 ， 使 用 FormData0 构 造 函数 创建 FormData 对 象 ， 然 后 按 需 多 次 调用 这 
个 对 象 的 append0 方 法 把 个 体 “ 部 分 ”( 可 以 是 字符 串 、File 或 Blob 对 象 ) 
添加 到 请 求 中 。 最 后 ， 把 FormData 对 象 传递 给 send() 方 法 。send0) 方 法 将 
对 请 求 定义 合适 的 边界 字符 串 和 设置 "Content-Type" 头 。 例 18-10 演 示 了 
FormData 的 使 用 ， 同 时 我 们 将 在 例 18-11 再 次 看 到 它 。 


例 18-10: 使 用 POST 方法 发 送 multiparVform-data 请 求 主体 














function postFormData(uril,data,callback){ 

if(typeof FormData==="undefined") 

throw new Error("FormData is not implemented"); 

var request=new XMLHttpRequest();// 新 HTTP 请 求 

request .open("POST", url);// 对 指定 URL 发 送 POST 请 求 
request.onreadystatechange=function( ){// 简 单 的 事件 处 理 程序 
if(request.readyState===4&&callback)// 当 响应 完成 时 
callback(request );// 调 用 回调 函数 

}; 

var formdata=new FormData(); 

for(var name in data)t{ 

if(!data.hasownProperty(name) )continue;// 跳 过 继承 的 属性 
var value=data[name]; 

if(typeof value==="function")continue;// 跳 过 方法 
// 每 个 属性 变 成 请 求 的 一 个 部 分 

// 这 里 允许 File 对 象 

formdata.append(name, value);// 作 为 一 部 分 添加 名 / 值 对 
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} 

// 在 multipart/form-data 请 求 主体 中 发 送 名 / 值 对 

// 每 对 都 是 请 求 的 一 个 部 分 ， 注 意 ， 当 传 入 FormData 对 象 时 
//send() 会 自动 设置 Content -Type 头 

request ,send(formdata) ，; 














18.1.4 HTTP 进度 事件 


在 之 前 的 示例 中 ， 使 用 readystatechange 事 件 探测 HITP 请 求 的 完 
成 。XHR2 规 范 草 案 定 义 了 更 多 有 用 的 事件 集 ， 有 些 已 经 在 Firefox、 








Chrome 和 Safari 中 得 到 文 持 。 在 这 个 新 的 事件 模型 中 ，XMLHttpRequest 
对 象 在 请 求 的 不 同 阶段 触发 不 同类 型 的 事件 ， 所 以 它 不 再 需要 检 碍 
readyState 属 性 。 


在 文 持 它们 的 浏览 器 中 ， 这 些 新 事件 会 像 如 下 这 样 触 发 。 当 调用 
send0 时 ， 触 发 单个 loadstart 事 件 。 当 正在 加 载 服 务 器 的 啊 应 时 ， 
XMLHttpRequest 对 象 会 发 生 progress 事 件 ， 通 党 每 隔 50 宣 秒 左 右 ， 所 以 
可 以 使 用 这 些 事件 给 用 户 反 馈 请 求 的 进度 。 如 果 请 求 快速 完成 ， 它 可 能 
从 不 会 触发 progress 事 件 。 当 事件 完成 ， 会 触发 load 事 件 。 


一 个 完成 的 请 求 不 一 定 是 成 功 的 请 求 ， 例 如 ，1load 事 件 的 处 理 程序 
应 该 检查 XMLHttpRequest 对 象 的 sta tus 状 态 码 来 确定 收 到 的 是 "200 
OK" 而 不 是 "404 Not Found" 的 HTTP 响 应 。 


HTTP 请 求 无 法 完成 有 3 种 情况 ， 对 应 3 种 事件 。 如 果 请 求 超时 ， 会 
触发 timeout 事 件 。 如 果 请 求 中 止 ， 会 触发 abort 事 件 。(18.1.5 节 包含 超 
时 和 abort 方 法 的 内 容 。) 最 后 ， 像 太 多 重 定 问 这 样 的 网 络 错误 会 阻止 请 
求 完 成 ， 但 这 些 情况 发 生 时 会 触发 error 事 件 。 


对 于 任何 具体 请 求 ， 浏 览 器 将 只 会 触发 load、abort、timeout 和 error 
事件 中 的 一 个 。XHR2 规 范 草 案 指 出 一 旦 这 些 事件 中 的 一 个 发 生 后 ， 浏 
览 右 应 该 触发 loadend 事 件 。 但 在 写本 章 时 ， 尚 未 有 浏览 器 实现 loadend 
事件 。 


可 以 通过 XMLHttpRequest 对 象 的 addEventListener(0) 方 法 为 这 些 
progress 事 件 中 的 每 个 都 注册 处 理 程序 。 如 果 每 种 事件 只 有 一 个 事件 处 
理 程序 ， 通 常 更 容易 的 方法 是 只 设置 对 应 的 处 理 程序 属性 ， 比 如 
onprogress 和 onload。 甚 至 可 以 使 用 这 些 事件 属性 是 否 存 在 来 测试 浏览 器 
是 否 支 持 progress 事 件 : 


























if("onprogress"in(new XMLHttpRequest())){// 文 持 progress 事 件 
} 


除了 像 type 和 timestamp 这 样 常用 的 Event 对 象 属性 外 ， 与 这 些 
Progress 事 件 相 关联 的 事件 对 象 还 有 3 个 有 用 的 属性 。loaded 属 性 是 目前 
传输 的 字 节 数值 。total 属 性 是 自 "Content-Length" 头 传输 的 数据 的 整体 长 
度 〈 单 位 是 字 节 ) ， 如 果 不 知 道内 容 长 度 则 为 0。 最 后 ， 如 果 知 道内 容 
长 度 则 lengthComputable 属 性 为 true; 否则 为 false。 显 然 ，total 和 1loaded 





属性 对 progress 事 件 处 理 程序 相当 有 用 : 





request.onprogress=function(e){ 
if(e.lengthComputable) 
progress.innerHTML=Math.round(100*e.loaded/e.total)+"%Complete"; 





1. 上 传 进度 事件 


除了 为 监控 HTTP 啊 应 的 加 载 定义 的 这 些 有 用 的 事件 外 ，XHR2 也 给 
出 了 用 于 监控 HTTP 请 求 上 传 的 事件 。 在 实现 这 些 特 性 的 浏览 器 中 ， 
XMLHttpRequest 对 象 将 有 upload 属 性 。upload 属 性 值 是 一 个 对 象 ， 它 定 
义 了 addEventListener() 方 法 和 整个 progress 事 件 集合 ， 比 如 onprogress 和 和 
onload。 〈 但 upload 对 象 没 有 定义 onreadystatechange 属 性 ，upload 仅 能 触 
发 新 的 事件 类 型 。) 


你 能 仅 仪 像 使 用 常见 的 progress 事 件 人 处理 程序 一 样 使 用 upload 事 件 处 
理 程序 。 对 于 XMLHttpRequest 对 象 Xx， 设 置 x.onprogress 以 监控 响应 的 下 
载 进 度 ， 并 且 设 置 x.upload.onprogress 以 监控 请 求 的 上 传 进 度 。 


例 18-11 演 示 了 如 何 使 用 upload ”progress 事 件 把 上 传 进度 反馈 给 用 
户 。 这 个 示例 也 演示 了 如 何 从 拖 放 API 中 获得 File 对 象 和 如 何 使 用 
FormData ”API 在 单个 XMLHttpRequest 请 求 中 上 传 多 个 文件 。 在 写本 书 
人 这 些 功能 依旧 在 草案 中 ， 并 且 这 些 示例 不 能 在 所 有 的 浏览 器 中 工 


例 18-11: 监控 HTTP 上 传 进度 








// 查 找 所 有 含有 "fileDropTarget" 类 的 元 素 

// 并 注册 DnD 事 件 处 理 程序 使 它们 能 响应 文件 的 拖 放 

// 当 文件 放下 时 ， 上 传 它们 到 data-uploadto 属 性 指定 的 URL 
whenReady(function(){ 

var elts=document .getElementsByClassName("fileDropTarget"); 
for(var i=0;i<elts.length;i++)t{ 

var target=elts[i]; 

var url=target.getAttribute("data-uploadto"); 
if(!url)continue,; 

createFileUploadDropTarget(target, url); 















































} 
function createFileUploadDropTarget(target,url){// 跟 踪 当 前 是 否 正 在 上 传 ， 因 此 我 们 能 拒绝 
放下 





// 我 们 可 以 处 理 多 个 并 发 上 传 
// 但 对 这 个 例子 使 用 进度 通知 太 困难 ] 
var uploading=false,; 















































console.1log(target, url); 
target.ondragenter=function(e)t{ 
console.log("dragenter"); 
if(uploading)return;// 如 果 正 在 忙 ， 忽 略 拖 放 
var types=e.dataTransfer.types,; 
if(types&& 
((types.contains&&types.contains("Files"))|| 
(types.indexOof& &types.indexof ("Files")!==-1)))t 
target.classList.add("wantdrop"); 

return false,; 

} 

}; 

target .ondragover=function(e){if(!'uploading)return false,;}; 
target .ondragleave=function(e)t{ 
if(!uploading)target.classList.remove("wantdrop"); 
}; 

target .ondrop=function(e){ 
if(uploading)return false; 

var files=e.dataTransfer .files,; 
if(files&&files.length)t{ 
uploading=true; 

var message="Uploading files:<=ul>"; 
for(var i=0;i<files.length;i++) 
message+="<~1i>"+files[i].name+"</1i>>"; 
message+="</ul>"，; 
target.innerHTML=message; 
target.classList.remove("wantdrop"); 
target.classList.add("uploading"); 

var xhr=new XMLHttpRequest(); 
xhr.open("POST", ur1l); 

var body=new FormData( ); 

for(var i=0;i<files.length;i++)body.append(i,files[i]); 
xhr .upload.onprogress=function(e){ 
if(e.lengthComputable){ 
target.innerHTML=message+ 
Math.round(e.loaded/e.total*100)+ 
"%Complete"; 

} 

}; 

xhr.upload.onload=function(e){ 
uploading=false; 
target.classList.remove("uploading"); 
target.innerHTML="Drop files to upload"; 
}; 

xhr.send(body); 

return false,; 

} 

target.classList.remove("wantdrop"); 

} 

} 

}); 











18.1.5” ”中止 请 求 和 超时 


可 以 通过 调用 XMLHttpRequest 对 象 的 abort() 方 法 来 取消 正在 进行 的 
HTTP 请 求 。abort() 方 法 在 所 有 的 XMLHttpRequest 版 本 和 XHR2 中 可 用 ， 
调用 abort0) 方 法 在 这 个 对 象 上 触发 abort 事 件 。“〈 在 写本 章 时 ， 某 些 浏 览 











件 。 可 以 通过 XMLHttpRequest 对 象 的 "onabort" 属 性 是 否 存 
在 来 判断 。 


调用 abort() 的 主要 原因 是 完成 取消 或 超时 请 求 消耗 的 时 间 太 长 或 当 
响应 变 得 无 关 时 。 假 设 使 用 XMLHttpRequest 为 文本 输入 域 请求 自 动 完 
成 推荐 。 如 果 用 户 在 服务 器 的 建议 达到 之 前 输入 了 新 字符 ， 这 时 等 待 请 
求 不 再 有 趣 ， 应 该 中 止 。 


XHR2 定 义 了 timeout 属 性 来 指定 请 求 自 动 中 止 后 的 蝶 秒 数 ， 也 定义 
了 timeout 事 件 用 于 当 超 时 发 生 时 触 友 (不 是 abort 事 件 ) 。 在 写本 章 时 ， 
浏览 器 不 文 持 这 些 上 自动 超时 (并 且 它 们 的 XMLHttpRequest 对 象 没有 
timeout 和 ontimeout 属 性 ) 。 可 以 用 setTimeoutO 〈 参 见 14.1 节 ) 和 abort() 
方法 实现 自己 的 超时 。 例 18-12 演 示 如 何 这 么 做 。 


例 18-12: 实现 超时 




















// 发 起 HTTP GET 请 求 获取 指定 URL 的 内 容 

// 如 果 响 应 成 功 到 达 ， 传 入 responseText 给 回调 函数 
// 如 果 响 应 在 timeout 毫 秒 内 没有 到 达 ， 中 止 这 个 请 求 
// 浏 览 器 可 能 在 abort( ) 后 触发 "readystatechange" 
// 如 果 是 部 分 请 求 结果 到 达 ， 甚 至 可 能 设置 status 属 性 
// 所 以 需要 设置 一 个 标记 ， 当 部 分 且 超时 的 响应 到 达 时 不 会 调用 回调 函数 
// 如 果 使 用 load 事件 就 没有 这 个 风险 
function timedGetText(url,timeout,callback){ 
var request=new XMLHttpRequest();// 创 建新 请 求 
var timedout=false;// 是 否 超 时 

// 启 动 计时 器 ， 在 tijmeout 上 毫秒 后 将 中 止 请 求 
var timer=setTimeout (function(){// 如 果 由 发 ， 启 动 一 个 计时 器 
timedout=true;// 设 置 标记 

request. abort(); // 然 后 中 止 请 求 
























































































































































}, 

timeout) ;// 中 止 请 求 之 前 的 时 长 
request .open("GET'" ,UrlL) ;// 获 取 指 定 的 URL 

request .onreadystatechange=function(){// 定 义 事件 处 理 程序 
if(request.readyState!==4)return;// 和 忽略 未 完成 的 请 求 
if(timedout)return;// 忽 略 中 止 请 求 

clearTimeout (timer );// 取 消 等 待 的 超时 
if(request.status===200)// 如 果 请 求 成 功 
callback(request.responseText);// 把 response 传 给 回调 函数 
}; 

request.send(null);// 立 即 发 送 请 求 

} 

















18.1.6“” 跨 域 HTTP 请 求 


作为 同 源 策略 (参见 13.6.2 节 ) 的 一 部 分 ，XMLHttpRequest 对 象 通 
第 仅 可 以 发 起 和 文档 具 \ 有 相同 服务 器 的 HTTP 请 求 。 这 个 限制 关闭 了 安 





全 漏洞 ， 但 它 举 手 符 脚 并 且 也 阻止 了 大 量 合适 使 用 的 跨 域 请 求 。 可 以 在 
<form 盖 和 <<iframe 之 元 素 中 使 用 路 域 URL， 而 浏览 器 显示 最 终 的 路 域 

文档 。 但 因为 同 源 策 略 ， 浏 览 器 不 允许 原始 脚本 碍 找 路 域 文 档 的 内 容 。 

使 用 XMLHttpRequest， 文 档 内 容 都 是 通过 responseText 属 性 暴露 ， 所 以 

同 源 策略 不 允许 XMLHttpRequest 进 行路 域 请 求 。 (注意 二 script 二 元 素 

并 未 真正 受 限 于 同 源 策略 : 它 加 载 并 执行 任何 来 源 的 脚本 。 如 果 我 们 看 
18.2 节 ， 跨 域 请 求 的 灵活 性 使 得 二 script 二 > 元素 成 为 取代 XMLHttpRequest 
的 主流 Ajax 传输 协议 。) 


XHR2 通 过 在 HITP 啊 应 中 选择 发 送 合适 的 CORS (Cross-Origin 
Resource ”Sharing， 跨 域 资 源 共享 ) 允许 跨 域 访问 网 站 。 在 写本 书 时 ， 
Firefox、Safari、Chrome 的 当前 版 本 都 文 持 CORS， 而 IE8 通 过 这 里 没有 
列 出 的 专用 XDomainReqduest 对 象 文 持 它 。 作 为 Web 程 序 员 ， 使 用 这 个 功 
能 并 不 需要 做 什么 额外 的 工作 :如果 浏览 右 支 持 XMLHttpRequest 的 
CORS 且 实现 跨 域 请 求 的 网 站 决定 使 用 CORS 人 允许 跨 域 请 求 ， 那 么 同 源 
策略 将 不 放宽 而 跨 域 请 求 就 会 正常 工作 。 


虽然 实现 CORS 文 持 的 路 域 请 求 工作 不 需要 做 任何 事情 ， 但 有 一 些 
安全 细节 需要 了 解 。 首 先 ， 如 果 给 XMLHttpRequest 的 open() 方 法 传 入 用 
户 名 和 密码 ， 那 么 它们 绝对 不 会 通过 跨 域 请 求 发 送 〈( 这 使 分 布 式 密码 破 
解 攻击 成 为 可 能 ) 。 除 外 ， 跨 域 请 求 通常 也 不 会 包含 其 他 任何 的 用 户 证 
书 : cookie 和 HTTP 身 份 验 证 令 脾 (token) 通常 不 会 作为 请 求 的 内 容 部 
分 发 送 且 任何 作为 跨 域 响应 来 接收 的 cookie 都 会 丢弃 。 如 果 跨 域 请 求 需 
要 这 几 种 凭证 才能 成 功 ， 那 么 必须 在 用 send0 发 送 请 求 前 设置 
XMLHttpRequest 的 withCredentials 属 性 为 tue。 这 样 做 不 常见 ， 但 测试 
withCredentials 的 存在 性 是 测试 浏览 器 是 个 文 持 CORS 的 一 种 方法 。 























示例 8-13 是 常见 的 JavaScript 代 码 ， 它 使 用 XMLHttpRequest 实 现 
HTTP HEAD 请 求 以 下 载 文档 中 a 二 元 素 链接 资源 的 类 型 、 大 小 和 时 间 
等 信息 。 这 个 HEAD 请 求 按 需 发 起 ， 且 由 此 产生 的 链接 信息 会 出 现在 工 
县 提示 中 。 这 个 示例 假设 路 域 链接 的 信息 不 可 用 ， 但 通过 文 持 CORS 的 
浏览 占 尝 试 下 载 它 。 


例 18-13: 使 用 HEAD 和 CORS 请 求 链接 详细 信息 





/A 
*linkdetails.js 
* 














* 这 个 常见 的 JavaScript 模 块 查询 有 href 属 性 但 没有 title 属 性 的 所 有 二 a 二 元 素 
































* 并 给 它们 注册 onmouseover 事 件 处 理 程序 
* 这 个 事件 处 理 程序 使 用 XMLHttpRequest HEAD 请 求 取得 链接 资源 的 详细 信息 
* 然 后 把 这 些 详 细 信息 设置 为 链接 的 tit1e 属 性 
* 这 样 它 们 将 会 在 工具 提示 中 显示 
*/ 
whenReady (function( ){// 是 否 有 机 会 使 用 跨 域 请 求 ? 
var supportsCORS=(new XMLHttpRequest()).withcredentials!==undefined;// 遍 历 文档 中 的 

所 有 链接 
var links=document .getElementsByTagName('a'); 
for(var i=0;i<1links.length;i++){ 
var link=links[i]; 
if(!11ink.href)continue;// 跳 过 没有 超 链 接 的 锚 点 
if(1link.title)continue;// 跳 过 已 经 有 工具 提示 的 链接 
// 如 果 这 是 一 个 跨 域 链接 
if(link.host!==location.host||link.protocol!==location.protocol) 
{ 
link.title=" 站 外 链接 ";// 假 设 我 们 不 能 得 到 任何 信息 
if(!supportsCORS)continue;// 如 果 没 有 CORS 文 持 就 退出 

否则 ， 我 们 能 了 解 这 个 链接 的 更 多 信息 

// 所 以 继续 前 进 ， 注 册 事件 处 理 程 序 ， 于 是 我 们 可 以 尝试 


} 

// 注 册 事 件 处 理 程 序 ， 当 鼠标 悬 停 时 下 载 链接 详细 信息 
if(Jink.addEventListener ) 
lJink.addEventListener("mouseover",mouseoverHandler, false); 

else 

link.attachEvent("onmouseover",mouseoverHandler ); 

} 

function mouseoverHandler(e)t{ 

var link=e.target||e.srcElement;//<a 元 素 

var url=link.href;// 链 接 URL 

var req=new XMLHttpRequest();// 新 请 求 

req .open("HEAD", url1);// 仅 仅 询问 头 信 息 
req.onreadystatechange=function(){// 事 件 处 理 程序 
if(req.readyState!==4)return;// 忽 略 未 完成 的 请 求 
if(req.status===200){// 如 果 成 功 

var type=req.getResponseHeader("Ccontent-Type");// 获 取 链 接 的 详细 情况 
var size=req.getResponseHeader("Content-Length"); 
var date=req.getResponseHeader ("Last-Modified");// 在 
link.title=" 类 型 :"+type+"\n"+ 

"大 小 :"+size+"\n"+" 时 间 :"+date; 
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具 提 示 中 显示 详细 信息 








} 

else{// 如 果 请 求 失败 ， 有 是 链接 没有 "站 外 链接 "的 工具 提示 
// 那 么 显示 这 个 错误 

if(!1link.title) 

Jink.title="Couldn't fetch details:\n"+ 
req.status+""+redq.statusText,; 

} 

}; 

reqd.send(null);// 移 除 处 理 程序 仅 想 一 次 获取 这 些 头 信息 
if(link.removeEventListener) 
link.removeEventListener("mouseover",mouseoverHandler, false); 
else 

link.detachEvent("onmouseover",mouseoverHandler ); 

} 

}); 
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18.2 ”借助 过 script 二 发 送 HTTP 请 求 : JSONP 


本 章 概 述 提 到 过 二 script 二 元 素 可 以 作为 一 种 Ajax 传 输 机 制 ， 只 须 设 
置 过 script 二 元素 的 src 属 性 (假如 它 还 没 插入 到 document 中 ， 需 要 插入 
进去 ) ， 然 后 浏览 器 就 会 发 送 一 个 HTTP 请 求 以 下 载 src 属 性 所 指 同 的 
URL。 使 用 一 script> 元 素 进 行 Ajax 传输 的 一 个 主要 原因 是 ， 它 不 受 同 源 

策略 的 影响 ， 因 此 可 以 使 用 它们 从 其 他 的 服务 器 请 求 数据 ， 第 二 个 原因 
是 包含 JSON 编 码 数据 的 啊 应 体会 自动 解码 ( 即 ， 执 行 ) 。 


脚本 和 安全 性 


为 了 使 用 <script 之 元 素 进行 Ajax 传输 ， 必 须 允 许 Web 页 面 可 以 执行 
远程 服务 器 发 送 过 来 的 任何 JavaScript 代 码 。 这 意味 着 对 于 不 可 信 的 服务 
器 ， 不 应 该 采取 该 技术 。 当 与 可 信 的 服务 器 通信 时 ， 要 提防 攻击 者 可 能 
进入 服务 器 中 ， 然 后 黑客 会 接管 你 的 网 页 ， 运 行 他 自己 的 代码 ， 并 显示 
任何 他 想 要 的 内 容 ， 还 表现 得 就 像 这 些 内 容 本 就 来 自 你 的 网 站 。 


要 注意 的 是 ， 这 种 方式 普遍 用 于 可 信 的 第 三 方 脚本 ， 特 别 是 在 页 
ee 和 和 “组 件 ”。 作为 Ajax 传输 使 用 的 和 script> 与 可 信 的 Web 服 
务 通信 ， 没 有 比 这 更 危险 的 了 。 


这 种 使 用 二 script 二 元 素 作为 Ajax 传 输 的 技术 称 为 JSONP， 知 HTTP 
请 求 所 得 到 的 响应 数据 是 经 过 JSON 编 码 的 ， 则 适合 使 用 该 技术 。P 代 
表 “ 填 充 ” 或 “前 缀 ”一 这 个 一 会 儿 再 作 解 释 终 。 


假设 你 已 经 写 了 一 个 服务 ， 它 处 理 GET 请 求 并 返回 JSON 编 码 的 数 
据 。 同 源 的 文档 可 以 在 代码 中 使 用 XMLHttpRequest 和 JSON.parse()， 出 
像 例 18-3 中 的 代码 一 样 。 假 如 在 服务 器 上 启用 了 CORS， 在 新 的 浏览 器 
下 ， 跨 域 的 文档 也 可 以 使 用 XMLHttpRequest 享 受到 该 服务 。 在 不 支持 
CROS 的 旧 浏 览 器 下 ， 跨 域 文档 只 能 通过 二 script 过 元素 访问 这 个 服务 。 
使 用 JSONP，JSON 响 应 数据 (理论 上 ) 是 合法 的 JavaScript 代 码 ， 当 它 
ed 了 它 。 相 反 ， 不 使 用 JSONP， 而 是 对 JSON 编 码 过 的 
数据 解码 ， 结 果 还 是 数据 ， 并 没有 做 任何 事情 。 


这 就 是 JSONP 中 P 的 意义 所 在 。 当 通过 二 script 二 元 素 调 用 数据 时 ， 
啊 应 内 容 必 须 用 JavaScript 函 数 名 和 圆 括号 包 庄 起 来 。 而 不 是 发 送 这 样 一 
段 JSON 数 据 : 





























[1,2,{"buckle":"my shoe"}] 


它 会 发 送 这 样 一 个 包 庄 后 的 JSON 响 应 ; 





handleResponsel( 
[1,2,{"buckle":"my shoe"}] 
) 





包 于 后 的 啊 应 会 成 为 <script 二 > 元素 的 内 容 ， 它 先 判 断 JSON 编 码 后 
的 数据 (毕竟 就 是 一 个 JavaScript 表 达 式 ) ， 然 后 把 它 传递 给 
de i 我 们 可 以 假设 ， 文 档 会 拿 这 些 数 据 做 一 些 有 用 的 
情 。 


为 了 可 行 起 见 ， 我 们 必须 通过 某 种 方式 告诉 服务 ， 它 正在 从 一 个 去 
script 之 元 素 调用 ， 必 须 返 回 一 个 JSONP 响 应 ， 而 不 应 该 是 普通 的 JSON 
啊 应 。 这 个 可 以 通过 在 URL 中 添加 一 个 查询 参数 来 实现 : 例如 ， 妃 加 "? 
json" (或 &json) 。 


在 实践 中 ， 文 持 JSONP 的 服务 不 会 强制 指定 客户 端 必 须 实现 的 回调 
函数 名 称 ， 比 如 handleResponse。 相 反 ， 它 们 使 用 查询 参数 的 值 ， 人 允许 
客户 端 指定 一 个 函数 名 ， 然 后 使 用 图 数 名 去 填充 啊 应 。 例 18-14 使 用 一 
个 名 为 jsonp 的 查询 参数 来 指定 回调 函数 的 名 称 。 许 多 支持 JSONP 的 服务 
都 能 分 辨 出 这 个 参数 名 。 男 一 个 常见 的 参数 名 称 是 callback， 为 了 让 使 
用 到 的 服务 支持 类 似 特殊 的 需求 ， 束 需要 在 代码 上 做 一 些 修改 了 。 


例 18-14 定 义 了 一 个 getJSONP0O 函 数 ， 它 发 送 JSONP 请 求 。 这 个 例子 
有 点 复杂 ， 有 几 点 值得 注意 。 首 先 ， 注 意 它 是 如 何 创建 一 个 新 的 二 
script 二 元素， 设置 其 URL， 并 把 它 插 入 到 文档 中 的 。 正 是 该 插入 操作 
触发 HTTP 请 求 。 其 次 ， 注 意 例 18-14 为 每 个 请 求 都 创建 了 一 个 全 新 的 内 
部 回调 函数 ， 回 调 函 数 作为 getJSONPO 函 数 的 一 个 属性 存储 起 来 。 最 后 
人 删除 脚本 元 素 ， 并 删除 

















例 18-14: 使 用 script 元 素 发 送 JSONP 请 求 








// 根 据 指定 的 URL 发 送 一 个 JSONP 请 求 

// 然 后 把 解析 得 到 的 响应 数据 传递 给 回调 函数 
// 在 URL 中 添加 一 个 名 为 jsonp 的 查询 参数 ， 用 于 指定 该 请 求 的 回调 函数 的 名 称 

function getJSONP(url,callback){// 为 本 次 请 求 创建 一 个 唯一 的 回调 函数 名 称 
var cbnum="cb"+getJSONP.counter++;// 每 次 自 增 计数 器 
var cbname="getJSONP."+cbnum,;// 作 为 JSONP 函 数 的 属性 
// 将 回调 函数 名 称 以 表单 编码 的 形式 添加 到 URL 的 查询 部 分 中 

























































































// 使 用 jsonp 作 为 参数 名 ， 一 些 支 持 JSONP 的 服务 
// 可 能 使 用 其 他 的 参数 名 ， 比 如 callback 
if(url.index0of("?")===-1)//URL 没 有 查询 部 分 
url+="?jsonp="+cbname;// 作 为 查询 部 分 添加 参数 

else// 否 则 

url+="&&jsonp="+cbname;// 作 为 新 的 参数 添加 它 

// 创 建 script 元 素 用 于 发 送 请 求 

var script=document.createElement("script");// 定 义 将 被 脚本 执行 的 回调 
getJSONP[cbnum]=function(response)t{ 

try{ 

callback(response) ;// 处 理 响 应 数据 
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} 

finally{// 即 使 回调 函数 或 响应 抛 出 错误 

delete getJSONP[cbnum] ;// 删 除 该 函数 
script.parentNode.removeChild(script);// 移 除 script 元 素 





} 

};// 立 即 触发 HTTP 请 求 

script.,src=url;// 设 置 脚本 的 URL 

document .body.appendchild(script);// 把 它 添加 到 文档 中 

















} 
getJSONP.counter=0;// 用 于 创建 唯一 回调 函数 名 称 的 计数 器 


18.3 ”基于 服务 器 端 推 送 事件 的 Comet 技 术 


在 服务 器 ys nese a 
化 了 Comet 应 用 程序 的 编写 可 以 传递 一 个 URL 给 EventSourceO 构 造 函 
数 ， 然 后 在 返回 的 实例 上 监听 消息 事件 。 





ix 





























Var ticker=new EventSource("stockprices.php"); 
ticker.onmessage=function(e){ 

Var type=e.type; 

var data=e.data;// 现 在 处 理事 件 类 型 和 事件 的 字符 串 数据 
} 


























与 nessage 事 件 关 联 的 事件 对 象 有 一 个 data 必 性， 这 个 属性 保存 服务 
器 作为 该 事件 的 负载 发 送 的 任何 字符 串 。 如 同 其 他 类 型 的 事件 一 样 ， 刻 
对 象 还 有 一 个 type 属 性 ， 默认 值 是 message， 事 件 源 可 以 修改 这 个 值 。 
onmessage 事 件 处 理 程 序 接收 从 一 个 给 定 的 服务 器 事件 源 发 出 的 所 有 事 
件 ， 如 果 有 必要 ， 也 可 以 根据 type 属 性 派发 一 个 事件 。 


服务 器 端 推 送 事件 的 协议 很 简单 。 客 户 端 〈 创 建 一 个 EventSource 对 
象 时 会 ) 建立 一 个 到 服务 器 的 连接 ， 服 务 器 保持 这 个 连接 处 于 打开 状 
态 。 当 发 生 一 个 事件 时 ， 服 务 咒 端 在 连接 中 写 入 几 行 文本 ， 抛 给 客户 端 
的 事件 可 能 看 起 来 是 这 样 : 





event: bid 设置 时 间 对 象 的 类 型 

data: G00G 设置 data 属 性 

data: 999 追加 新 的 一 行 和 更 多 的 数据 
一 个 空 行 会 触发 消息 事件 


该 协议 还 有 一 些 额外 的 细节 ， 比 如 允许 事件 携带 给 定 ID， 然 后 再 次 
连 上 的 客户 并 告诉 服务 器 它 收 到 的 最 后 一 个 事件 的 D， 这 样 服务 占 就 可 
以 重新 发 送 客户 端 错过 的 事件 。 但 是 这 些 细节 在 此 处 并 不 重要 。 


Comet 架 构 的 一 个 常见 应 用 是 聊天 应 用 ， 聊 天 客户 端 可 以 通 
XMLHttpReduest 门 著 大 室 发 送 新 的 消息 ， 也 可 人 
订 es 县 。 例 18-15 展 示 了 使 用 EventSource 写 一 个 聊天 客户 端 是 多 

么 容易 。 


示例 18-15: 一 个 使 用 EventSource 的 简易 聊天 客户 端 











<script> 

window.onload=function( ){// 注 意 一 些 UI 细节 

var nick=prompt("Enter your nickname");// 获 取 用 户 昵称 

var input=document .getElementById("input");// 找 出 jnput 表 单元 素 
input.focus();// 设 置 键盘 焦点 

// 通 过 EventSource 注 册 新 消息 的 通知 

var chat=new EventSource("/chat"); 

chat .onmessage=function(event ){// 当 捕获 一 条 消息 时 

var msg=event.data;// 从 事件 对 象 中 取得 文本 数据 

var node=document .createTextNode(msg);// 把 它 放 入 一 个 文本 节点 
var div=document.createElement("div");// 创 建 一 个 <div>> 
div.appendChild(node);// 将 文本 节点 插入 div 中 
document .body.insertBefore(div,input);// 将 div 插 入 input 之 前 
input.scrollIntoView( );// 保 证 jnput 元 素 可 见 







































































































































































} 

// 使 用 XMLHttpRequest 把 用 户 的 消息 发 送 给 服务 器 

input .onchange=function(){// 用 户 完成 输入 

var msg=nick+":"+input.value;// 组 合用 户 名 和 用 户 输入 的 信息 
var xhr=new XMLHttpRequest();// 创 建新 的 XHR 
xhr .open("POST", "/chat");// 发 送 到 /chat 

xhr .setRequestHeader ("Content-Type",// 指 明 为 普通 的 UTF-8 文 本 
"text/plain;charset=UTF-8"); 

xhr .send(msg);// 发 送 消息 
input .value="";// 准 备 下 次 输入 

} 

}; 

</script> 

三 !-- 聊 天 的 UI 只 是 一 个 单行 文本 域 - - > 

二 !-- 新 的 聊天 消息 会 插入 input 域 之 前 - - > 
<input id="input"style="width:100%"/> 

















































































































二 一 


在 写 这 本 书 的 时 候 ，Chrome 和 Safari 已 开始 文 持 EventSource， 


Mozilla 也 准备 在 Firefox 4.0 之 后 的 第 一 个 版 本 中 实现 它 。 其 
XMLHttpRequest 实 现在 下 载 过 程 中 会 《为 readyState 3) 触发 


readystatechange 事 件 的 浏览 器 (例如 FireFox) ， 可 以 很 容易 地 使 用 
XMLHttpRequest 模 拟 EventSource。 例 18- 16 展 示 了 如 何 完成 。 配合 这 个 
模拟 模块 ， 例 18-15 就 可 以 工作 在 Chrome、Safari 和 Firefox 下 了 。〔 例 
18-16 在 IE 或 Opera 下 不 可 用 ， 直 到 它们 的 XMLHttpRequest 实 现在 下 载 过 
程 中 能 够 产生 事件 为 止 。 


例 18-16: 用 XMLHttpRequest 模 拟 EventSource 




















// 在 不 支持 EventSource API 的 浏览 器 里 进行 模拟 
// 需 要 有 一 个 XMLHttpRequest 对 象 在 新 数据 写 到 长 期 存在 的 HTTP 连 接 中 时 发 送 readystatechange 事 件 
// 注 意 ， 这 个 API 的 实现 是 不 完整 的 
// 它 不 支持 readyState 属 性 、close( ) 方 法 、open 和 error 事 件 

// 消 息 事 件 也 是 通过 onmessage 属 性 注册 的 一 这 个 版 本 还 没有 定义 add EventListener() 方 法 
if(window.EventSource===undefined){// 如 果 未 定义 EventSource 对 象 
window.EventSource=function(url){// 像 这 样 进行 模拟 

var xhr;//HTTP 连 接 器 

var evtsrc=this;// 在 事件 处 理 程序 中 用 到 
var charsReceived- 0;// 这 样 我 们 就 可 以 知道 什么 是 新 的 
var type=null; // 检 查 属 人 生 响 应 类 型 
var data=""; ; 7/ 存放 消 息 数 据 
Var eventName="message";// 事 牛 对 象 的 类 型 字段 
var lastEventId="";// 用 于 和 服务 器 再 次 司 步 
var retrydelay=1000;// 在 多 个 连接 请 求 之 间 设 置 延迟 
var aborted=false;// 设 置 为 true 表 示 放 弃 连 接 
// 创 建 一 个 XHR 对 象 
xhr=new XMLHttpRequest();// 定 义 一 个 事件 处 理 程序 
xhr.onreadystatechange=function( ){ 
Switch(xhr,readyState){ 

case 3:processData( );break;// 当 数据 块 到 达 时 
case 4:reconnect();break;// 当 请 求 关 闭 的 时 候 
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} 

};// 通 过 connect( ) 创 建 一 个 长 期 存在 的 连接 
connect( ) ;// 如 果 连 接 正常 关闭 ， 等 待 1 秒 钟 再 尝试 连接 
function reconnect(){ 
if(aborted)return;// 在 终止 连接 后 不 进行 重 连 操作 
if(xhr,status>=300)return;// 在 报错 之 后 不 进行 重 连 操作 
setTimeout(connect, retrydelay ) ;// 等 待 1 秒 后 进行 重 连 
};// 这 里 的 代码 展示 了 如 何 建立 一 个 连接 

function connect(){ 

charsReceived=0，; 

type=null; 

xhr.open("GET", ur1); 
xhr.setRequestHeader("Cache-Control", "no-cache"); 
if(lastEventId)xhr.setRequestHeader("Last-Event-ID",JastEventId); 
xhr.send( ); 









































































































































} 

// 每 当 数 据 到 达 的 时 候 ， 会 处 理 并 触发 onmessage 处 理 程序 
// 这 个 函数 处 理 Server -Send Events 协 议 的 细节 
function processData( ){ 
if(!1type){// 如 果 没 有 准备 好 ， 先 检查 响应 类 型 
type=xhr .getResponseHeader('Content-Type'); 























if(type!=="text/event-stream"){ 
aborted=true; 

xhr.abort(); 

return; 





} 

// 记 录 接 收 的 数据 
// 获 得 响应 中 未 处 理 的 数据 
var chunk=xhr.responseText.substring(charsReceived); 
charsReceived=xhr .responseText .length;// 将 大 块 的 文本 数据 分 成 多 行 并 遍历 它们 
var lines=chunk.replace(/(\r\n|\r|\n)$/,"").split(/\r\n|\r|\n/); 
for(var i=0;i<lines.length;i++){ 

var line=lines[i],pos=line.indexOof(":"),name,value="",，; 
if(pos==0)continue;// 忽 略 注 释 

if(pos>9){// 字 段 名 称 : 值 

name=line.substring(0, pos); 

value=line.substring(pos+1); 
if(value.charAt(0)=="")value=value.substring(1); 


























} 

else name=line;// 只 有 字段 名 称 

switch(name){ 

case"event":eventName=value;break; 
case"data":data+=value+"\n";break; 
case"id":]lastEventId=value;break; 
case"retry":retrydelay=parseInt(value)||1000;break; 
default :break;// 忽 略 其 他 行 




















if(1ine===""){// 一 个 空 行 意味 着 发 送 事件 

if(evtsrc.onmessage& &data!==""){// 如 果 末 尾 有 新 行 ， 就 裁剪 新 行 
if(data.charAt(data.length-1)=="\n") 
data=data.substring(0,data.length-1); 
evtsrc.onmessage({// 这 里 是 一 个 伪造 的 事件 对 象 
type:eventName, // 事 件 类 型 
data:data, // 事 件数 据 
origin:url// 数 据 源 
}); 

} 


data=""; 
continue; 
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ccc 





我 们 通过 一 个 服务 器 示例 结束 了 Comet 架 构 的 探讨 。 例 18-17 展 示 了 
一 个 用 服务 堪 端 JavaScript 为 Node 编 写 的 定制 HTTP 服务 器 。 当 一 个 客户 
端 请 求 根 URL“/” 时 ， 它 会 把 例 18-15 里 展示 的 聊天 客户 端 代 码 和 例 18-16 
中 的 模拟 代码 发 送 到 客户 端 。 当 客户 端 创建 了 一 个 指 同 URL"/chat" 的 
GET 请 求 时 ， 它 会 用 一 个 数组 来 保存 啊 应 数据 流 并 保持 连接 处 于 打开 状 
态 。 当 客户 端 发 起 针对 "chat"POST 请 求 时 ， 它 会 将 响应 的 主体 部 分 作为 
-条 聊天 消息 使 用 并 写 入 数据 ， 以 "data:" 作 为 Server-Sent Events 的 前 
级 ， 添 加 到 每 个 已 打开 的 啊 应 数据 流 上 。 如 果 安 装 了 Node， 那 就 可 以 在 
本 地 运行 这 个 服务 器 例子 。 它 监听 8000 端 口 ， 因 此 在 启动 服务 器 之 后 ， 








就 可 以 用 浏览 器 访问 http://localhost:8000 来 进行 聊天 。 


例 18-17: 定制 的 Server-Sent Events 聊 天 服务 器 




















// 这 个 例子 用 的 是 服务 器 的 JavaScript， 运 行 在 NodeJS 平 台 上 

// 该 聊天 室 的 实现 比较 简单 ， 而 且 是 完全 匿名 的 

// 将 新 的 消息 以 POST 发 送 到 /chat 地 址 ， 或 者 以 GET 形 式 从 同一 个 URL 获 取消 息 的 文本 /事件 流 
// 创 建 一 个 GET 请 求 到 "/" 来 返回 一 个 简单 的 HTML 文 件 
// 这 个 文件 包括 客户 端 聊天 UI 
var http=require('http');//NodeJS HTTP 服务 器 API 














































































































// 聊 天 客户 端 使 用 的 HTML 文 件 ， 在 下 面 会 用 到 
var clientui=require('fs').readFileSsync("chatclient.html"); 
Var 


emulation=require('fs').readFileSync("EventSourceEmulation.js");//ServerResponse 对 象 数 


组 ，| 


室 


3 


UI 




















于 接收 发 送 的 事件 
var clients=[];// 每 20 秒 发 送 一 条 注释 到 客户 妆 
// 这 样 它们 就 不 会 关闭 连接 再 重 连 
setIinterval(function(){ 
clients.forEach(function(client){ 
client.write(":ping?n"); 














诽 
































}); 

}, 20000) ; // 创 建 一 个 新 服务 器 

var server=new http.Server();// 当 服务 器 获取 到 一 个 新 的 请 求 ， 运 行 回调 函数 

server .on("request",function(request,response){// 解 析 请 求 的 URL 

var url=require('url').parse(request.url);// 如 果 请 求 是 发 送 到 "/"， 服 务 器 就 发 送 客 户 端 聊天 














if(url.pathname==="/"){// 聊 天 客户 端的 UI 请 求 
response.writeHead(200, {"Content-Type":"text/htm1l"}); 
response.write("<script>"+emulation+"</script>"); 
response.write(clientui); 

response.end( ); 

return; 











} 

// 如 果 请 求 是 发 送 到 "/chat" 之 外 的 地 址 ， 则 返 
else if(url.pathname!=="/chat")t{ 
response .writeHead(404); 
response.end( ); 

return; 


I 








404 























} 

// 如 果 请 求 类 型 是 post， 那 么 就 有 一 个 客户 端 发 送 了 一 条 新 的 消息 
if(request.method==="POST"){ 

request. setEncoding( "utf8"); 

var body="";// 在 获取 到 数据 之 后 ， 将 其 添加 到 请 求 主体 中 
request.on("data", function(chunk){body+=chunk;});// 当 请 求 完 成 时 ， 发 送 一 个 空 响应 
// 并 将 消息 传播 到 所 有 处 于 监听 状态 的 客户 端 中 

request.on("end",function()t{ 

response,writeHead(200) ;// 响 应 该 请 求 

response,end();// 将 消息 转换 成 文本 /事件 流 格式 

// 确 保 每 一 行 的 前 级 都 是 "data:" 

// 并 以 两 个 换行 符 结 束 
message='data: '+body.replace('\n', '\ndata:')+"\rin\r\n";// 发 送 消息 给 所 有 监听 的 客户 端 
clients.forEach(function(client){client.write(message);}); 


}); 











































































































//Otherwise,a client is requesting a stream of messages 
else{// 如 果 不 是 POST 类 型 的 请 求 ， 则 客户 端正 在 请 求 一 组 消息 
response.writeHead(200, {'Content-Type':"text/event-stream"}); 
response.write("data:Connected\n\n");// 如 果 客 户 端 关闭 了 连接 


























// 从 活动 客户 端 数组 中 删除 对 应 的 响应 对 象 
request.connection.on("end",function(){ 
clients.splice(clients.indexof(response),1); 
response.end( ); 

}) ;A/ 记 下 响应 对 象 ， 这 样 就 可 以 向 它 发 送 未 来 的 消息 


clients.push(response); 


















































} 
}) ;// 启 动 服务 器 ， 监 听 8000 端 口 ， 访 问 http://localhost :8000/ 来 进行 使 用 它 
server.listen(8000); 

















[Ajax 是 Asynchronous JavaScript and XML 的 缩写 (未 全 部 大 写 ) 。 这 
个 术语 由 Jesse James Carrett 创 造 ， 最 早出 现在 他 于 2005 年 2 月 发 表 的 文 
章 "Ajax:A New Approach to Web 
Applications" (http:www.adaptivepath.com/publications/essays/archives/000 
经 是 一 个 流行 多 年 的 术语 ， 现 在 它 只 不 过 是 一 个 有 用 的 术语 ， 来 描述 基 
于 用 脚本 操纵 HITP 请 求 的 Web 应 用 架构 。 

[DJComet 这 个 名 字 是 由 Alex Russell 在 "Comet:Low Latency Data for the 
Browser" (http://infrequently.org/2006/03/comet-low-latency-data-for-the- 
browsev) 中 创造 。 这 个 名 字 可 能 是 对 Ajax 开 了 个 玩笑 ，Comet 和 Ajax 都 
是 美国 的 洗涤 日 用 品牌 。 

[BJ] 这 种 类 型 的 图 片 也 称 为 网 页 信 标 《web bug) 。 当 网 页 信 标 不 是 与 当 
前 网 页 服务 器 而 是 其 他 服务 器 交流 信息 时 ， 会 担心 隐私 内 容 。 这 种 第 三 
方 网 页 信和 标的 方式 常用 于 统计 点 击 次 数 和 网 站 流量 分 析 。 

[Bob Ippolito 在 2005 年 提出 了 
JSONP (http://bob.pythonmac.org/archives/2005/12/05/remote-json- 

jsonp/) 。 





第 19 章 jQuery 类 库 


JavaScript 的 核心 API 设 计 得 很 简单 ， 但 由 于 浏览 器 之 间 的 严重 不 兼 
容 性 ， 导 致 客户 端的 API 过 于 复杂 。IE9 的 到 来 ， 绥 解 了 这 种 不 兼容 性 导 
致 的 糟糕 境况 ， 然 而 使 用 JavaScript 框 架 或 工具 类 库 ， 能 简化 通用 操作 ， 
能 隐藏 浏览 器 之 间 的 差异 ， 这 让 很 多 程序 员 在 开发 Web 应 用 时 变 得 更 简 
单 。 撰 写本 书 时 ， 最 流行 和 广泛 采用 的 类 库 之 一 就 是 jQuery 出 。 


jQuery 类 库 如 此 广泛 地 使 用 ， 作 为 Web 开 发 者 ， 我 们 必须 熟悉 它 : 
即便 没有 在 自己 的 代码 中 使 用 它 ， 也 很 有 可 能 在 他 人 写 的 代码 中 遇见 。 
幸运 的 是 ，jQuery 足 够 小 巧 和 稳定 ， 本 书 就 可 以 把 它 讲述 清楚 。 本 章 将 
全 面 介绍 jQuery， 第 四 部 分 还 包括 jQuery 的 快速 参考 。 在 第 四 部 分 ， 
jQuery 方法 没有 设 独 立 词 条 ， 但 jQuery 为 每 个 方法 都 给 出 了 概要 说 明 。 


jQuery 能 让 你 在 文档 中 轻松 找到 关心 的 元 素 ， 并 对 这 些 元 素 进 行 操 
作 : 添加 内 容 、 编 辑 HTML 属 性 和 CSS 属 性 、 定 义 事件 处 理 程序 ， 以 及 
执行 动画 。 它 还 拥有 Ajax 工具 来 动态 发 起 HTTP 请 求 ， 以 及 一 些 通用 的 
工具 函数 来 操作 对 象 和 数组 。 


正如 其 名 ，jQuery 类 库 聚 焦 于 查询 。 一 个 典型 查询 使 用 CSS 选 择 器 
来 识别 一 组 文档 元 素 ， 并 返回 一 个 对 象 来 表示 这 些 元 素 。 返 回 的 对 象 提 
供 了 大 量 有 用 的 方法 来 批量 操作 匹配 的 元 素 。 这 些 方法 会 尽 可 能 返回 调 
用 对 象 本 身 ， 这 使 得 简洁 的 链 式 调用 成 为 可 能 。jQuery 如 此 强大 和 好 
用 ， 关 键 得 益 于 以 下 特性 : 

丰富 强大 的 语法 《CSS 选 择 器 ) ， 用 来 得 询 文档 元 系 

高 效 的 查询 方 法 ， 用 来 找到 与 CSS 选 择 器 匹配 的 文档 元 素 集 

一 僚 有 用 的 方法 ， 用 来 操作 选中 的 元 象 


数 式 编程 技巧 ， 用 来 批量 操作 元 素 集 ， 而 不 是 每 次 只 操 














简洁 的 语言 用 法 〈 链 式 调 用 ) ， 用 来 表示 一 系列 顺序 操作 
本 章 诈 先 会 介绍 如 何 使 用 jQuery 来 实现 简单 查询 并 操作 其 结 末 。 接 





下 来 的 章 市 会 讲解 : 


:如何 设 置 HIML 属 性 、CSS 样 式 和 类 、HTML 表 单 的 值 和 元 素 内 
容 、 位 置 高 宽 ， 以 及 数据 


如何 改变 文档 结构 : 对 元 素 进行 插入 、 蔡 换 、 包 装 和 删除 操作 

-如 何 使 用 jQuery 的 跨 浏 览 器 事件 模型 

如何 用 jQuery 来 实现 动画 视觉 效果 

jQuery 的 Ajax 工具 ， 如 何 用 脚本 来 及 起 HITP 请 求 

jQuery 的 工具 函数 

jQuery 选择 器 的 所 有 语法 ， 以 及 如 何 使 用 jQuery 的 高 级 选择 方法 

-如 何 使 用 和 编写 插件 来 对 jQuery 进行 扩展 

-jQuery UI 类 库 
19.1 jQuery 基础 

jQuery 类 库 定 义 了 一 个 全 局 函数 : jQuery(0)。 该 函数 使 用 频 莹 ， 因 
此 在 类 库 中 还 给 它 定 义 了 一 个 快捷 别名 : $。 这 是 jQuery 在 全 局 命名 空 
间 中 定义 的 唯一 两 个 变量 只。 


这 个 拥有 两 个 名 字 的 全 局 方法 是 jQuery 的 核心 查询 方法 。 例 如 ， 下 
面 的 代码 能 获取 文档 中 的 所 有 二 div 二 元 素 : 


Var divs=$("div"); 





该 方法 返回 的 值 表示 零 个 或 多 个 DOM 元 素 ， 这 就 是 jQuery 对 象 。 注 
意 : jQuery0) 是 工厂 函数 ， 不 是 构造 函数 ， 它 返回 一 个 新 创建 的 对 象 ， 
但 并 没有 和 new 关 键 字 一 起 使 用 。jQuery 对 象 定义 了 很 多 方法 ， 可 以 用 
来 操作 它们 表示 的 这 组 元 素 ， 本 章 中 的 大 部 分 文字 将 用 来 前 释 这 些 方 
法 。 例 如 ， 下 面 这 段 代 码 可 以 用 来 找到 所 有 拥有 details 类 的 p 元 素 ， 将 其 
高 亮 显示 ， 并 将 其 中 隐藏 的 p 元 素 快速 显示 出 来 : 








$("p,details").css("background-color",，"yeJlow") ,show("fast") ，; 





上 面 的 css0) 方 法 操作 的 jQuery 对 象 是 由 $0 返 回 的 ，css0) 方 法 返回 的 
也 是 这 个 对 象 ， 因 此 可 以 继续 调用 show() 方 法 ， 这 就 是 链 式 调用 ， 很 简 
洁 紧 凑 。 在 jQuery 编程 中 ， 链 式 调 用 这 个 习惯 用 语 很 普遍 。 再 举 个 例 
子 ， 下 面 的 代码 可 以 找到 文档 中 拥有 "clicktohide"CSS 类 的 所 有 元 素 ， 并 
给 每 一 个 元 素 都 注册 一 个 事件 处 理 函 数 。 当 用 户 单 击 元 素 时 ， 会 调用 事 
件 处 理 程序 ， 使 得 该 元 素 缓慢 癌 上 收缩 ， 最 终 消失 : 








$(".clicktohide").click(function(){$(this).slideUp("slow");}); 





获取 jQuery 


jQuery 类 库 是 免费 软件 ， 可 以 从 http://jquery.com 下 载 该 软件 。 下 载 
后 ， 像 下 面 这 样 通过 二 script 二 元 素 在 Web 页 面 中 引入 : 





<script src="jquery-1.4.2.min.js">></script> 





文件 名 中 的 "min" 表 示 引 入 的 是 压缩 版 本 的 类 库 ， 己 经 去 除 不 必要 
的 注释 和 空格 ， 变 量 名 等 内 部 标识 符 也 丛 换 成 了 更 短 的 名 字 。 


在 Web 应 用 中 引入 jQuery 的 男 一 个 方式 是 使 用 内 容 分 发 网 络 ， 比 如 
以 下 URL 地 址 : 








http://code.jquery.com/jquery-1.4.2.min.js 
http://ajax.microsoft,.com/ajax/jquery/jquery-1.4.2.min.js 
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 





本 章 讲述 的 是 jQuery ”1.4 版本。 如 果 使 用 的 是 其 他 版 本 ， 在 必要 时 
请 替换 上 面 UREL 中 的 版 本 号 “1.4.22" 辐 。 如 果 使 用 Google CDN， 可 以 
用 “1.4” 来 获取 1.4.x 系 列 中 的 最 新 版 本 ， 或 者 用 “1” 来 获取 版 本 号 小 
于 “2.0” 的 最 新 版 本 。 通 过 上 面 这 些 众所周知 的 URL 来 加 载 jQuery 的 最 大 
好 处 是 ， 因 为 jQuery 很 流行 ， 访 问 你 的 网 站 的 用 户 ， 很 有 可 能 在 访问 其 
己 经 下 载 过 jQuery 类 库 ， 保 存在 浏览 器 缓存 中 ， 无 须 重新 下 
车 5 


19.1.1 jQueryO 函 数 


在 jQuery 类 库 中 ， 最 重要 的 方法 是 jQuery0 方 法 (也 就 是 $0)) 。 它 
的 功能 很 强大 ， 有 4 种 不 同 的 调用 方式 。 


第 一 种 也 是 最 常用 的 调用 方式 是 传递 CSS 选 择 器 《字符 串 ) 给 $0 方 
法 。 当 通过 这 种 方式 调用 时 ，$0 方 法 会 返回 当前 文档 中 匹配 该 选择 器 的 
元 素 集 。jQuery 支 持 大 部 分 CSS3 选 择 器 语法 ， 还 支持 一 些 自己 的 扩展 语 
法 。19.8.1 节 将 详细 阐述 jQuery 选择 器 语法 。 还 可 以 将 一 个 元 素 或 jQuery 
对 象 作 为 第 二 参数 传递 给 $0 方 法 ， 这 时 返回 的 是 该 特定 元 素 或 元 素 集 的 
子 元 素 中 匹配 选择 器 的 部 分 。 这 第 二 参数 是 可 选 的 ， 定 义 了 元 素 查 询 的 
起 始点 ， 经 常 称 为 上 下 文 (context) 。 


第 二 种 调用 方式 是 传递 一 个 Element、Document 或 Window 对 象 给 $() 
方法 。 在 这 种 情况 下 ，$0 方 法 只 须 简 单 地 将 该 Element、Document 或 
Window 对 象 封 装 成 jQuery 对 象 并 返回 。 这 样 可 以 使 得 能 用 jQuery 方法 来 
操作 这 些 元 素 而 不 用 使 用 原生 DOM 方 法 。 例 如 ， 在 jQuery 程序 中 ， 经 和 常 
可 以 看 见 $(document) 或 $(this)。jQuery 对 象 可 以 表示 文档 中 的 多 个 元 
素 ， 也 可 以 传递 一 个 元 素数 组 给 $0 方 法 。 在 这 种 情况 下 ， 返 回 的 jQuery 
对 象 表示 该 数组 中 的 元 素 集 。 


第 三 种 调用 方式 是 传递 HTML 文 本 字符 串 给 $0 方 法 。 在 这 种 调用 方 
式 下 ，jQuery 会 根据 传 入 的 文本 创建 好 HTML 元 素 并 封装 为 jQuery 对 象 
返回 。jQuery 不 会 将 刚 创 建 的 元 素 自 动 插 入 文档 中 ， 可 以 使 用 19.3 节 摘 
述 的 jQuery 方法 来 轻松 地 将 元 素 插入 想 要 的 地 方 。 注 意 : 在 这 种 调用 方 
式 下 ， 不 可 传 入 纯 文本 ， 因 为 jQuery 会 把 纯 文本 当成 CSS 选 择 器 来 解 
析 。 当 使 用 这 种 调用 风格 时 ， 传 递 给 $() 方 法 的 字符 串 必须 至 少 包含 一 个 
带 有 人 尖 角 括号 的 HTML 标 签 。 


通过 第 三 种 方式 调用 时 ，$() 接 受 可 选 的 第 二 参数 。 可 以 传递 

Document 对 象 来 指定 与 所 创建 元 素 相关 联 的 文档 。〔 比 如 ， 当 创建 的 元 
素 需 要 插入 iframe 里 时 ， 需 要 显 式 指定 该 iframe 的 document 对 象 。) 第 二 
参数 还 可 以 是 object 对 象 。 此 时 ， 假 设 该 对 象 的 属性 表示 HTML 属 性 的 
键 / 值 对 ， 这 些 属性 将 设置 到 所 创建 的 对 象 上 。 当 第 二 参数 对 象 的 属性 
名 是 "css"、"html"、"text"、"width"、"height"、"offset"、"val" 或 "data"， 
或 者 属性 名 是 jQuery 事件 处 理 程 序 注册 方法 名 时 ，jQuery 将 调用 新 创建 
元 素 上 的 同名 方法 ， 并 传 入 属性 值 。 (css()、html()、text() 等 方法 将 在 
19.2 市 讲述 ， 事 件 处 理 程序 注册 方法 将 在 19.4 节 讲述 。) 例如 : 

















var img=$("<img/ > 之" // 新 建 一 个 <img> 元 素 
{src:url,// 具 有 HTML 属 性 
css: fborderWidth: 5}, /A/CSS 样 式 
click:handleclick// 和 事件 处 理 程序 
}); 

















最 后 ， 第 4 种 调用 方式 是 传 入 一 个 函数 给 $0 方 法 。 此 时 ， 当 文档 加 
载 完 毕 且 DOM 可 操作 时 ， 传 入 的 函数 将 被 调用 。 这 是 例 13-5 中 onLoad0) 
函数 的 jQuery 版 本 。 在 jQuery 程序 中 ， 在 jQuery0O 里 定义 一 个 匿名 函数 非 
和 和 节 见 : 























jQuery(function(){/V 文 档 加 载 完毕 时 调 ) 
// 所 有 jQuery 代码 放 在 这 里 
}); 























有 时 还 可 以 看 见 $(f) 的 老式 和 完整 写法 : $(document).ready(f)。 


传 给 jQuery0 的 函数 在 被 调用 时 ，this 指 向 document 对 象 ， 唯 一 的 参 
0 函数 。 这 意味 着 可 以 释放 全 局 的 $0 函数 ， 但 在 内 部 依旧 可 
以 延续 该 习惯 : 











jQuery.noConflict();// 还 原 $( ) 为 初始 值 
jQuery(function($){// 让 $( ) 成 为 jQuery 对 象 的 局 部 别名 
//jQuery 代 码 放 在 这 里 
}); 











过 $0 注 册 的 函数 将 在 DOMContentLoaded 事 件 触发 时 由 jQurey 解 
发 。 当 浏览 器 不 支持 该 事件 时 ， 会 在 load 事 件 触 发 时 由 jQurey 触 发 。 这 
意味 着 文档 已 经 解析 完毕 ， 但 图 片 等 外 部 资源 有 可 能 还 未 加 载 。 如 果 在 
ee 函数 给 $0， 传 递 的 函数 会 在 $0 返 回 之 前 立刻 调 


jQuery 类 库 还 使 用 jQuery0 函 数 作为 其 命名 空间 ， 在 下 面 定 义 了 不 
少 工具 函数 和 属性 。 上 面 提 到 过 的 jQuery.noConflictO 就 是 其 中 一 个 工具 
函数 。 还 包括 用 于 通用 遍历 的 jQuery.each0， 以 及 用 来 解析 JSON 文 本 的 
jQuery.parseJSON()。19.7 市 列举 了 这 些 通用 工具 函数 ，jQuery 的 其 他 孙 
数 在 本 章 中 都 会 提 及 。 





jQuery 术语 


在 本 章 中 将 会 遇 到 一 些 重要 的 术语 和 短语 ， 我 们 来 看 一 下 其 定义 : 
“jQuery 函数 ” 


jQuery 函数 是 jQuery 或 $0 的 值 。 该 函数 可 以 用 来 创建 jQuery 对 象 ， 
用 来 注册 DOM 就 绪 时 需要 调用 的 处 理 程序 ， 还 用 做 jQuery 命名 空间 。 我 
通常 用 $() 来 引用 它 。 它 可 以 用 做 命名 空间 ， 因 此 jQuery 函数 也 可 称 
为 “全 局 jQuery 对 象 *， 但 要 注意 干 万 别 把 它 与 Query 对 象 ”混淆 。 


“jQuery 对 象 ” 

jQuery 对 象 是 由 jQuery oe 网 的 对 象 。 一 个 jQuery 对 象 表示 一 组 
文档 元 素 ， 也 叫做 jQuery 结 “jQuery 集 ” 或 “包装 集 ”。 

“ 完 中 元 素 *” 





当 传 递 CSS 选 择 器 给 jQuery 函数 时 ， 它 返回 的 jQuery 对 象 表 示 [ 匹 配 
该 选择 器 的 文档 元 系 集 。 在 摘 述 jQuery 对 象 的 方法 时 ， 我 经 音 会 使 
用 “选中 元 素 ” 这 个 说 法 ， 用 来 指 代 这 些 匹 配 的 元 素 。 例 如 ， 为 了 解释 
attr() 方 法 ， 我 会 用 “attr0 方 法 给 选中 元 素 设 置 HTIML 属 性 ”， 用 来 将 代 更 
精确 但 很 兄长 的 描述 : “attr0 方 法 给 调用 它 时 所 在 的 jQuery 对 象 的 元 素 
2 注意 “选中 ”是 指 CSS 选 择 器 ， 与 用 户 执 行 的 操作 没有 
王 何 关系 。 


“jQuery 函数 ” 


jQuery 函数 指定 义 在 jQuery 命名 空间 中 的 函数 ， 比 如 
jQuery.noConflict0)。jQuery 函 数 也 可 称 为 “静态 方法 ”。 








出) Query 方 法 ;9 


jQuery 方法 大 由 jQuery 函数 返回 的 jQuery 对 象 的 方法 。jQuery 类 库 最 
重要 的 部 分 就 是 它 定义 的 这 些 强 大 的 方法 。 


jQuery 函数 和 jQuery 方法 有 时 很 难 区 分 ， 因 为 有 部 分 函数 和 方法 的 
名 称 是 一 样 的 。 注意 下 面 这 两 行 代 码 的 差异 ; 





























//jQuery 的 each( ) 函数 用 来 
// 对 数组 a 中 的 每 一 个 元 素 都 调用 一 次 函数 f 





















































$.each(a,f);// 调 用 jQuery( ) 函 数 获取 表示 文档 中 所 有 二 a 二 元 素 的 jQuery 对 象 
// 然 后 调用 该 ]Qurey 对 象 的 each( ) 方 法 
// 对 选中 的 每 一 个 元 素 调用 一 次 函数 f 
$("a").each(f); 






































UU 














http://jquery.com 中 的 jQuery 官方 文档 使 用 类 似 $.each 的 命名 来 表示 
jQuery 函数 ， 用 类 似 .each《〈 带 点 号 但 不 带 美 元 符号 ) 的 命名 来 表示 
jQuery 方法 。 在 本 书 中 ， 会 使 用 术语 “函数 "和 “方法 ”来 指 代 。 一 般 情况 
下 ， 根 据 讨论 的 上 下 文 可 以 清晰 地 区 分 开 。 


19.1.2 ”查询 与 查询 结 


传递 CSS 选 择 器 字符 串 给 $0， 它 返回 的 jQuery 对 象 表示 匹配 〈 或 称 
为 “选中 ”) 的 元 素 集 。CSS 选 择 器 在 15.2.5 节 介绍 过 ， 你 可 以 温习 下 
15.2.5 节 中 的 例子 一 一 那里 的 所 有 例子 传递 给 $0 时 都 可 以 正常 工作 。 
jQuery 支持 的 具体 选择 器 语法 会 在 19.8.1 节 详 述 。 本 节 不 会 聚焦 于 那些 
高 级 选择 器 的 细节 ， 而 会 首先 来 看 看 可 以 如 何 处 理 查询 结 


$0 的 返回 值 是 一 个 jQuery 对 象 。jQuery 对 象 是 类 数组 ， 它们 拥有 
length 属 性 和 介 于 0~length-1 之 间 的 数值 属性 。 (请 查看 7.11 节 获取 类 数 
组 对 象 的 更 多 信息 。) 这 意味 着 可 以 用 标准 的 数组 标识 方 括号 来 访问 
jQuery 对 象 的 内 容 : 
































$("body" ) .LIength//=>1: 文 档 只 有 唯一 一 个 body 元 素 
$("body" ) [9]// 等 于 document .body 











如 果 不 想 把 数组 标识 用 在 jQuery 对 象 上 ， 可 以 使 用 size() 方 法 来 蔡 代 
length 必 性， 用 get(0) 方 法 来 蔡 代 方 括号 索引 。 可 以 使 用 toArray0) 方 法 来 将 
jQuery 对 象 转化 为 真实 数组 。 除 了 length 属 性 ，jQuery 对 象 还 有 三 个 挺 有 
趣 的 属性 。selector 属 性 是 创建 jQuery 对 象 时 的 选择 器 字符 串 (如 果 有 的 
话 ) 。context 属 性 是 上 下 文 对 象 ， 是 传递 给 $0 方 法 的 第 二 参数 ， 如 果 没 
有 传递 的 话 ， 默 认 是 Document 对 象 。 最 后 ， 所 有 jQuery 对 象 都 有 一 个 名 
为 jquery 的 属性 ， 检 测 该 属性 是 否 存 在 可 以 简单 快捷 地 将 jQuery 对 象 与 
其 他 关 数 组 对 象 区 分 开 来 。 jquery 属性 值 是 字符 串 形式 的 jQuery 版 本 
和 

















// 获 取 document body 中 的 所 有 <script 之 元 素 
var bodyscripts=$("script",document.body); 
bodyscripts.selector//=>"script" 














bodyscripts.context//=>document.body 
bodyscripts.jquery//=>>"1.4.2" 





$() 与 querySelectorAll0 


$0 函数 与 15.2.5 节 中 描述 的 Document 对 象 的 querySelectorAll(0 方 法 
类 似 : 两 者 都 用 CSS 选 择 器 作为 参数 ， 并 且 返 回 类 数组 对 象 来 存放 匹配 
选择 器 的 的 元 素 。 在 支持 querySelectorAl0 的 浏览 器 中 ，jQuery 实 现 会 
调用 querySelectorAl10 方 法 ， 然 而 ， 在 代码 中 使 用 $O 人 代替 
querySelectorAllO0 依 旧 是 很 好 的 选择 : 


, 0 竺 新 近 的 浏览 器 中 才 实 现 。$0 在 新 、 老 浏览 器 中 
了 能 


jQuery 可 以 通过 手动 实现 选择 ， 以 用 
在 所 有 浏览 器 中 ， 而 不 仅 是 那些 支持 CSS3 的 浏览 器 


.$0 返 回 的 类 数组 对 象 〈jQuery 对 象 ) 比 querySelectorAl0O 返 回 的 类 
数组 对 象 (NodeList) 更 加 有 用 。 


想 要 授 历 jQuery 对 象 中 的 所 有 元 紊 时， 可 以 调用 each() 方 法 来 代 蔡 
for 循 了 each0 方 法 有 点 类 似 ECMAScript ”5(ES5) 中 的 forEach() 数 组 方 
法 。 它 接受 一 个 回调 函数 作为 唯一 参数 ， 然 后 它 对 jQuery 对 象 中 的 每 一 
个 元 素 ( 按 照 在 文档 中 的 顺序 ) 调 用 回调 函数 。 回 调 函 数 作为 匹配 元 素 
的 方法 来 调用 ， 因 此 在 回调 函数 里 this 关 键 字 指 代 Element 对 象 。each() 
方法 还 会 将 过 引 值 和 该 元 素 作 为 第 一 个 和 第 二 个 参数 传递 给 回调 函数 。 
注意 : this 和 第 二 参 数 部 古 原 生 文 介 元 系 ， 而 不 是 jQuery 对 象 ; 如 果 想 
使 用 jQuery 方法 来 操作 该 元 素 ， 需 要 先 用 $0 封 装 它 。 


jQuery 的 e ”ach0 方 法 和 forEach() 有 一 个 显著 区 别 : 如 果 回 调 函 数 在 
任 一 个 元 素 上 返回 false， 遍 历 将 在 该 元 素 后 中 止 ( 这 就 像 在 普通 循环 中 
使 用 break 关 键 字 一 样 ) 。eachO 返 回调 用 上 自身 的 jQuery 对 象 ， 因 此 它 可 
Re 下 面 是 个 例子 (使 用 的 prepend() 方 法 将 在 19.3 节 阐 
述 ) : 























// 给 文档 中 的 div 元 素 标 号 ， 从 开始 一 直到 div#1last (包含 边界 值 ) 
$("div"). each(function(idx){// 找 到 所 有 div 元 素 ， 然后 遍历 它们 
$(this).prepend(idx+":");// 在 每 一 个 元 素 前 面 插入 索引 值 
if(this.id==="last")return false;// 代 到 #1ast 元 素 时 终止 
}); 







































































尽管 each(0) 方 法 很 强大 ， 全 因为 jQuery 方法 通常 隐 式 
过 有 历 匹 配 的 元 素 集 并 操作 它们 。 需要 使用 each0 的 典型 场景 是 需要 用 个 
同 的 方式 来 操作 匹配 的 元 素 。 即 便 如 此 ， 也 不 总 需要 调用 each0， 因 为 
jQuery 的 一 些 方法 允许 传递 回调 函数 。 











在 ES5 数 组 方法 规范 化 前 ，jQuery 类 库 就 已 经 存在 了 。jQuery 定 义 
了 几 个 方法 ， 其 功能 和 ES5 方 法 的 功能 类 似 。jQuery 的 map0O 方 法 和 
Array.prototype.map0 方 法 很 相近 。 它 接受 回调 函数 作为 参数 ， 并 为 
jQuery 对 象 中 的 每 一 个 元 素 都 调用 回调 函数 ， 同 时 将 回调 函数 的 返回 值 
收集 起 来 ， 并 将 这 些 返 回 值 封 冯 成 一 个 新 的 jQuery 对 象 返回 。mapO 调 用 
回调 函数 的 方式 和 each() 方 法 相同 :元素 作为 this 值 和 第 二 参数 传 入 ， 元 
素 的 索引 值 作为 第 一 参数 传 入 。 如 果 回 调 函 数 返 回 null 或 undefined， 访 
值 将 被 忽略 ， 在 本 次 回调 中 不 会 有 任何 新 元 素 添 加 到 新 的 jQuery 对 象 
中 。 如 果 回 调 函 数 返 回 数组 或 类 数组 对 象 (比如 jQuery 对 象 ) ， 将 会 局 
平 化 它 并 将 其 中 的 元 素 一 个 个 添加 到 新 的 jQuery 对 象 中 。 注 意 : 由 map0 
0 但 它 依旧 可 以 像 类 数组 对 象 一 
。 例 如 : 


























// 找 到 所 有 标题 元 素 ， 映 射 到 它们 的 id, 并 转化 为 真实 数组 ， 然 后 排序 
$(":header").map(function(){return this.id;}).toArray().sort(); 



































除了 eachO 和 map0 之 外 ，jQuery 的 男 一 个 基础 方法 是 index()。 该 方 
法 接受 一 个 元 素 作 为 参数 ， 返 回 值 是 该 元 素 在 此 jQuery 对 象 中 的 索引 
值 ， 如 果 找 不 到 的 话 ， 则 返回 -1。 显 然 ， 受 jQuery 的 典型 风格 影响 ， 
index() 方 法 有 多 个 重 载 版 本 。 如 果 传 递 一 人 jQuery 对 象 作为 参数 ， 
index() 方 法 会 对 该 对 象 的 第 一 个 元 素 进行 搜索 。 如 果 传 入 的 是 字符 串 ， 
index() 会 把 它 当 成 CSS 选 择 嚣 ， 并 返回 该 jQuery 对 象 中 匹配 该 选择 器 的 
一 组 元 素 中 第 一 个 元 素 的 索引 值 。 如 果 什 么 参数 都 不 传 入 ，index() 方 法 
返回 该 jQuery 对 象 中 第 一 个 毗 令 元素 的 索引 值 。 











这 里 要 讨论 的 最 后 一 个 通用 的 jQuery 方法 是 is()。 它 接受 一 个 选择 器 
作为 参数 ， 如 果 选 中 元 素 中 至 少 有 一 个 匹配 该 选择 器 时 ， 则 返回 true。 
可 以 在 eachO 回 调 函 数 中 使 用 它 ， 例 如 : 





$("div").each(function(){// 对 于 每 一 个 <div 元 素 
if($(this).is(":hidden"))return;// 跳 过 隐藏 元 素 
// 对 可 见 元 素 做 点 什么 


}); 


19.2 jQuery 的 getter 和 setter 


jQuery 对 象 上 最 简单 、 最 向 见 的 操作 是 获取 (get) 或 设置 (set) 
HTML 属 性 、CSS 样 式 、 元 素 内 容 和 位 置 高 宽 的 值 。 该 节 讲 述 这 些 方 
法 。 首 先 ， 让 我 们 对 jQuery 中 的 getter 和 setter 方 法 有 个 概要 理解 : 


.jQuery 使 用 同一 个 方法 既 当 getter 用 又 做 setter 用 ， 而 不 是 定义 一 对 
方法 。 如 果 传 入 一 个 新 值 给 该 方法 ， 则 它 设置 此 值 ， 如 果 没 指定 值 ， 则 
它 返 回 当 前 值 。 


.用 做 setter 时 ， 这 些 方法 会 给 jQuery 对 象 中 的 每 一 个 元 素 设置 值 ， 
然后 返回 该 jQuery 对 象 以 方便 链 式 调 用 。 


.用 做 getter 时 ， 这 些 方法 只 会 查询 元 素 集中 的 第 一 个 元 素 ， 返 回 单 
个 值 。〔 如 果 要 遍历 所 有 元 素 ， 请 使 用 map()。〉getter 不 会 返回 调用 上 自 
身 的 jQuery 对 象 ， 因 此 它 只 能 出 现在 链 式 调 用 的 末尾 。 


用 做 setter 时 ， 这 些 方法 经 常 接受 对 象 参数 。 在 这 种 情况 下 ， 该 对 
象 的 每 一 个 属性 都 指定 一 个 需要 设置 的 名 / 值 对 。 


用 做 setter 时 ， 这 些 方法 经 党 接 受 函 数 参数 。 在 这 种 情况 下 ， 会 调 
用 该 函数 来 计算 需要 设置 的 值 。 调 用 该 函数 时 的 this 值 是 对 应 的 元 素 ， 
第 一 个 参数 是 该 元 素 的 索引 值 ， 当 前 值 则 作为 第 二 参数 传 入 。 


阅读 本 节 接 下 来 的 内 容 时 ， 请 将 对 getter 和 setter 的 概要 理解 牢记 于 
心 。 下 面 的 每 一 节 会 讲述 jQuery gettersetter 方 法 中 的 一 个 重要 类 别 。 

















19.2.1 获取 和 设置 HTML 属 性 


attr() 方 法 是 jQuery 中 用 于 HTML 属 性 的 gettersetter， 它 符合 上 面 描 
述 的 概要 理解 中 的 每 一 条 。attr(0) 处 理 浏览 器 的 兼容 性 和 一 些 特殊 情况 ， 
还 让 HTML 属 性 名 和 JavaScript 属 性 名 可 以 等 同 使 用 〈 当 二 者 存在 差异 
时 ) 。 例 如 ， 可 以 使 用 "for" 也 可 以 使 用 "htmlFor"， 可 以 使 用 "class" 也 可 
以 使 用 "className"。 一 个 相关 函数 是 removeAttr0， 可 用 来 从 所 有 选中 
元 素 中 移 除 某 个 属性 。 下 面 是 一 些 例 子 : 











$("form").attr("action");// 获 取 第 一 个 form 元 素 的 action 属 性 
$("#icon").attr("src", "icon.gif");// 设 置 src 属 性 
$("#banner").attr({src:"banner.gif",// 一 次 性 设置 4 个 属性 
alt:"Advertisement", 

width:720,height:64}); 

$("a").attr("target","_blank");// 使 所 有 链接 在 新 窗口 中 打开 
$("a").attr("target", function( ){// 使 站 内 链接 在 本 窗 中 打开 ， 让 
if(this.host==location.host)return"_self" 
else return"_blank";// 非 站 内 链接 在 新 窗口 中 打开 


上 er 














































































































}); 
$("a").attr({target:function(){...}});// 可 以 像 这 样 传 入 函数 
$("a").removeAttr("target");// 让 所 有 链接 在 本 窗口 中 打开 


























19.2.2 ”获取 和 设置 CSS 属 性 


css() 方 法 和 attr0 方 法 很 类 似 ， 只 是 css0) 方 法 作用 于 元 素 的 CSS 样 
式 ， 而 不 是 元 素 的 HTML 属性。 在 获取 样式 值 时 ，cssO 返 回 的 是 元 又 的 
当前 样式 《或 称 为 “计算 ” 样 式 ， 参 考 16.4 节 ) : 返回 值 可 能 来 自 style 属 
性 也 可 能 来 自 样 式 表 。 注 意 : 不 能 获取 复合 样式 的 值 ， 比 
如 "font" 或 "margin"。 而 应 该 获取 单个 样式 的 值 ， 比 如 "font- 
weight"、"font-family"、"margin-top" 或 "margin-left"。 在 设置 样式 时 ， 
css() 方 法 会 将 样式 简单 添加 到 该 元 素 的 style 属 性 中 。css0) 方 法 允许 在 
CSS 样 式 名 中 使 用 连 字符 ("background-color") 或 使 用 驼峰 格式 
JavaScript 样 式 名 〈"backgroundColor") 。 在 获取 样式 值 时 ，cssO 会 把 数 
值 转换 成 带 有 单位 后 缀 的 字符 串 返 回 。 而 在 设置 样式 值 时 ， 则 会 将 数值 
转化 成 字符 串 ， 在 必要 时 添加 "px" 像素) 后 级 : 




















上 县. 


$("h1").css("font-weight");// 获 取 第 一 个 <hi>> 的 字体 重量 
$("h1") .css("fontweight");// 也 可 以 采用 驼峰 格式 
$("h1") .css("font" );// 错 误 : 不 可 获取 复合 样式 
$("h1i").css("font-variant",// 将 样式 设置 在 所 有 二 hi 元 素 上 
"smallcaps"); 
$("div.note").css("border",// 设 合 样式 是 OK 的 

"solid black 2px"); 
$("h1").css({backgroundcolor:"black",// 一 次 设置 多 个 样式 


textcolor: "white", /7 也 可 以 用 驼峰 格式 的 名 称 称 [4] 
fontVariant: "small- caps",// 对 象 属性 
padding:"10px 2px 4px 20px", 
border:"dotted black 4px"});// 让 所 有 二 hi 二 > 的 字体 大 小 增加 25% 
$("h1").css("font-size",function(i,curval)t{ 

return Math.round(1.25*parseInt(curval)); 


}); 


由 








































































































19.2.3 ”获取 和 设置 CSS 类 
回忆 一 下 ，class 属 性 值 〈 在 JavaScript 里 通过 className 访 问 ) 会 被 


解析 成 为 一 个 由 空格 分 隅 的 CSS 类 名 列表 。 通 常 ， 我 们 想 要 往 列 表 中 添 
加 、 删 除 某 一 项 ， 或 判断 某 一 项 是 否 在 列表 中 ， 而 不 是 将 该 列表 蔡 换 为 
为 一 个 。 因 此 ，jQuery 定 义 了 一 些 便捷 方法 用 来 操作 class 属 性 。 
addClass() 和 removeClass() 用 来 从 选中 元 素 中 添加 和 删除 类 。 
toggleClass(O 的 用 途 是 ， 当 元 素 还 没有 某 些 类 时 ， 给 元 素 添 加 这 些 类 ; 
反之 ， 则 删除 。hasClassO0 用 来 判断 某 类 是 否 存在 。 下 面 是 一 些 例 子 : 














// 添 加 CSS 类 

$("h1").addclass("hilite");// 给 所 有 hi> 元 素 添加 一 个 类 
$("hit+p").addclass("hilite first");// 给 <hi>> 后 面 的 <p 过 添加 两 个 类 
$("section").addclass(function(n){// 传 递 一 个 函数 用 来 给 匹配 的 
return"section"+n;// 每 一 个 元 素 添加 自 定义 类 
}) ;// 删 除 CSS 类 
$("p").removeClass("hilite");// 从 所 有 二 p 二 元 素 中 删除 一 个 类 
$("p").removeClass("hilite first");// 人 允许 一 次 删除 多 个 类 
$("section").removeClass(function(n){// 从 元 素 中 删除 自 定义 类 
return"section"+n; 

}); 

$("div").removeClass();// 删 除 所 有 二 div 二 中 的 所 有 类 

// 切 换 CSS 类 
$("tr:odd").toggleClass("oddrow");// 如 果 该 类 不 存在 则 添加 
// 如 果 存 在 则 删除 
$("h1").toggleclass("big bold");// 一 次 切换 两 个 类 
$("h1").toggleclass(function(n){// 切 换 用 函数 计算 出 来 的 类 
return"big bold hi-"+n; 

}); 

$("h1").toggleclass("hilite",true);// 作 用 类 似 addClass 
$("h1").toggleclass("hilite",false);// 作 用 类 似 removeClass 
// 检 测 CSS 类 
$("p").hasclass("first")// 是 否 所 有 p 元 素 都 有 该 类 ? 
$("#lead").is(",first")// 功 能 和 上 面 类 似 
$("#lead").is(".first.hilite")//is() 比 hasClass( ) 更 灵活 





















































































































































注意 : hasClass() 不 如 addClass()、removeClass()、toggleClass() 灵 
活 。hasClassO 只 能 接受 单个 类 名 作为 参数 ， 并 且 不 文 持 函数 参数 。 当 选 
中 元 素 中 的 任意 元 素 有 指定 CSS 类 时 ，hasClassO0 返 回 true; 如 果 任 何 元 
素 都 没有 ， 则 返回 false。19.1.2 节 描述 的 is0 方 法 更 灵活 ， 可 用 来 做 同样 
的 事 。 


jQuery 的 这 些 方法 和 16.5 节 讲 的 classList 方 法 类 似 ， 只 是 jQuery 的 方 
法 可 以 工作 在 所 有 浏览 器 中 ， 而 不 仅 仪 是 那些 支持 HTML5 classList 属 性 
的 浏览 器 。 此 外 ， 毫 无 疑问 ，jQuery 的 方法 可 操作 多 个 元 素 并 支持 链 式 
调用 。 


19.2.4 ”获取 和 设置 HTML 表 单 值 














val(0 方 法 用 来 设置 和 获取 HTML 表 单元 素 的 value 属 性 ， 还 可 用 于 获 
取 和 设置 复 选 框 、 单 选 按 钮 以 及 二 select 二 元 素 的 选中 状态 : 





$("#surname").,val()// 获 取 surname 文 本 域 的 值 

$("#usstate").,val()// 从 <=select 中 获取 单一 值 
$("select#extras").val()// 从 select multiple 二 中 获取 一 组 值 
$("input:radio[name=ship] :checked").val()// 获 取 选 中 的 单 选 按 钮 的 值 
$("#email").val("Invalid email address")// 给 文本 域 设 置 值 
$("input:checkbox").val(["opt1", "opt2"] )// 选 中 带 有 这 些 名 字 或 值 的 复 选 框 
$("input:text").val(function(){// 重 置 所 有 文本 域 为 默认 值 

return this.defaultValue; 


}) 
























































19.2.5 ”设置 和 获取 元 素 内 容 


text() 和 html0) 方 法 用 来 获取 和 设置 元 素 的 纯 文本 或 HTML 内 容 。 当 
不 市 参数 调用 时 ，text() 人 返回 所 有 [ 迈 配 元 素 的 所 有 子孙 文本 节点 的 纯 文本 
内 容 。 该 方法 甚至 可 以 工作 在 不 支持 textContent 或 innerText 属 性 (参考 
15.5.2 节 ) 的 浏览 器 中 。 


如 果 不 带 参数 调用 html(0 方 法 ， 它 会 返回 第 一 个 匹配 元 素 的 HTML 
内 容 。jQuery 使 用 innerHTMEL 属 性 来 实现 : x.html0 和 x[0].innerHTML 一 
样 高 效 。 


如 果 传 入 字符 串 给 text0 或 html0， 该 字符 串 会 用 做 该 元 素 的 纯 文 本 
或 格式 化 的 HTML 文 本 内 容 ， 它 会 蔡 换 掉 所 有 存在 的 内 容 。 和 其 他 setter 
OA 我 们 还 可 以 传 入 函数 ， 该 函数 用 来 计算 出 表示 新 内 容 的 字符 














var title=$("head tit1le") .text()// 获 取 文 档 标题 

var headline=$("h1") .html1()V/ 获 取 第 一 个 <h1> 元 素 的 htm1l 
$("h1") .text(function(n,current){f// 给 每 一 个 标题 添加 章节 号 
return"S8"+(n+1L)+"”: "+Current 


}); 











19.2.6 ”获取 和 设置 元 素 的 位 置 高 宽 


在 15.8 节 中 我 们 知道 通过 一 些 技巧 可 以 正确 获取 元 素 的 大 小 和 位 
置 ， 尤 其 当 浏览 器 不 支持 getBoundingClientRect(O) (参考 15.8.2 节 ) 时 。 
使 用 jQuery 方法 可 以 更 简单 地 获取 元 素 的 大 小 和 位 置 ， 并 莱 容 所 有 浏览 
器 。 注 意 : 本 节 摘 述 的 所 有 方法 都 是 getter， 只 有 少 部 分 可 用 做 setter。 


使 用 offset(0) 方 法 可 以 获取 或 设置 元 素 的 位 置 。 访 方法 相对 文档 来 计 
算 位 置 值 ， 返 回 一 个 对 象 ， 带 有 left 和 top 属 性 ， 用 来 表示 X 和 Y 坐 标 。 如 
果 传 入 带 有 这 些 属 性 的 对 象 给 该 方法 ， 它 会 给 元 素 设置 指定 的 位 置 。 在 
有 必要 时 ， 会 设置 CSS 的 position 属 性 来 使 得 元 素 可 定位 : 








var elt=$("#sprite");// 需 要 移动 的 元 素 
var position=elt.offset();// 获 取 当 前 位 置 
position.top+=100;// 改 变 Y 坐 标 

elt .offset(position);// 设 置 新 位 置 

// 将 所 有 二 hi 二 元素 向 右 移 动 ， 移 动 的 距离 取决 于 它们 在 文档 中 的 位 
$("h1") .offset(function(index, curpos ){ 
return{left:curpos.1left+25*index, top:curpos.top}; 


}); 
















































































position() 方 法 很 像 offset() 方 法 ， 但 它 只 能 用 做 getter， 它 返回 的 元 素 
位 置 是 相对 于 其 偏 移 父 元 素 的 ， 而 不 是 相对 于 文档 的 。 在 15.8.5 节 中 ， 
我 们 知道 任何 元 素 都 有 一 个 offsetParent 属 性 ， 其 位 置 是 相对 的 。 定 位 元 
素 总 会 当做 其 子孙 元 素 的 偏 移 父 元 素 ， 但 在 某 些 浏览 器 下 ， 也 会 把 表格 
单元 等 其 他 元 素 当 成 偏 移 父 元 素 。jQuery 只 会 把 定位 元 素 作为 偏 移 父 元 
素 ，jQuery 对 象 的 offsetParent(O) 方 法 则 会 把 每 个 元 素 映射 到 最 近 的 定位 
祖先 元 素 或 <body> 元 素 。 注 意 这 些 方法 的 名 字 并 不 很 恰当 : offsetO 返 
回 元 素 的 绝对 位 置 ， 用 相对 于 文档 的 坐标 来 表示 。 而 position0 则 返回 相 
对 于 元 素 的 offsetParent() 的 偏 移 量 。 


用 于 获取 元 素 宽度 的 getter 有 3 个 ， 获 取 高 度 的 也 有 3 个 。widthO 和 
height() 方 法 返回 基本 的 宽度 和 高 度 ， 不 包含 内 边 距 、 边 框 和 外 边 距 。 
innerWidth() 和 innerHeight() 返 回 元 素 的 宽度 和 高 度 ， 包 含 内 边 距 的 宽度 
和 高 度 〈“ 内 ”表示 这 些 方法 度量 的 是 边框 以 内 的 尺寸 ) 。outerWidth() 和 
outerHeight() 通 常 运 回 的 是 包含 元 素 内 边 距 和 边框 的 尺寸 。 如 果 问 两 个 
方法 中 的 任意 一 个 传 入 true 值 ， 它 们 还 可 以 返回 包含 元 素 外 边 距 的 尺 
寸 。 下 面 的 代码 展现 了 如 何 获 取 一 个 元 素 的 4 种 不 同 宽度 : 























var body=$("body"); 

var contentwidth=body .width( ); 

var paddingwidth=body.innerwidth(); 

var borderwidth=body.outerwidth(); 

var marginwidth=body.outerwidth(true); 

var padding=paddingwidth-contentwidth;// 左 内 边 距 和 右 内 边 距 的 和 
var borders=borderwidth-paddingwidth;// 左 边框 和 右边 框 的 和 

var margins=marginwidth-borderwidth;// 左 外 边 距 和 右 外 边 距 的 和 











widthO 和 height(O 方 法 拥有 其 他 4 个 方法 〈 以 inner 和 outer 开 头 的 方 


法 ) 所 没有 的 特性 。 首 先 ， a 外 一 个 元 素 是 Window 或 
Document 对 象 时 ，width() 和 height() 返 回 的 是 窗口 的 视 口 大 小 或 文档 的 
整体 尺寸 。 其 他 方法 只 适用 于 元 素 ， 不 适用 窗 和 口 和 文档 . 


sie 特 : 隆 是 widthO0 和 height0) 方 法 可 以 是 setter 也 可 以 是 getter。 如 
果 传 递 值 给 这 些 方法 ， 它 们 会 给 jQuery 对 象 中 的 每 一 个 元 素 设 置 宽度 或 
高 度 。 (注意 : 不 能 给 window 和 Document 对 象 设置 宽度 或 高 度 。) 如 
果 传 入 数值 ， 会 把 它 当 成 单位 为 像素 的 尺寸 。 如 果 传 入 字符 串 ， 会 把 名 
用 做 CSS 的 width 和 height 属 性 的 值 ， 因 此 可 以 使 用 任何 CSS 单 位 。 最 
后 ， 和 其 他 setter 类 似 ， 可 以 传 入 函数 ， 用 来 计算 要 设置 的 宽度 或 高 度 。 


在 widthO 和 hei Bt0 的 getter 和 setter 行 为 之 间 有 个 小 的 不 对 称 。 用 做 
getter 时 ， 这 些 方法 返回 元 素 的 内 容 盒子 的 尺寸 ， 不 包括 内 边 距 、 边 框 
和 外 边 距 。 用 做 setter 时 ， 它 们 只 是 简单 设置 CSS 的 width 和 height 属 性 。 
默认 情况 下 ， 这 些 属性 也 指定 内 容 盒 子 的 大 小 。 但 是 ， 如 果 一 个 元 素 的 
CSS box-sizing 属 性 (参考 16.2.3 节 ) 设置 为 border-box， 则 widthO 和 
height0) 方 法 设置 的 尺寸 包括 内 边 距 和 边框 。 对 于 使 用 context-box 作 为 盒 
模型 的 元 素 e， 调 用 $(e).width(x).widthO 返 回 x 值 。 然 而 ， 对 于 使 用 
border-box 模 型 的 元 素 ， 这 种 情况 下 一 般 不 会 返回 x 值 。 


与 位 置 尺 寸 相 关 的 最 后 一 对 jQuery 方法 是 scrollTop() 和 scrollLeft()， 
可 获取 或 设置 元 素 的 滚动 条 位 置 。 这 些 方法 可 用 在 Window 对 象 以 及 
Document 元 素 上 ， 当 用 在 Document 对 象 上 时 ， 会 获取 或 设置 存放 该 
Document 的 Window 对 象 的 滚动 条 位 置 。 与 其 ie 同 ， 不 可 传递 函 
数 给 scrollTop() 或 scrollLeft()。 


可 使 用 scrollTop0O 作 为 getter 和 setter， 与 height(0) 方 法 一 起 ， 来 定义 
个 方法 : 根据 指定 的 页 面 数 向 上 或 向 下 滚动 窗口 : 























// 根 据 页 面 数 n 来 滚动 窗口 。n 可 以 是 分 数 或 负数 
function page(n){ 
var w=$(window);// 将 window 封 装 为 j]Query 对 象 
var pagesize=w.height();// 得 到 页 面 大 小 

var current=w.scrollTop( );// 得 到 当前 深 动 条 位 
WwW.scrollTop(current+n*pagesize);// 设 置 新 的 深 动 条 位 置 
} 






























































19.2.7 ”获取 和 设置 元 素数 据 


jQuery 定义 了 一 个 名 为 data0 的 gettersetter 方 法 ， 可 用 来 设置 或 获取 
与 文档 元 素 、Document 或 Window 对 象 相 关联 的 数据 。 可 以 将 数据 与 任 
意 元 系 关 联 是 很 重要 和 强大 的 一 项 能 力 : 这 是 jQuery 的 事件 处 理 程序 注 
的 基础 ， 有 有 时， 我们 还 会 在 上 自己 的 代码 中 使 用 data0) 
六 让。 


需 将 数据 与 jQuery 对 象 中 的 元 素 关 联 ， 传 递 名 称 和 值 两 个 参数 给 
data(0) 方 法 即 可 。 还 可 以 传递 一 个 对 象 给 data0setter， 此 时 ， 该 对 象 的 每 
一 个 属性 都 将 用 做 名 / 值 对 ， 用 来 与 jQuery 对 象 的 元 素 关 联 。 注 量 ， 传 递 
对 象 给 data0 时 ， 访 对 象 的 属性 将 蔡 换 抒 与 元 素 相 关联 的 旧 数 据 。 与 很 
多 其 他 setter 方 法 不 同 ，data0) 不 接受 函数 参数 。 当 将 函数 作为 第 二 参数 
传递 给 data0 时 ， 访 函数 会 存储 ， 就 和 其 他 值 一 样 。 


当然 ，data0) 方 法 也 可 以 用 做 getter。 当 不 带 参数 调用 时 ， 它 会 返回 
一 个 对 象 ， 含 有 与 jQuery 对 象 中 的 第 一 个 元 素 相 关联 的 所 有 名 / 值 对 。 当 
传 入 一 个 字符 串 参数 调用 data(0) 时 ， 它 会 返回 对 于 第 一 个 元 素 与 该 字符 
串 参 数 相关 联 的 数据 值 。 


removeData() 方 法 用 来 从 元 素 中 删除 数据 。 《使 用 data0 设 置 值 为 
null 或 undefined 和 实际 上 删除 该 值 不 是 同一 回 事 。) 如 果 传 递 字符 串 给 
removeData0， 访 方法 会 删除 元 素 中 与 该 字符 串 相 关联 的 值 。 如 果 不 刘 
参数 调用 removeData()， 它 会 删除 与 元 素 相 关联 的 所 有 数据 。 


























$("div").data("x",1);// 设 置 一 些 数据 
$("div.nodata").removeData("x");// 删 除 一 些 数据 
var x=$('#mydiv' ).data("x");// 获 取 一 些 数据 





























jQuery 还 定义 了 data0 和 removeData() 方 法 的 工具 函数 形式 。 要 给 单 
了 可 以 使 用 data0 的 方法 形式 ， 也 可 以 使 用 其 函数 形 
工 N 3: 














$(e).data(...)// 方 法 形式 
$.data(e, ...)// 函 数 形式 





jQuery 的 数据 框架 没有 将 元 素数 据 当 做 元 素 的 属性 来 存储 ， 但 它 的 
确 需 要 给 元 素 添 加 一 个 特殊 属性 用 来 与 数据 关联 。 由 于 某 些 浏览 器 不 允 
许 添 加 属性 到 二 applet>、 二 object 二 和 二 embed 元 素 中 ， 因 此 jQuery 
根本 不 允许 给 这 些 类 型 的 元 素 关 联 数据 。 


19.3 ”修改 文档 结构 


在 19.2.5 节 中 我 们 知道 html0 和 text0) 方 法 可 用 来 设置 元 素 内 容 。 本 节 
将 讲述 能 对 文档 做 出 更 复杂 修改 的 方法 。HTML 文 档 表示 为 一 棵 节点 
树 ， 而 不 是 一 个 字符 的 线性 序列 ， 因 此 插入 、 删 除 、 替 换 操 作 不 会 像 操 
es 接 下 来 的 内 容 会 阐释 用 于 文档 修改 的 jQuery 
区 


19.3.1 插入 和 蔡 换 元 素 


让 我 们 从 基本 的 插入 和 蔡 换 方法 开始 。 下 面 演示 的 每 一 个 方法 都 接 
受 一 个 参数 ， 用 于 指定 需要 插入 文档 中 的 内 容 。 该 参数 可 以 是 用 于 指定 
新 内 容 的 纯 文 本 或 HIML 字 符 串 ， 也 可 以 是 jQuery 对 象 、 元 素 或 文本 节 
点 。 根 据 调 用 的 方法 不 同 ， 会 在 选中 元 素 的 里 面 、 前 面 或 后 面 位 置 中 插 
入 内 容 。 如 果 待 插入 的 内 容 是 已 存在 于 文档 中 的 元 素 ， 会 从 当前 位 置 移 
走 它 。 如 果 它 需要 插入 多 次 ， 在 必要 时 会 复制 该 元 素 。 这 些 方法 都 返回 
调用 自身 的 jQuery 对 象 。 注 意 ， 在 replaceWith() 运 行 后 ， 该 jQuery 对 象 中 
的 元 素 将 不 再 存在 于 文档 中 : 


























$("#Log") .append("<br/>"+message) ;// 在 #1og 元 素 的 结尾 处 添加 内 容 
$("h1").prepend("$");V/V/ 在 每 个 <h1> 的 起 始 处 添加 章节 标识 
$("h1") ,before("<hr/>");V// 在 每 个 <h1> 的 前 面 添加 水 平 线 






































$("h1") ,after("<hr/>");VV/ 在 每 个 <h1> 的 后 面 添加 水 平 线 

$("hr") .replacewWith("<br/>");V// 蔡 换 <hr/> 元 素 为 <br/> 
$("h2") .each(function(){// 将 <h2> 蔡 换 为 <h1> ,保持 内 容 不 变 

var h2=$(this); 

h2.replacewWith("<=<hi>"+h2.html()+"</hi>"); 

});//after() 和 before( ) 也 可 用 在 文本 节点 上 

// 这 是 给 每 个 <h1> 的 开头 添加 章节 标识 的 另 一 种 方法 

$("h1" ) .map(function(){treturn this.firstchild;}).before("s§"); 

















这 5 个 用 于 结构 修改 的 方法 都 接受 函数 参数 ， 用 来 计算 出 需要 插入 
的 值 。 和 平常 一 样 ， 如 果 传 入 函数 ， 该 函数 会 为 每 个 选中 元 素 调用 一 
次 。this 值 将 指 同 该 元 隶 ， 在 jQuery 对 象 中 元 素 的 索引 值 将 作为 第 一 参 
数 。 对 于 append0、prepend0 和 replaceWithO0， 第 二 参数 将 是 该 元 素 当 前 
内 容 的 HTML 字 答 电 形式。 对 于 before() 和 after()， 该 函数 在 调用 时 没有 
屿 一 人 参 有 并。 


上 面 演 示 的 5 个 方法 都 在 目标 元 系 上 调用 ， 并 传 入 需要 插入 的 内 容 








作为 参数 。 这 5 个 方法 中 的 每 一 个 都 可 以 找到 另 一 个 方法 来 实现 差不多 
一 样 的 功能 ， 只 要 采用 不 同 的 方式 操作 即 可 : 在 内 容 上 调用 ， 并 传 入 目 
标 元 素 作 为 参数 。 下 表 展 示 了 这 些 方法 对 : 





操作 和 (target) ,method(content) $(content).method(target) 
在 目标 元 素 的 结尾 处 插入 内 容 ”append() appendTo( ) 

在 目标 无 素 的 起 始 处 插 和 内容。 prepend() preprendTo() 

在 目标 元 素 的 后 面 插入 内 容 。 “after() insertAfter() 

在 目标 元 素 的 前 面 插入 内 容 。 ”before() insertBefore() 

将 目标 元 素 赫 换 为 内 容 replaceWith() replaceAll() 


在 上 面 的 例子 代码 中 演示 的 方法 在 上 表 第 二 列 中 。 第 三 列 中 的 方法 
会 在 下 面 演示 。 要 理解 这 些 方法 对 ， 有 几 个 重要 事项 : 


如果 传 递 字符 串 给 第 二 列 中 的 方法 ， 会 把 它 当 做 需要 插入 的 HTML 

字符 串 。 如 果 传递 字符 串 会 第 三 列 中 的 方法 ， 会 把 它 当 做 选择 器 ， 用 来 

人 (也 可 以 直接 传 入 jQuery 对 象 、 元 素 或 文本 市 点 来 指明 
目标 元 系 。) 


-第 三 列 中 的 方法 不 接受 函数 参数 ， 第 二 栏 中 的 方法 可 以 。 


.第 二 列 中 的 方法 返回 调用 上 自身 的 jQuery 对 象 。 的 元 
素 有 可 能 有 新 内 容 或 新 兄弟 节点 ， 但 这 些 元 素 目 身 并 没有 修改 。 列 
中 的 方法 在 插入 的 内 容 上 调用 ， 返回 一 个 新 的 jQuery 对 象 ， 到 坟 揪 入 操 
作 后 的 新 内 容 。 特 别 注 意 ， 当 内 容 被 插入 多 个 地 方 时 ， 返 回 的 jQuery 对 
象 将 为 每 一 个 地 方 保留 一 个 元 素 。 


上 面 列举 了 不 同 点 ， 下 面 的 代码 将 实现 与 上 面 的 代码 一 样 的 操作 ， 
使 用 的 是 第 三 列 中 的 方法 来 替代 第 二 列 中 的 。 注 意 在 第 二 行 的 代码 中 不 
能 传 入 纯 文 不 (不 带 任何 过 > 括号 来 标识 它 为 HIML ) 给 $0 方法 一 一 它 
会 被 当做 选择 器 。 因此 ， 必 须 显 式 创建 需要 插入 的 文本 节点 : 





























$("<br/>+message") .appendTo("#1og"); /7V 添 加 htm1 到 #1og 中 
$(document ， createTextNode("s§")).prependTo("h1");// 给 所 有 二 hi 二 添加 文本 节点 
("二 hr/>").insertBefore("h1");// 在 所 有 二 hi 过 前面 插 入 水 平 线 
$("<hr/>").insertAfter("h1");/V 在 所 有 <h1> 后 面 插入 水 平 线 

$("<br/>") ,replaceALL("hr");// 将 <hr/> 蔡 换 为 <br/> 





过 





















































19.3.2 ”复制 元 素 


如 上 上 所 述 ， 如 果 插 入 的 元 素 已经 是 文档 的 一 部 分 ， 这 些 元 素 只 会 简 
单 地 移动 而 不 是 复制 到 新 位 置 。 如 采 元 素 到 插入 不 止 一 个 位 置 ，jQuery 
在 需要 时 会 复制 元 素 ， 但 是 当 只 插入 一 个 位 置 时 ， 是 不 会 进行 复制 操作 
的 。 如 果 想 复制 元 素 到 新 位 置 而 不 是 移动 它 ， 必 须 首 先 用 clone() 方 法 来 
得 到 一 个 副本 。cloneO 创 建 并 返回 每 一 个 选中 元 素 〈 包 含 元 系 所 有 子 
孙 ) 的 一 个 副本 。 返 回 的 jQuery 对 象 的 元 素 还 不 是 文档 的 一 部 分 ， 可 以 
用 上 一 节 中 的 方法 将 其 插入 文档 中 : 

















// 给 文档 结尾 添加 一 个 带 有 "linklist"id 的 新 div 

$(document.body).append("<div id='linklist'>><hi>List of Links</h1> 和 /div 
>") ;// 将 文档 中 的 所 有 链接 复制 并 插入 该 新 div 中 

$("a"),clone().appendTo("#Linklist");V/ 在 每 一 个 链接 后 面 插入 和 br/> 元 素 ， 使 其 以 独立 行 显示 

$("#linklist>a").after("<br/>"); 







































































clone() 不 会 复制 事件 处 理 程序 〈 见 19.4 节 ) 和 与 元 素 关 联 的 其 他 数 
据 〈 见 19.2.7 节 ) 。 如 果 想 复制 这 些 额外 的 数据 ， 请 传 入 true 参 数 。 


19.3.3 ”包装 元 素 


插入 HTML 文 档 的 男 一 种 类 型 涉及 在 一 个 或 多 个 元 素 中 包装 新 元 
素 。jQuery 定 义 了 3 个 包装 函数 。wrap0 包 装 每 一 个 选中 元 素 。 
wrapInner() 包 装 每 一 个 选中 元 素 的 内 容 。wrapAll0 则 将 选中 元 素 作 为 一 
组 来 包装 。 这 些 方法 通常 传 入 一 个 新 创建 的 包装 元 素 或 用 来 创新 包装 元 
素 的 HTML 字 符 串 。 如 果 和 需要， HTML 学 符 串 可 以 包含 多 个 授 僚 元 素 ， 
但 必须 是 单个 最 内 层 的 元 素 。 如 果 传 入 函数 给 这 些 方法 ， 它 会 在 每 个 元 
素 的 上 下 文中 调用 一 次 ，this 指 向 该 元 素 ， 元 素 的 索引 值 是 唯一 参数 ， 
是 
是 些 例子 : 
































// 用 <i 二 元 素 包 装 所 有 二 hi 二 元 素 

$("h1").wrap(document .createElement ("i")); // 产 生 <i><h1> .,..</h1></i>// 包 装 所 有 
雪 h1> 元 素 的 内 容 ， 使 用 字符 串 参数 更 简单 

$("h1"). wrapInner(" <i/ 二 ");// 产 生 <h1i><i>...</i></hi> 

































































ne 个 段落 包装 在 一 个 销 点 和 div 里 

$("body>p:first").wrap("<a name='lead'><div class='first'>></div>></a>>");// 将 
所 有 其 他 段落 包装 在 男 一 个 div 

$("body~>p:not(: first)" ) .wrapAll("<div class='rest'>></div>"); 



































19.3.4 删除 元 素 


除了 插入 和 蔡 换 操作 ，jQuery 还 定义 了 用 来 删除 元 素 的 方法 。 
empty0 会 删除 每 个 选中 元 素 的 所 有 子 节 点 《包括 文本 节点 ) ， 但 不 会 修 
改元 素 自 映 。 对 比 而 言 ，remove() 方 法 会 从 文档 中 移 除 选中 元 素 ( 以 及 
所 有 元 素 的 内 容 〉。 通 常 不 带 参数 调用 remove()， 此 时 会 从 文档 中 移 除 
jQuery 对 象 中 的 所 有 元 素 。 然 而 ， 如 果 传 入 一 个 参数 ， 该 参数 会 被 当成 
选择 器 ，jQuery 对 象 中 只 有 匹配 该 选择 器 的 元 素 才 会 被 移 除 。〈 如 果 只 
想 将 元 素 从 选中 元 素 集中 移 除 ， 而 不 需要 从 文档 中 移 除 时 ， 请 使 用 
filter0) 方 法 ， 该 方法 会 在 19.8.2 节 讲述 。) 注意 ， 将 元 和 际 重 新 插入 文档 
前 ， 移 除 操 作 是 没有 必要 的 : 简单 地 将 其 插入 新 位 置 ， 就 会 移动 它们 。 


remove() 方 法 会 移 除 所 有 事件 处 理 程序 (参考 19.4 节 ) 以 及 可 能 绑 
定 到 被 移 除 元 素 上 的 其 他 数据 (参见 19.2.7 节 ) 。detach() 方 法 和 
remove() 类 似 ， 但 不 会 移 除 事 件 处 理 程序 和 数据 。 想 临时 从 文档 中 移 除 
元 素 以 便 后 续 再 次 插入 时 ，detach0O 可 能 会 更 有 用 。 


最 后 ，unwrap(0) 方 法 可 以 用 来 实现 元 素 的 移 除 ， 其 方式 是 wrap0) 或 
wIapAl10 方 法 的 反 操 作 : 移 除 每 一 个 选中 元 素 的 父 元 素 ， 不 影响 选中 元 
素 及 其 匈 著 届 友 。 也 就 是 说 ， 对 于 每 一 个 选中 元 素 ， 它 蔡 换 该 元 素 的 父 
节点 为 父 节 点 的 子 节点 。 与 remove() 和 detach() 不 同 ，unwrap0O 不 接受 可 
选 的 选择 器 参数 。 


19.4 使 用 jQuery 处 理事 件 


在 第 17 章 我 们 知道 ， 处 理事 件 时 有 一 个 难点 是 正 〈IE9 以 下 ) 实现 
了 一 个 与 所 有 其 他 浏览 器 不 同 的 事件 API。 为 了 解决 这 一 难点 ，jQuery 
定义 了 一 个 统一 事件 API， 可 工作 在 所 有 浏览 器 中 。jQuery ”API 具有 人 简 
单 的 形式 ， 比 标准 或 下 的 事件 API 更 容易 使 用 。jQuery API 还 具有 更 复 
二 功能 更 齐全 的 形式 ， 比 标准 API 更 强大 。 接 下 来 的 章节 会 详细 半 
I。 


19.4.1 事件 处 理 程序 的 简单 注册 


























jQuery 定义 了 简单 的 事件 注册 方法 ， 可 用 于 常用 和 普 适 的 每 一 个 浏 
人 比如 ， 给 单 击 事件 注册 一 个 事件 处 理 程序 ， 只 要 调用 clickgO) 
方 Y 




















// 单 击 任 意 <p 二 时， 使 其 背景 火 包 
$("p").click(function(){$(this).css("background-color", "gray");}); 




















调用 jQuery 的 事件 注册 方法 可 以 给 所 有 选中 元 素 注册 人 处理 程序 。 人 很 
明显 ， 这 比 使 用 addEventListener0) 或 attachEvent0 一 次 注册 一 个 事件 处 理 
程序 简单 很 多 。 


下 面 是 jQuery 定义 的 简单 事件 处 理 程 序 注册 的 方法 : 


blur() focusin() mousedown() mouseup() 
change() focusout() mouseenter() resize() 
click() keydown() mouseleave() scroll() 
dbclick() keypress() mousemove() select() 
error() keyup() mouseout() submit() 
focus() load() mouseover() unload() 


这 些 注册 方法 的 大 部 分 都 用 于 在 第 17 章 已 经 熟悉 的 常见 事件 类 型 。 
下 面 按 顺 序 给 出 一 些 注 意 事 项 。focus 和 blur 事 件 不 支持 冒 泡 ， 但 focusin 
和 focusout 事 件 文 持 ，jQuery 确 保 这 些 事件 在 所 有 浏览 器 下 都 支持 。 相 
反 地 ，mouseover 和 mouseout 事 件 支 持 冒 泡 ， 但 这 经 和 常 不 方便 ， 因 为 很 
难 知道 鼠标 是 从 目 己 感 兴趣 的 元 素 中 移 开 了 ， 还 只 是 从 该 元 素 的 子孙 元 
素 中 移 开 了 。mouseenter 和 mouseleave 是 非 冒 泡 事件 ， 可 以 解决 刚才 的 
问题 。 这 几 个 事件 类 型 最 初 是 由 正 引 入 的 ，jQuery 确 保 它 们 可 在 所 有 浏 
仙 共 下 正确 于 作 5 


resize 和 unload 事 件 类 型 只 在 Window 对 象 中 触发 ， 如 果 想 要 给 这 两 
个 事件 类 型 注册 处 理 程序 ， 应 该 在 $(window) 上 调用 resize() 和 unload0 方 
法 。scrol10 方 法 经 常 也 用 于 $(window) 对 象 上 ， 但 它 也 可 以 用 在 有 滚动 
条 的 任何 元 素 上 〔 比 如 ， 当 CSS 的 overflow 属 性 设置 
为 "scroll" 或 "auto" 时 ) 。load0) 方 法 可 在 $(window) 上 调用 ， 用 来 给 窗口 
注册 加 载 事件 处 理 程 序 ， 但 经 党 更 好 的 选择 是 ， 直 接 将 初始 化 函数 传 给 
19.1.1 节 所 示 的 $0。 当 然 ， 还 可 以 在 ifame 和 图 片上 使 用 load() 方 法 。 注 


























意 ， 用 不 同 的 参数 调用 时 ，load0 还 可 用 于 加 载 新 内 容 〈 通 过 脚本 化 

HTTP) 到 元 素 中 一 一 请 阅读 19.6.1 节 。error0) 方 法 可 用 在 <<img> 元 素 
上 ， 用 来 注册 当 图 片 加 载 失 败 时 调用 的 处 理 程序 。error() 不 应 该 用 于 设 
置 14.6 闻 描述 的 窗口 的 onerror 属 性 。 


除了 这 些 人 简单 的 事件 注册 方法 外 ， 还 有 两 个 特殊 形式 的 方法 ， 有 时 
很 有 用 。hover() 方 法 用 来 给 mouseenter 和 mouseleave 事 件 注 册 处 理 程 
序 。 调 用 hover(f,g) 就 和 调用 mouseenter(f) 然 后 调用 mouseleave(g) 一 样 。 
如 果 仅 传 入 一 个 参数 给 hover0)， 访 参数 函数 会 同时 用 做 enter 和 ]leave 事 件 
的 处 理 程 序 。 


另 一 个 特殊 的 事件 注册 方法 是 toggle0。 该 方法 将 事件 处 理 程序 函数 
绑 定 到 单 击 事件 。 可 指定 两 个 或 多 个 处 理 程序 函数 ， 当 单 击 事件 发 生 
时 ，jQuery 每 次 会 调用 一 个 处 理 程 序 函 数 。 例 如 ， 如 果 调 用 
toggle(f,g,h)， 第 一 次 单 击 事件 触 发 时 ， 会 调用 函数 f{()， 第 二 次 会 调用 
g0， 第 三 次 则 调用 h0， 然 后 调用 f0 来 处 理 第 四 次 单 击 事件 。 小 心 使 用 
toggle(): 我 们 将 在 19.5.1 节 看 到 ， 该 方法 可 用 来 显示 或 隐藏 选中 元 素 
(也 就 是 说 ， 切 换 选 中 元 素 的 可 见 性 ) 。 


在 19.4.4 市 中 ， 我 们 会 学 到 其 他 更 通用 的 方式 来 注册 事件 处 理 程 
I 
法 。 


回忆 下 ， 可 以 传递 HTML 字 符 串 给 $0 方法 来 创建 该 字符 串 所 描述 的 
元 素 ， 还 可 传 入 一 个 对 象 ( 当 做 第 二 个 参数 ) ， 该 对 象 由 属性 组 成 ， 这 
些 属 性 可 设置 到 新 创建 的 元 素 上 。 这 第 二 个 参数 可 以 是 传递 给 attr() 方 法 
的 任意 对 象 。 此 外 ， 如 果 这 些 属性 中 有 任何 一 个 与 上 面 列举 的 事件 注册 
方法 同名 ， 该 属性 值 会 被 当做 处 理 程序 函数 ， 并 注册 为 命名 事件 类 型 的 
处 理 程序 。 例 如 : 











$("<img/>",{ 

src:image_uril, 

alt:image_description, 
className:"translucent_image", 
click:function(){$(this).css("opacity","50%");} 
}); 


19.4.2 jQuery 事件 处 理 程序 





上 面 例子 中 的 事件 处 理 程序 函数 被 当做 是 不 带 参数 以 及 不 返回 值 
的 。 像 这 样 书写 事件 处 理 程序 非常 正常 ， 但 jQuery 调用 每 一 个 事件 处 理 
程序 时 的 确 传 入 了 一 个 或 多 个 参数 ， 并 且 对 处 理 程序 的 返回 值 进 行 了 处 
理 。 需 要 知道 的 最 重要 的 一 件 事情 是 ， 每 个 事件 处 理 程 序 都 传 入 一 个 
jQuery 事件 对 象 作为 第 一 个 参数 。 该 对 象 的 字段 提供 了 与 该 事件 相关 的 
详细 信息 〈 比 如 鼠标 指针 的 坐标 ) 。 标 准 事件 对 象 的 属性 在 第 17 章 描述 
过 。jQuery 模 拟 标准 Event 对 象 ， 即 便 在 不 支持 的 标准 事件 对 象 的 浏览 器 
中 【〈 像 IE8 及 其 以 下 ) ，jQuery 事 件 对 象 在 所 有 浏览 器 上 拥有 一 组 相同 
的 字段 。 这 在 19.4.3 节 会 详细 讲述 。 


通常 ， 调 用 事件 处 理 程序 时 只 带 有 事件 对 象 这 个 唯一 参数 。 如 果 用 
trigger()( 参 见 19.4.6 节 ) 显 式 触 发 事件 ， 可 以 传 入 额外 的 参数 数组 。 这 
样 做 时 ， 这 些 参数 会 在 第 一 个 事件 对 象 参数 之 后 传递 给 事件 处 理 程序 。 


不 管 它们 是 如 何 注册 的 ，jQuery 事 件 处 理 程序 函数 的 返回 值 始终 有 
意义 。 如 果 处 理 程序 返回 false， 与 该 事件 相关 联 的 默认 行为 ， 以 及 该 事 
件 接 来 下 的 冒 泡 都 会 被 取消 。 也 就 是 说 ， 返 回 false 等 同 于 调用 Event 对 
象 的 preventDefault() 和 stopPropagation() 方 法 。 同 样 ， 当 事件 处 理 程序 返 
回 一 个 值 〈( 非 undefined 值 时 ，jQuery 会 将 该 值 存储 在 Event 对 象 的 
result 属 性 中 ， 该 属性 可 以 被 后 续 调 用 的 事件 处 理 程序 访问 。 


19.4.3 jQuery 事件 对 象 


jQuery 通过 定义 目 己 的 Event 对 象 来 隐藏 浏览 器 之 间 的 实现 差异 。 当 
一 个 jQuery 事件 处 理 程 序 被 调用 时 ， 总 会 传 入 一 个 jQuery 事件 对 象 作为 
其 第 一 个 参数 。jQuery 事 件 对 象 主要 以 W3C 标 准 为 基准 ， 同 时 它 也 实现 
了 一 些 实 际 的 事件 标准 。jQuery 会 将 以 下 所 有 字段 从 原生 Event 对 象 中 复 
制 到 jQuery Event 对 象 上 《尽管 对 于 特定 事件 类 型 来 说 ， 有 些 字段 值 为 


Undefined) : 


























altkey ctrlkey newValue screenX 
attrChange currentTarget offsetX screeny 
attrName detail offsetX shiftkey 
bubbles eventPhase originalTarget srcElement 
button fromElement pageX target 
cancelable keyCode pageY toElement 
charCode layerXx prevValue view 

ClientX layerY relatedNode wheelDelta 
clientY metakey relatedTarget which 


除了 这 些 属 性 ，Event 对 象 还 定义 了 以 下 方法 : 


isDefaultPrevented() 
isPropagationStopped() 
isImmediatePropagationStopped() 


preventDefault() 
stopPropagation() 
stopImmediatePropagation() 





这 些 事件 属性 和 方法 中 的 大 部 分 在 第 17 章 介绍 过 ， 并 在 第 四 部 分 的 
ref-Event 中 有 详细 文档 说 明 。 对 于 一 部 分 字段 ，jQuery 做 了 特殊 处 理 ， 
使 其 在 所 有 浏览 右 中 的 行为 一 致 ， 值 得 我 们 留意 : 


metaKey 


如 果 原 生 事件 对 象 没有 metaKey 属 性 ，jQuery 会 使 其 与 ctrliKey 属 性 
的 值 一 样 。 在 Mac OS 中 ，Command 键 设置 meta 键 的 属性 。 


pageX,pageY 

如 采 原 生 事件 对 象 没 有 定义 这 两 个 属性 ， 但 定义 了 鼠标 指针 的 视 口 
坐标 clientX 和 clientY，jQuery 会 计算 出 鼠标 指针 的 文档 坐标 并 把 它们 存 
储 在 pageX 和 pageY 中 。 


target,currentTarget,relatedTarget 


target 属 性 表示 在 其 上 发 生 事 件 的 文档 元 系 。 如 末 原 生 事件 对 象 的 


目标 是 文本 节点 ，jQuery 返 回 的 目标 会 蔡 换 为 包含 该 文本 节点 的 元 素 。 
currentTarget 是 当前 正在 执行 的 事件 处 理 程序 所 注册 的 元 素 ， 与 this 应 该 
始终 一 样 。 


如 有 果 currentTarget 和 target 不 一 样 ， 那 么 正在 处 理 的 事件 是 从 触发 它 
ne 此 时 使 用 is0 方 法 (参见 19.1.2 节 ) 来 检测 target 元 素 
能 会 很 有 用 











if($(event.target).is("a"))return;// 忽 略 在 链接 上 启动 的 事件 





涉及 mouseover 和 mouseout 等 过 渡 事 件 时 ， relatedTarget 表 未 其 他 J 
素 。 例 如 ， 对 于 mouseover 事 件 ，relatedTarget 属 性 指 鼠 标 指针 移 开 的 元 
素 ，target 则 是 鼠标 指针 芒 浮 的 元 素 。 如 果 原 生 事件 对 象 没 有 定义 
relatedTarget 但 定义 了 toElement 和 fromElement， 则 会 从 这 些 属性 中 得 到 
relatedTarget。 


timeStamp 


事件 发 生 时 的 时 间 ， 单 位 是 毫秒 ， 由 Date.getTime() 方 法 返回 。 
字段 是 jQuery 自身 设置 的 ， 可 以 解雇 Firefox 中 一 个 长 期 存在 i 


which 


这 是 一 个 非 标准 事件 属性 ，jQuery 做 了 统一 化 处 理 ， 使 其 可 以 用 来 
利明 在 事件 发 生 期 间 ， 按 下 的 是 哪个 鼠标 按钮 或 键盘 按键 。 对 键盘 事件 
来 说 ， 如 果 原 生 事 件 没 有 定义 which， 但 定义 了 charCode 或 keyCode， 
which 将 被 设置 为 定义 过 的 charCode 或 keyCode。 对 鼠标 事件 来 说 ， 如 果 
which 没 有 定义 但 定义 了 button 必 性， 会 根据 button 的 值 来 设置 which。0 
表示 没有 按钮 按 下 。1 表 示 鼠 标 左 键 按 下 ，2 表 示 鼠 标 中 键 按 下 ，3 表 示 
人 (注意 ， 单 击 鼠 标 右键 时 ， 有 些 浏览 器 不 会 产生 鼠标 事 

。) 


2 jQuery Event 对 象 的 以 下 字段 是 特定 于 jQuery 添加 的 ， 有 了 时 会 
很 有 用 : 


data 


如 果 注 册 事 件 处 理 程 序 时 指定 了 额外 的 数据 (参见 19.4.4 市 ) ， 处 

















理 程序 可 以 用 该 字段 的 值 来 访问 。 
handler 
当前 正和 被 调用 的 事件 处 理 程序 函数 的 引用 。 
result 


该 事件 最 近 调 用 的 处 理 程序 的 返回 值 ， 忽 略 没有 返回 值 的 处 理 程 


originalEvent 
浏览 器 生成 的 原生 事件 对 象 的 引用 。 
19.4.4 ”事件 处 理 程 序 的 高 级 注册 


我 们 已 经 看 到 ，jQuery 定 义 了 相当 多 简单 的 方法 来 注册 事件 处 理 程 
序 。 所 有 这 些 方法 都 是 简单 地 调用 单一 的 、 更 复杂 的 方法 bind0 来 为 命 
名 的 事件 类 型 绑 定 处 理 程序 ， 该 处 理 程序 会 绑 定 到 jQuery 对 象 中 的 每 一 
个 元 素 上 。 直 接 使 用 bind0 可 以 让 我 们 使 用 事件 注册 的 高 级 特性 ， 这 些 
特性 在 较 简单 的 方法 上 是 不 可 用 的 加。 


在 最 简 形式 下 ，bind() 需 要 一 个 事件 类 型 字符 串 作为 其 第 一 个 参 
数 ， 以 及 一 个 事件 处 理 程 序 函 数 作为 其 第 二 个 参数 。 事 件 注册 的 简单 方 
法 使 用 该 形式 的 bind()。 例 如 ， 调 用 $('p"”).dick(f) 等 价 : 








$('p').bind('click', f); 





调用 bind0 时 还 可 以 带 有 三 个 参数 。 在 这 种 形式 下 ， 事 件 类 型 是 第 
一 个 参数 ， 处 理 程 序 函 数 是 第 三 个 参数 。 在 这 两 个 参数 中 间 可 以 传 入 任 
何 值 ，jQuery 会 在 调用 处 理 程序 前 ， 将 指定 的 值 设 置 为 Event 对 象 的 data 
人 
时 很 


bind0 还 有 其 他 高 级 特性 。 如 果 第 一 个 参数 是 由 空格 分 隔 的 事件 类 
型 列表 ， 则 处 理 程序 函数 会 为 每 一 个 命名 的 事件 类 型 注册 。 例 如 ， 调 用 
$('a").hover(f) 〈 人 参见 19.4.1 节 ) 等 同 于 : 


$('a').bind('mouseenter mouseleave',f); 


bindO 的 妨 一 个 重要 特性 是 允 计 为 注册 的 事件 处 理 程序 指 是 售 名 空 
间 。 这 使 得 可 以 定义 处 理 程序 组 ， 能 方便 后 续 触 友 或 凶 载 特定 命名 空间 
下 的 处 理 程序 。 处 理 程序 的 命名 空 = 间 对 于 开发 可 复 用 jQuery 代码 的 关 库 
或 模块 的 程序 员 来 说 特别 有 用 。 事 件 命名 空间 类 似 CSS 的 类 选择 占 。 要 
绑 定 事件 处 理 器 到 命名 空间 中 时 ， 添 加 句点 〈.) 和 命名 空间 名 到 事件 
类 型 字符 串 中 即 可 : 





























// 作 为 nouseover 处 理 程序 在 在 命名 空间 "myMod" 中 把 f 绑 定 到 所 有 元 素 
$('a').bind('mouseover.myMod',f); 





甚至 还 可 以 给 处 理 程序 分 配 多 个 命名 空间 ， 如 下 所 示 : 























// 在 命名 空间 "myMod" 和 "yourMod" 中 作为 nouseout 处 理 程序 绑 定 f 
$('a').bind('mouseout.myMod.yourMod',f); 








bind0 的 最 后 一 个 特性 是 ， 第 一 个 参数 可 以 是 对 象 ， 该 对 象 把 事件 
名 映射 到 处 理 程序 函数 。 再 次 使 用 hover() 方 法 来 举例 ， 调 用 
$('a").hover(f,g) 等 价 于 : 


$('a').bind( {mouseenter:f,mouseleave:g}); 





当 使 用 bindO 的 这 种 形式 时 ， 传 入 对 象 的 属性 名 可 以 是 空格 分 隔 的 
事件 类 型 的 字符 串 ， 也 可 包括 命名 空间 。 如 果 在 第 一 个 对 象 参 数 之 后 还 
指定 了 第 二 个 参数 ， 其 值 会 用 做 每 一 个 事件 绑 定 的 数据 参数 。 


jQuery 还 有 另 一 个 事件 处 理 程序 注册 方法 。 调 用 one0) 方 法 束 和 
bind0 一 样 ， 二 者 的 工作 原理 也 类 似 ， 除 了 在 调用 事件 处 理 程序 之 后 会 
自动 注销 它 。 这 意味 着 ， 和 该 方法 名 字 暗 示 的 一 样 ， 使 用 one0 注 册 的 事 
件 处 理 器 永远 只 会 触发 一 次 。 

使 用 addEventListener()( 参 见 17.2.3 节 〉 可 以 注册 捕获 事件 的 处 理 


程序 ，bind() 和 one() 没 有 该 特性 。IE (IE9 以 下 版 本 ) 不 文 持 捕 获 处 理 程 
序 ，jQuery 不 打算 模拟 该 特性 。 








19.4.5 ”注销 事件 处 理 程序 


用 bind0 《或 任何 更 简单 的 事件 注册 方法 ) 注册 事件 处 理 程序 后 ， 
可 以 使 用 unbind() 来 注销 它 ， 以 避免 在 将 来 的 事件 中 触发 它 。“〈 注 意 ， 
unbindO 只 注销 用 bind0 和 相关 jQuery 方法 注册 的 事件 处 理 程序 。 通 过 
addEventL on 或 下 的 attachEvent0) 方 法 注册 的 处 理 器 不 会 注销 ， 并 且 
不 会 移 除 通过 ondlick 和 和 onmouseover 等 元 素 属 性 定义 的 处 理 程序 。) 不 
带 参 数 时 ，unbind0 会 注销 jQuery 对 象 中 所 有 元 素 的 〈 所 有 事件 类 型 
的 ) 所 有 事件 处 理 程序 : 














$('*'),unbind();// 从 所 有 元 素 中 移 除 所 有 jQuery 事件 处 理 程序 



































种 有 一 个 字符 串 参 数 时 ， 由 该 字符 串 指 明 的 事件 类 型 (可 以 是 多 
个 ， 当 字符 串 含 有 多 个 名 字 时 ) 的 所 有 处 理 程序 会 从 jQuery 对 象 的 所 有 
元 素 中 取消 绑 定 : 


























// 从 所 有 二 a 二 元 素 中 取消 绑 定 所 有 mouseover 和 mouseout 处 理 程 序 
$('a').unbind("mouseover mouseout"); 





























这 是 很 粗 劣 的 方式 ， 不 应 该 在 模块 化 代码 中 使 用 ， 因 为 模块 的 使 用 
者 有 可 能 使 用 其 他 模块 ， 在 其 他 模块 中 有 可 能 在 相同 的 元 系 上 给 相同 的 
事件 类 型 注册 了 其 他 处 理 程序 。 如 果 模 块 使 用 命名 空间 来 注册 事件 处 理 
程序 ， 则 可 以 使 用 unbind0， 传 入 一 个 参数 ， 来 做 到 只 注销 命名 空间 下 
的 处 理 程 序 : 





// 取 消 绑 定 在 "myMod" 命 名 空间 下 的 所 有 mouseover 和 mouseout 处 理 程 序 

$('a').unbind("mouseover.myMod mouseout.myMod");// 取 消 绑 定 在 "myMod" 命 名 空间 下 的 所 有 事 
件 类 型 的 处 理 程序 

$('a' ).unbind(" .myMod");// 取 消 绑 定 同时 在 "ns1" 和 "ns2" 命 名 空间 下 的 单 击 处 理 程序 

$('a').unbind("click.ns1.ns2"); 









































如 果 想 小 心地 只 取消 绑 定 目 己 注册 的 事件 处 理 程序 ， 但 没有 使 用 命 
名 空间 ， 必 须 保留 事 件 处 理 程序 函数 的 一 个 引用 ， 并 使 用 unbindO 币 两 
个 参数 的 版 本 。 在 这 种 形式 下 ， 第 一 个 参数 是 事件 类 型 字符 串 (不 带 命 
名 空间 ) ， 第 二 个 参数 是 处 理 程序 函数 : 





$('#mybutton').unbind('click',myClickHandler ); 





通过 这 种 方式 调用 时 ，unbind() 从 jQuery 对 象 的 所 有 元 素 中 注销 特 
定 类 型 的 指定 事件 处 理 程序 函数 。 注 意 ， 即 便 使 用 有 3 个 参数 的 bind0) 通 
过 额外 的 数据 值 注册 事件 处 理 程序 ， 也 可 以 使 用 有 两 个 参数 的 unbind0) 
事件 来 取消 绑 定 它们 。 


可 以 传递 单一 对 象 参 数 给 unbind0。 在 这 种 情况 下 ，unbind0 会 轮 询 
为 该 对 象 的 每 一 属性 调用 一 次 。 属 性 名 会 用 做 事件 类 型 字符 串 ， 属 性 值 
会 用 做 处 理 程序 函数 : 


$('a').unbind({//Remove Specific mouseover and mouseout handlers 
mouseover :mouseoverHandler, 
mouseout:mouseoutHandler 


}); 





最 后 ， 还 有 一 种 方式 来 调用 unbind()。 如 果 传 递 一 个 jQuery Event 对 
象 给 unbind0， 它 会 取消 绑 定 传 入 事件 的 事件 处 理 程序 。 调 用 unbind(e v) 


等 价 于 unbind(e v.type,ev.handler)。 
19.4.6 ”触发 事件 


当 用 户 使 用 鼠标 、 键 盘 或 触发 其 他 事件 类 型 时 ， 注 册 的 事件 处 理 程 
序 会 自动 调用 。 人 然而， 如果 能 手动 触发 事件 ， 有 时 会 很 有 用 。 手 动 触发 
事件 最 简单 的 方式 是 不 市 参数 调用 事件 注册 的 简单 方法 〈 比 如 click0) 或 
mouseover()) 。 与 很 多 jQuery 方法 可 以 同时 用 做 做 getter 和 setter 一 样 ， 

这 些 事 件 方法 在 带 有 一 个 参数 时 会 注册 事件 处 理 程序 ， 不 带 参 数 调 用 时 
则 会 触发 事件 处 理 程序 。 例 如 : 








$("#my_form").submit();// 就 和 用 户 单 击 提交 按钮 一 样 








上 面 的 submit() 方 法 自己 合成 了 一 个 Event 对 象 ， 并 触发 了 给 submit 
事件 注册 的 所 有 事件 处 理 程序 。 如 果 这 些 事件 处 理 程 序 都 没有 返回 false 
或 调用 Event 对 象 的 preventDefault0， 实 际 上 将 提交 该 表单 。 注 总， 通过 
这 种 方式 手动 调用 时 ， 冒 泡 事件 依旧 会 冒 泡 。 这 意味 着 触发 一 组 选中 元 
系 的 事件 ， 同 时 也 会 触发 这 些 元 素 祖 先 节 点 的 处 理 程序 。 


需要 特别 注意 ，jQuery 的 事件 触发 方法 会 触 上 有 所 有 使 用 jQuery 事件 
注册 方法 注册 的 处 理 程 序 ， 也 会 触发 通过 onsubmit 等 HTML 属性 或 





Element 属 性 定义 的 处 理 程序 。 但 是 ， 不 能 手动 触发 使 用 
addEventListener() 或 attachEvent() 注 册 的 人 《当然 ;在 具 实 事 
件 触 发 时 ， 这 些 处 理 程序 依旧 会 调用 。 


同时 需要 注意 ，jQuery 的 事件 触发 机 制 是 后 
列 。 当 触发 一 个 事件 时 ， 在 调用 的 触发 方法 返回 之 前 ， 1 
立刻 调用 。 如 果 触 发 了 一 个 单 击 事件 ， 被 触发 的 处 理 程序 又 触发 了 一 个 
submit 事 件 ， 所 有 匹配 的 submit 处 理 程 序 会 在 调用 下 一 个 单 击 处 理 器 之 
前 调用 。 


绑 定 和 触发 事件 时 ，submitO 这 种 方法 很 便捷 ， 但 就 如 jQuery 定义 了 
一 个 更 通用 的 bind0 方 法 一 样 ，jQuery 也 定义 了 一 个 更 通用 的 trigger0 方 
法 。 通 常 ， 调 用 trigger0 时 会 传 入 事件 类 型 字符 串 作 为 第 一 个 参数 ， 
trigger() 会 在 jQuery 对 象 中 的 所 有 元 素 上 触发 为 该 类 型 事件 注册 的 所 有 处 
理 程 序 。 因 此 ， 上 面 的 submitO 调 用 等 价 于 : 














$("#my_form").trigger("submit"); 





pam nbina) 1A ` 同 ， 在 传 入 的 字符 串 中 不 能 指定 多 个 事件 











类 型 。 然 而 ， 与 bind0 和 unbindO 一 样 的 是 ， 可 以 指定 事件 命 x 间 来 触 
发 仅 在 该 命名 空间 中 定义 的 处 理 程 序 。 如 果 只 想 触 发 没有 命名 空间 的 事 
件 处 理 程 序 ， 在 事件 关 型 后 洪 加 一 个 感叹 号 和 1 
册 的 处 理 程序 被 认为 是 没有 命名 空间 的 : 

















$("button").trigger("click.ns1");// 触 发 某 个 命名 空间 下 的 单 击 处 理 程序 
$("button").trigger("click!");// 触 发 没有 命名 空间 的 单 击 处 理 程序 


























除了 给 trigger0 传 入 事件 类 型 字符 串 作 为 第 一 个 参数 ， 还 可 以 传 入 
Event 对 象 ( 或 任何 有 type 属 性 的 对 象 )。type 属 性 会 用 来 判断 触发 什么 
类 型 的 处 理 程序 。 如 果 传 入 的 是 jQuery 事件 对 象 ， 该 对 象 会 传递 给 触发 
的 处 理 程序 。 如 果 传 入 的 是 普通 对 象 ， 会 创建 一 个 新 的 jQuery Event 对 
象 ， 普 通 对 象 的 属性 会 添加 到 新 对 象 中 。 这 样 ， 可 以 很 容易 传递 额外 数 
据 给 事件 处 理 程序 : 














//buttoni1 的 单 击 处 理 程序 触发 button2 上 的 相同 事件 
































$('#button1' ).click(function(e){$('#button2' ).trigger(e);});// 触 发 事件 时 ， 添 加 额外 的 
属性 给 事件 对 象 
$('#button1i' ).trigger({type:'click',synthetic:true});// 该 处 理 程序 检测 额外 属性 来 区 分 是 

















真实 事件 还 是 虚假 事件 
$('#button1i').click(function(e){if(e.synthetic){...};}); 























给 事件 处 理 程序 传递 额外 数据 的 另 一 种 方式 是 ， 在 手动 触 上 友 事 件 
时 ， 给 trigger0 传 入 第 二 个 参数 。 给 trigger0 传 入 的 第 二 个 参数 会 成 为 每 
个 触发 的 事件 处 理 程序 的 第 二 个 参数 。 如 果 传 入 数组 作为 第 二 个 参数 ， 
数组 的 每 一 项 会 作为 独立 参数 传递 给 触发 的 处 理 程序 : 





$('#buttoni' ).trigger("click",true);// 传 入 单一 额外 参数 
$('#button1' ).trigger("click", [x,y,z]);// 传 入 三 个 额外 参数 





有 时 ， 会 想 触 发 给 定 事件 类 型 的 所 有 处 理 程 序 ， 而 不 管 这 些 处 理 程 
序 是 绑 定 到 什么 文档 元 素 上 的 。 这 时 可 以 使 用 $(*") 来 选中 所 有 元 素 ， 然 
后 对 结果 调用 trigger()， 可 是 这 样 做 非常 低 效 。 更 好 的 方式 是 ， 使 用 
jQuery.event.triggerO0 工 具 函 数 ， 来 全 局 触发 事件 。 该 函数 接受 的 参数 和 
trigger() 方 法 一 样 ， 但 在 整个 文档 中 触发 指定 事件 类 型 的 事件 处 理 程序 
时 更 高 效 。 注 意 ， 以 这 种 方式 触发 的 “全 局 事件 ”不 会 冒 泡 ， 并 且 只 会 触 
发 使 用 jQuery 方法 注册 的 处 理 程序 (不 包括 用 onclick 等 DOM 属 性 注册 的 
事件 处 理 程序 ) 。 


trigger0 〈 及 调用 它 的 便捷 方法 ) 在 调用 事件 处 理 程序 后 ， 会 执行 
与 触发 事件 相关 联 的 默认 操作 假设 事件 处 理 程序 没有 返回 false 或 调用 
事件 对 象 的 preventDefault0) 。 例 如 ， 和 触发 一 个 <form> 元 素 的 submit 
事件 时 ，trigger() 会 调用 该 表单 的 submit0 方 法 ， 如 果 触 发 一 个 元 素 的 
focus 事 件 ，trigger() 会 调用 该 元 素 的 focus() 方 法 。 


如 有 果 想 调用 事件 处 理 程序 ， 但 不 执行 默认 操作 ， 可 以 使 用 
triggerHandler() 蔡 代 trigger()。 该 方法 和 trigger0 类 似 ， ， 除 了 首 9 用 
Event 对 象 的 preventDefault() 和 cancelBubble() 方 法 。 这 意味 着 通过 
a 触发 的 事件 不 会 冒 泡 ， 也 不 会 执行 相关 联 的 默认 操 




















19.4.7 自 定 义 事件 


jQuery 的 事件 管理 体系 是 为 标准 事件 设计 的 ， 比 如 Web 浏 览 吉 产 生 
的 鼠标 单 击 和 按键 按 下 。 但 是 ，jQuery 不 限于 这 些 事件 ， 你 可 以 使 用 任 
何 想 用 的 字符 串 来 作为 事件 类 型 名 称 。 使 用 bind0 可 以 注册 这 种 “ 目 定 义 
事件 ”的 处 理 程序 ， 使 用 triggerO 可 以 调用 这 些 处 理 程序 。 





对 于 书写 模块 化 代码 ， 实 现 发 布 /订阅 模型 或 观察 者 模式 时 ， 这 种 
自 定义 事件 处 理 程序 的 间接 调用 被 证 明 是 非常 有 用 的 。 使 用 自 定 义 事件 
时 ， 通 常 你 会 友 现 ， 使 用 jQuery.event.trigger0 函 数 蔡 代 trigger0 方 法 ， 来 
全 局 触发 处 理 器 会 更 有 用 : 
































// 用 户 单 击 "1ogoff" 按 钮 时 ， 广 播 一 个 自 定 义 事件 
// 给 任何 需要 保存 状态 的 感 兴趣 的 观察 者 ， 然 后 
// 导 航 到 Logoff 页 面 
$("#1logoff").click(function(){ 
$.event.trigger("logoff");// 广 播 一 个 事件 
window.location="logoff.php";// 导 航 到 新 页 面 
}); 
































在 19.6.4 节 我 们 将 看 到 jQuery 的 Ajax 方法 会 像 上 面 这 样 广播 自 定义 
事件 ， 以 通知 感 兴 趣 的 监听 器 。 


19.4.8 ”实时 事件 


bind0) 方 法 绑 定 事件 处 理 程序 到 指定 文档 元 素 ， 就 与 
addEventListner0 和 attachEventO 〈 人 参见 第 17 章 ) 一 样 。 但 是 ， 使 用 
jQuery 的 Web 应 用 经 名 动态 创建 新 元 素 。 如 宁 使 用 bind0 给 文档 中 的 所 有 
二 a 元 素 绑 定 了 事件 处 理 程 序 ， 接 着 义 创建 了 带 有 a 过 元素 的 新 文档 
内 容 ， 这 些 新 元 素 和 老 元 素 不 会 拥有 相同 的 事件 处 理 程序 ， 其 行为 将 不 





jQuery 使 用 “实时 事件 ”来 解决 这 一 问题 。 要 使 用 实时 事件 ， 需 要 使 
用 delegate0 和 undelegate() 方 法 来 蔡 代 bind0 和 unbind0。 通 常 ， 在 
$(document) 上 调用 delegate()， 并 传 入 一 个 jQuery 选择 器 字符 串 、 一 个 
jQuery 事件 类 型 字符 串 以 及 一 个 jQuery 事件 处 理 程序 函数 。 它 会 在 
document 或 window 上 《或 jQuery 对 象 中 的 任何 元 素 上 ) 注册 一 个 内 部 处 
理 程序 。 当 指定 类 型 的 事件 冒 泡 到 该 内 部 处 理 程序 时 ， 它 会 判断 事件 目 
标 《〈《 该 事件 所 发 生 在 的 元 素 ) 是 否 匹 配 选择 器 字符 串 。 如 果 匹 配 ， 则 调 
用 指定 的 处 理 程序 函数 。 因 此 ， 为 了 同时 处 理 老 的 和 新 创建 的 入 a> 元 
素 上 的 mouseover 事 件 ， 可 能 需要 像 下 面 这 样 注册 处 理 程序 : 











$(document).delegate("a", "mouseover",1linkHandler); 





否则 ， 需 要 使 用 bind() 来 处 理 文档 中 的 静态 部 分 ， 然 后 使 用 
delegate() 来 处 理 动 态 修 改 的 部 分 : 








// 静 态 链 接 的 静态 事件 处 理 程序 
$("a").bind("mouseover",1inkHandler );// 文 档 中 动态 更 新 的 部 分 使 用 实时 事件 处 理 程序 
$(".dynamic").delegate("a","mouseover",1linkHandler); 






































与 bind( 方 法 拥有 三 参数 版 本 来 指定 事件 对 象 的 data 属 性 一 样 ， 
delegate() 方 法 拥有 4 参数 版 本 用 来 干 同样 的 事 。 使 用 这 种 版 本 时 ， 将 数 
据 值 作为 第 三 参数 传 入 ， 处 理 程序 函数 则 作为 第 4 参数 。 


理解 这 点 很 重要 : 实时 事件 依赖 于 事件 冒 泡 。 当 事件 冒 泡 到 
document 对 象 时 ， 它 有 可 能 已 经 传递 给 了 很 多 静态 事件 处 理 程 序 。 如 果 
这 些 处 理 程 序 中 有 任何 一 个 调用 了 Event 对 象 的 cancelBubble() 方 法 ， 实 
时 事件 处 理 程序 将 永远 不 会 调用 。 


jQuery 定义 了 一 个 名 为 live() 的 方法 ， 也 可 以 用 来 注册 实时 事件 。 
live() 比 delegate() 更 难 理解 一 点 ， 但 与 bind() 一 样 ，live() 也 有 两 参数 和 三 
参数 的 调用 形式 ， 并 且 在 实际 中 用 得 更 普 裔 。 上 和 面 对 delegate() 的 两 个 调 











$("a").1live("mouseover",1inkHandler ); 
$("a",$(".dynamic")).1live("mouseover",1linkHandler); 





在 jQuery 对 象 上 调用 live0) 方 法 时 ， 该 对 象 中 的 元 素 实际 上 并 没有 使 
用 。 真 正 有 关系 的 是 用 来 创建 jQuery 对 象 的 选择 器 字符 串 和 上 下 文 对 象 
(传递 给 $0 的 第 一 个 和 第 二 个 参数 ) 。jQuery 对 象 通过 context 和 selector 
属性 来 使 得 这 些 值 可 用 (参见 19.1.2 节 ) 。 通 常 ， 仅 带 一 个 参数 调用 $0) 
人 因此 ， 对 于 jQuery 对 象 x， 下 面 两 行 代 码 做 的 
情 是 一 样 的 : 








x.live(type,handler); 
$(x.context).delegate(x.selector, type, handler); 


要 注销 实时 事件 处 理 程序 ， 使 用 die0 或 undelegate0。 可 以 带 一 个 或 
两 个 参数 调用 die0。 带 有 一 个 事件 类 型 参数 时 ，die0 会 移 除 匹配 选择 丹 
和 事件 类 型 的 所 有 实时 事件 处 理 程序 。 带 有 事件 类 型 和 处 理 程序 函数 参 
数 时 ， 它 只 会 移 除 挥 指定 的 处 理 程序 。 一 些 例子 : 





























$('a').die('mouseover ' );// 移 除 <a> 元 素 上 mouseover 事 件 的 所 有 实时 处 理 程序 
$('a').die('mouseover',linkHandler );// 只 移 除 一 个 指定 的 实时 处 理 程序 














undelegate() 类 似 die()， 但 更 显 式 地 分 开 context (内 部 事件 处 理 程序 
0 








$(document ) .undelegate('a' );// 移 除 生 a> 元 素 上 的 所 有 实时 处 理 程序 
$(document ) ,undelegate('a'，'mouseover ' );// 移 除 mouseover 的 实时 处 理 程序 
$(document).undelegate('a', 'mouseover',linkHandler);// 移 除 指定 处 理 程 序 




















最 后 ，undelegate() 也 不 带 任 何 参 数 调 用 。 在 这 种 情况 下 ， 它 会 注销 
从 选中 元 素 委 托 的 所 有 实时 事件 处 理 程序 。 


19.5 动画 效果 


第 16 章 展示 了 如 何 通 过 脚本 来 修改 文档 元 素 的 CSS 样 式 。 例 如 ， 通 
过 设置 CSS 的 visibility 属 性 ， 可 以 显示 和 隐藏 元 素 。16.3.1 节 进一步 演示 
了 如 何 通过 脚本 控制 CSS 来 产生 动画 视觉 效果 。 例 如 ， 除 了 仅 让 一 个 元 
素 消 失 ， 还 可 以 在 半 秒 的 时 间 内 逐步 减少 opacity 属 性 的 值 ， 使 其 快速 淡 
出 ， 而 不 是 瞬间 消失 。 这 些 动 画 视 觉 效 果 能 给 用 户 带 来 更 愉悦 的 体验 ， 
jQuery 使 其 实现 起 来 更 简单 。 


jQuery 定义 了 fadeIn() 和 fadeOut() 等 简单 方法 来 实现 常见 视觉 效果 。 
除了 简单 动画 方法 ，jQuery 还 定义 了 一 个 animate() 方 法 ， 用 来 实现 更 复 
杂 的 自 定义 动画 。 下 面 将 讲述 这 些 简单 动画 方法 ， 以 及 更 通用 的 
animate() 方 法 。 首 先 ， 让 我 们 了 解 下 jQuery 动画 框架 的 一 些 通 用 特性 。 


每 段 动画 都 有 时 长 ， 用 来 指定 动画 效果 持续 多 长 时 间 。 可 以 使 用 宣 
秒 数值 或 字符 串 来 指定 时 长 。 字 符 串 "fast" 表 示 200ms。 字 符 串 "slow" 表 
示 600ms。 如 果 指 定 的 字符 串 时 长 jQuery 无 法 识别 ， 则 采用 默认 时 长 
400ms。 可 以 给 jQuery.fx.speeds 添 加 新 的 字符 串 到 数值 映射 关系 来 定义 
新 的 时 长 名 字 : 














jQuery .fx.speeds["medium-fast"]=300; 
jQuery .fx.speeds["medium-slow"]=500; 





jQuery 动画 方法 经 常 使 用 动画 时 长 来 作为 可 选 的 第 一 个 参数 。 如 果 


省 略 时 长 参数 ， 通 常会 得 到 默认 值 400ms。 注 意 ， 省 略 时 长 时 ， 有 部 分 
方法 会 立刻 跳 到 最 后 一 帧 ， 没 有 中 间 的 动画 效果 : 





$("#message" ) ,fadeIn();// 用 淡 入 效果 显示 元 素 ， 持 续 400ms 
$("#message").fadeout("fast");// 用 淡出 效果 隐藏 元 素 ， 持 续 200ms 


共用 动画 


在 很 多 网 站 上 ， 动 画 视觉 效果 已 经 成 为 标 配 ， 但 是 ， 并 不 是 所 有 用 
户 都 喜欢 : 有 些 用 户 党 得 动画 分 散 注意 力 ， 有 些 则 感觉 动画 导致 操作 不 
便 。 残 障 用 户 可 能 会 发 现 动画 会 妨碍 屏幕 阅读 占 等 辅助 软件 正常 工作 ， 
老 旧 硬件 上 的 用 户 则 会 感觉 动画 会 耗费 很 多 CPU 时 间 。 为 了 对 用 户 保持 
尊重 ， 我 们 通常 应 该 让 动画 简单 朴素 ， 并 提供 一 个 选项 可 以 彻底 禁用 动 
画 。 使 用 jQuery 可 以 非常 简单 地 全 局 禁用 所 有 动画 : 简单 地 设置 
jQuery.fx.off 为 true 就 好 。 该 设置 会 将 每 段 动 画 的 时 长 都 变 成 Ooms， 这 样 
动画 看 起 来 就 像 是 没有 动画 效果 的 立刻 切换 了 。 


为 了 让 最 终 用 户 可 以 禁用 动画 ， 可 以 在 脚本 上 使 用 如 下 代码 : 






































$(".stopmoving").click(function(){jQuery.fx.off=true;}); 





这 样 ， 当 网 页 设计 者 在 页 面 中 加 入 带 有 "stopmoving" 类 的 元 系 时 ， 
用 户 就 可 以 单 击 该 元 系 来 茶 用 动画 。 


jQuery 动画 是 异步 的 。 调 用 fadeIn() 等 动画 方法 时 ， 它 会 立刻 返回 ， 
动画 则 在 “后 台 ” 执 行 。 由 于 动画 方法 会 在 动画 完成 之 前 返回 ， 因 此 可 以 
同 很 多 jQuery 动画 方法 传 入 第 二 个 参数 (也 是 可 选 的 ) ， 该 参数 是 一 个 
函数 ， 会 在 动画 完成 时 调用 。 该 函数 在 调用 时 不 会 有 任何 参数 传 入 ， 但 
this 值 会 设置 为 发 生动 画 的 文档 元 素 。 对 于 每 个 选中 元 素 都 会 调用 一 次 
该 回调 函数 : 





















































// 用 淡 入 效果 快速 显示 元 素 ， 动 画 完 成 时 ， 在 元 素 里 显示 一 些 文字 
$("#message").fadeIin("fast",function(){$(this).text("Hello World");}); 














给 动画 方法 传 入 回调 函数 ， 可 以 在 动画 结束 时 执行 操作 。 不 过 ， 如 
果 只 是 想 顺 序 执行 多 段 动 画 的 话 ， 回 调 方式 是 没有 必要 的 。jQuery 动 画 
默认 是 队列 化 的 〈19.5.2 节 下 面 的 “2. 动 画 选项 对 象 ”* 节 会 讲述 如 何 履 盖 默 





认 方式 ) 。 如 果 一 个 元 和 聚 已 经 在 动画 过 程 中 ， 再 调用 一 个 动画 方法 时 ， 
新 动 国 不 会 立刻 执行 ， 而 会 延迟 到 当前 动画 结束 后 才 执 行 。 例 如 ， 可 以 
让 一 个 元 素 在 持久 显示 前 ， 先 闪烁 一 阵 : 





$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn( ); 





jQuery 动画 方法 可 以 接受 可 选 的 时 长 和 回调 参数 。 还 可 以 传 入 一 个 
对 象 来 调用 动画 方法 ， 该 对 象 的 属性 指定 动画 选项 : 














// 将 时 长 和 回调 参数 作为 对 象 属性 而 不 是 参数 传 入 
$("#message" ) .fadeIn({ 

duration:"fast", 
complete:function(){$(this).text("Hello world");} 
}); 














使 用 通用 的 animate(0) 方 法 时 ， 经 常 传 入 选项 对 象 作为 参数 ， 其 实 ， 
这 也 可 以 用 于 更 简单 的 动画 方法 。 使 用 选项 对 象 可 以 设置 高 级 选项 ， 比 
如 控制 动画 的 队列 和 缓 动 。19.5.2 节 下 面 的 “2. 动 画 选 项 对 象 ” 节 会 讲述 可 
用 的 选项 。 
19.5.1 ”简单 动画 

jQuery 定义 了 9 个 简单 的 动画 方法 用 来 隐藏 和 显示 元 素 。 根 据 实 现 
的 动画 类 型 ， 它 们 可 以 分 为 三 组 : 


fadeIn()、fadeOut()、fadeTo() 





这 是 最 简单 的 动画 : fadeIn0 和 fadeOutO 简 单 地 改变 CSS 的 opacity 属 
性 来 显示 或 隐藏 元 素 。 两 者 都 接受 可 选 的 时 长 和 回调 参数 。fadeTo() 稍 
有 不 同 : 它 需 要 传 入 一 个 opacity 上 日 标 值 ，fadeToO 会 将 元 素 的 当前 
opacity 值 变化 到 目标 值 。 调 用 fadeTo0) 方 法 时 ， 第 一 参数 必须 是 时 长 
ie 0 6 
广 参 妈 。 














show()、hide()、togglel() 


上 面 的 fadeOutO 方 法 可 以 让 元 素 不 可 见 ， 但 依旧 保留 了 元 素 在 文档 
布局 中 的 占 位 。hide0 方 法 则 会 将 元 素 从 布局 中 移 除 ， 就 好 像 把 CSS 的 








display 属 性 设置 为 none 一 样 。 当 不 带 参 数 调用 时 ，hide() 和 show0 方 法 只 
是 简单 地 立刻 隐 着 或 显示 选中 元 素 。 带 有 时 长 〈 或 选项 对 象 ) 参数 时 ， 
它们 会 让 隐藏 或 显示 有 个 动画 过 程 。 se hh yh 
时 ， 同 时 它 还 会 将 元 素 的 宽度 和 高 度 收缩 到 0.show0O 则 进行 反 回 操作 。 


toggle0 可 以 改变 在 上 面 调 用 它 的 元 素 的 可 视 状 态 : 如 果 隐 藏 ， 则 调 
用 show(); 如 果 显 示 ， 则 调用 hide()。 与 show() 和 hide() 一 样 ， 必 须 传 入 
时 长 或 选项 对 象 给 toggle() 来 产生 动画 效果 。 给 toggle() 传 入 true 和 不 带 参 
数 调用 showO 征 一 样 的 ， 传 入 false 则 和 不 市 参数 调用 hide0 是 一 样 的 。 注 
意 ， 如 果 传 入 两 个 或 多 个 函数 参数 给 toggle0， 它 会 注册 为 事件 处 理 程 
序 ， 这 在 19.4.1 节 讲述 过 











slideDown()、slideUp()、slideToggle() 


slideUp0O 会 隐藏 jQuery 对 象 中 的 元 素 ， 方 式 是 将 其 高 度 动 态 变 化 到 
0， 然 后 设置 CSS 的 display 属 性 为 "none"。slideDown() 执 行 反 向 操作 ， 来 
使 得 隐藏 的 元 素 再 次 可 见 。slideToggle() 使 用 向 上 滑动 或 向 下 滑动 动画 
来 切换 元 素 的 可 见 性 。 这 三 个 方法 都 接受 可 选 的 时 长 和 回调 参数 (或 选 
项 对 象 参数 ) 。 


下 面 是 一 个 例子 ， 它 调用 了 该 组 方法 中 的 每 一 个 。 要 记得 jQuery 动 
画 默 认 情 况 下 是 队列 化 的 ， 因 此 这 些 动画 会 一 个 接 一 个 执行 


















































// 用 淡出 效果 将 所 有 图 像 隐 藏 ， 然 后 显示 它们 ， 接 着 向 上 滑动 ， 再 向 下 滑动 
$("img").fadeOut().show(300).slideUp(). slideTeggle()， 






































各 种 jQuery 插件 “参见 19.9 节 ) 会 添加 额外 的 动画 方法 到 jQuery 类 
库 中 。jQuery UI 关 库 〈 人 参见 19.10 节 ) 拥有 一 套 特 别 全 面 的 动画 效果 。 


19.5.2” 自 定义 动画 


与 简单 动画 方法 实现 的 效果 相 比 ， 使 用 animate() 方 法 可 以 实现 更 多 
通用 动画 效果 。 传 给 animate() 方 法 的 第 一 个 参数 指定 动 男 内 容 ， 剩 余 参 
数 指定 如 何 定制 动画 。 第 一 个 参数 是 必需 的 : 它 必须 是 一 个 对 象 ， 该 对 
象 的 属性 指定 要 变化 的 CSS 属 性 和 它们 的 目标 值 。animate() 方 法 会 将 每 
个 元 系 的 这 些 CSS 属 性 从 初始 值 变 化 到 指定 的 目标 值 。 例 如 ， 上 面 描述 
的 slideUpO 效 果 可 以 用 以 下 代码 来 实现 : 

















// 将 所 有 图 片 的 高 度 缩小 到 9 
$("img").animate( {height:0}); 











第 二 个 参数 是 可 选 的 ， 可 以 传 入 一 个 选项 对 象 给 animate() 方 法 : 





$("#sprite").animate({ 

opacity: .25,// 将 不 透明 度 调 整 为 0 .25 
font-size:10// 将 字体 大 小 变化 到 10 像 素 
}14 

?duration:500, // 动 画 持 续 半 秒 

complete: function( ){// 在 动画 完成 时 调用 记 
this.text ("Goodbye");// 改 变 元 素 的 文本 
} 

}); 
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除了 将 选项 对 象 作为 第 二 个 参数 传 入 ，animate() 方 法 还 允许 将 三 个 

常用 的 选项 作为 参数 传 入 。 可 以 将 动画 时 长 (数值 或 字符 串 ) 作 为 第 
二 个 参数 传 入 。 可 以 指定 缓 动 函数 名 为 第 三 个 参数 。 很 快 会 讲解 缓 动 
函数 。) 最 后 可 以 将 回调 函数 指定 为 第 四 个 参数 。 


通常 ，animate() 方 法 接受 两 个 对 象 参 数 。 第 一 个 指定 动画 内 容 ， 第 
二 个 指定 如 何 定制 动画 。 要 彻底 理解 如 何 使 用 jQuery 来 实现 动画 ， 还 需 
要 弄 明白 这 两 个 对 象 的 更 多 细节 。 


1. 动 画 属 性 对 象 


animate() 方 法 的 第 一 个 参数 必须 是 对 象 。 该 对 象 的 属性 名 必须 是 
CSS 属 性 名 ， 这 些 属性 的 值 必须 是 动画 的 目标 值 。 动 画 只 文 持 数值 属 
性 : 对 于 颜色 、 字 体 或 display 等 枚 举 属性 是 无 法 实现 动画 效果 的 号 。 如 
末 属 性 值 是 数值 ， 则 默认 单位 是 像素 。 如 采 属 性 值 是 字符 串 ， 可 以 指定 
单位 。 如 果 省 略 单位 ， 则 默认 依旧 是 像素 。 还 可 以 指定 相对 值 ， 

“+=” 前 缀 表示 增加 ， 或 用 “-=” 表 示 减 少 。 例 如 : 

















$("p").animate({ 
"margin-left":"+=.5in",// 增 加 段落 缩 进 
opacity:"-=.1"// 同 时 减少 不 透明 度 

}); 




















注意 上 面 的 对 象 字 面 量 中 属性 名 "margin-left" 两 旁 引 号 的 使 用 。 属 
性 名 中 的 连 字 符 表 示 这 不 是 一 个 合法 的 JavaScript 标 识 符 ， 所 以 它 必 须 用 
引号 括 起 来 。 当 然 ，jQuery 也 人 允许 使 用 marginLeft 这 种 大 小 写 混 合 的 写 





Ls 


除了 数值 (可 以 带 有 单位 、“+=” 或 “-=” 前 经 ) ， 在 jQuery 动画 属性 
对 象 中 ， 还 可 以 使 用 三 个 其 他 值 。"hide' 征 会 保存 启 性 的 请 全 然后 
将 该 属性 的 值 变化 到 0。"show" 值 会 将 CSS 属 性 的 值 还 原 到 之 前 保存 的 
值 。 如 果 一 段 动 画 使 用 了 "show"，jQuery 会 在 动画 完成 时 调用 show0 方 
如 果 一 段 动 画 使 用 了 "hide"，jQuery 会 在 动画 完成 时 调用 hide() 方 
去 ; 


还 可 以 使 用 "toggle" 来 实现 显示 或 隐藏 ， 有 具体 效果 取决 于 该 属性 的 
当前 设置 。 可 以 用 下 面 的 代码 实现 "slideRight" 效 果 (和 slideUp0 方 法 类 
似 ， 只 是 动画 内 容 是 元 素 宽度 ) : 














$(" img 
width : de" 
Ds "hide" 
borderRight:" 'hiden 
paddingLeft:"hide", 
paddingRight:"hide" 
}); 


将 上 面 的 属性 值 蔡 换 为 "show" 或 "toggle"， 就 可 以 产生 水 平滑 动 的 
伸缩 效果 ， 类 似 slideDown(0 和 slideToggleO 效 果 。 


2. 动 画 选 项 对 象 


animate() 方 法 的 第 二 个 参数 是 可 选 的 ， 该 选项 对 象 用 来 指定 动画 如 
何 执行 。 有 两 个 最 重要 的 选项 我 们 已 经 接触 过 。duration 属 性 指定 动画 
持续 的 坚 秒 时 间 ， 该 属性 的 值 偿 可 以 是 "fast"、"slow" 或 任何 在 
jQuery.fx.speeds 中 定义 的 名 称 。 


男 一 个 接触 过 的 选项 是 complete 属 性 : 蕊 指明 在 动画 完成 时 的 回调 
函数 。 和 complete 属 性 类 似 ，step 属 性 指定 在 动画 每 一 步 或 每 一 帧 调用 
的 回调 函数 。 在 回调 函数 中 ，this 指 癌 正 在 连 乡 支 变化 的 元 素 ， 第 一 个 参 
数 则 是 正在 变化 的 属性 的 当前 值 。 


在 选项 对 象 中 ，queue 属 性 指定 动画 是 否 需 要 队列 化 一 一 是 人 否 需 要 
等 到 所 有 尚未 发 生 的 动画 都 完成 后 再 执行 该 动画 。 默 认 情 况 下 ， 上 所 有 动 
画 都 是 队列 化 的 。 将 queue 属 0 非 队列 化 
的 动画 会 立刻 执行 。 随 后 队列 化 的 动画 不 会 等 待 非 队 列 化 的 动画 执行 完 

















成 后 才 执 行 。 考 虑 以 下 代码 : 





$("img").fadeIn(500) 
.animate({"width":"+=100"}, {queue:false, duration:1000}) 
.fadeOut (500); 


上 面 的 fadeInO 和 fadeOut() 效 果 是 队列 化 的 ， 但 animate() 的 调用 在 
1000 毫 秒 内 连续 改变 width 属性 ) 是 非 队列 化 的 。 这 段 width 动 画 和 
fadeIn() 效 果 的 开始 时 间 相同 。fadeOut0) 效 果 会 在 fadeIn0 效 果 完 成 时 立 
刻 开 始 ， 它 不 会 等 到 width 动画 完成 。 


绥 动 函数 


实现 动画 时 ， 时 间 和 动画 属性 值 之 间 可 以 是 线性 关系 ， 这 种 方式 很 
直接 ， 但 不 够 好 。 例 如 ， 一 段 时 长 400ms 的 动画 ， 在 100ms 时 ， 动 画 完 
成 了 25%。 在 该 线性 动画 中 ， 如 果 将 不 透明 上 度 从 1.0 变 化 到 0.0( 可 能 是 
一 个 fadeOutO 调 用 ) ， 则 在 100ms 时 ， 不 透明 度 应 该 是 0.75。 然 而 ， 事 
实 表 明 ， 非 线性 的 动画 效果 会 带 来 更 愉悦 的 体验 。 因 此 ，jQuery 引 入 
了 “ 缓 动 函数 ”"， 来 将 基于 时 间 的 完成 百分比 映射 到 动画 效果 的 百分比 。 
jQuery 在 调用 组 动 函数 时 会 传 入 一 个 基于 时 间 的 0 一 1 之 间 的 值 。 组 动 函 
数 会 返回 另 一 个 0 一 1 之 间 的 值 ，jQuery 会 根据 该 返回 值 来 计算 CSS 属 性 
的 值 。 通 常 ， 缓 动 函 数 在 传 入 0 时 会 返回 9， 在 传 入 1 时 会 返回 1。 当 然 ， 
在 0 一 1 之 间 缓 动 函 数 可 以 是 非 线 性 的 ， 这 可 以 让 动画 有 加 速 和 减速 效 
果 。 


jQuery 的 默认 绥 动 函数 是 正弦 函数 : 它 开 始 很 慢 ， 接 着 加 速 ， 然 后 
再 绥 慢 “ 绥 动 ”变化 到 终 值 。jQuery 中 的 绥 动 函数 有 和 名字。 默认 的 缓 动 函 
数 名 为 "Swing"，jQuery 还 实现 了 一 个 线性 绥 动 函数 ， 名 字 为 "linear"。 可 
以 添加 自 定义 绥 动 疯 数 到 jQuery.easing 对 象 上 : 

















jQuery.easing["squareroot"]=Math. sqrt,; 


在 jQuery UI 类 库 中 ， 有 一 个 “Query 绥 动 插件 ”定义 了 一 套 更 复杂 的 
绥 动 函数 。 


剩余 的 动画 选项 和 组 动 函 数 有 关 。 选 项 对 象 的 easing 属 性 指定 绥 动 
函数 名 。jQuery 默 认 使 用 的 是 命名 为 "swing" 的 正弦 函数 。 如 果 想 让 动画 


线性 变化 ， 可 以 使 用 如 下 选项 : 





$("img").animate({"width":"+=100"}, {duration:500,easing:"linear"}); 





是 否 还 记得 ， 除 了 传 入 选项 对 象 ，duration、easing 和 complete 选 项 
可 以 指定 为 animate() 方 法 的 参数 。 因 此 ， 上 面 的 代码 还 可 以 写成 : 





$("img").animate({"width":"+=100"},500,"1linear"); 








最 后 ，jQuery 动 画 框架 甚 全 还 多 许 为 不 同 的 CSS 动 画 属 性 指定 不 同 
的 缓 动 函 数 。 这 有 两 种 方式 来 实现 ， 代 码 示例 如 下 : 


























// 用 hide( ) 方 法 隐藏 图 片 ， 图 片 的 大 小 采用 线性 动画 

// 不 透明 度 则 使 用 默认 的 "swing" 组 动 函数 

// 实 纲 方式 一 : 

// 使 用 specialEasing 选 项 来 指定 自 定 义 缓 动 函数 

$("img").animate( {width:"hide",height:"hide",opacity:"hide"},? 
{specialEasing:{width:"linear",height:"linear"}});// 实 现 方式 二 : 
// 在 第 一 个 对 象 参数 中 传 入 [目标 值 , 缓 动 函数 ] 数 组 

$("img").animate({ 
width:["hide","linear"],height:["hide","linear"],opacity:"hide" 


}); 
















































































19.5.3 ”动画 的 取消 、 延 运 和 队列 


jQuery 还 定义 了 一 些 动画 和 队列 相关 的 方法 ， 我 们 需要 进一步 了 
解 。 首 先是 stop0 方 法 ， 它 用 来 停止 选中 元 素 上 的 当前 正在 执行 的 任何 
动画 。top0 方 法 接受 两 个 可 选 的 布尔 值 参数 。 如 果 第 一 个 参数 是 true， 
会 清除 该 选中 元 素 上 的 动画 队列 :除了 停止 当前 动画 ， 还 会 取消 任何 等 
待 执行 的 动画 。 第 一 个 参数 的 默认 值 是 false: 如 果 忽 略 该 参数 ， 等 待 执行 
的 动画 不 会 被 取消 。 第 二 个 参数 用 来 指定 正在 连续 变化 的 CSS 属 性 是 否 
保留 当前 值 ， 还 是 应 该 变化 到 最 终 目标 值 。 传 入 tmue 可 以 让 它们 变化 到 
最 终 值 。 传 入 false (或 省 略 该 参数 ) 会 让 它们 保持 为 当前 值 


当 动 画 是 由 用 户 事 件 触发 时 ， 在 开始 新 的 动画 前 ， 可 能 需要 取消 挥 
当前 或 等 待 执行 的 任何 动画 。 比 如 : 














// 当 鼠标 悬浮 在 图 片上 时 ， 图 片 变 得 不 透明 
// 注 意 : 我 们 没有 在 鼠标 事件 上 持 有 队列 化 动画 
$("img").bind({ 









































mouseover:function(){$(this).stop().fadeTo(300,1.0);}, 
mouseout:function(){$(this).stop().fadeTo(300,0.5);} 
}); 





与 动画 相关 的 第 二 个 方法 是 delay0O。 这 会 直接 添加 一 个 时 间 延 人 
动画 队列 中 : 第 一 个 参数 是 时 长 〈 以 毫秒 为 单位 的 数值 或 字符 吕 ) ， 
二 个 参数 是 队列 名 ， 是 可 选 的 〈 通 党 并 不 需要 第 二 个 参数 : 接 下 来 我 们 
会 解释 队列 名 ) 。 可 以 在 复合 动画 中 使 用 delay0， 代 人 码 如 下 : 








// 快 速 淡出 为 半 透 明 ， 等 一 等 ， 然 后 向 上 滑动 
$("img").fadeTo(100,0.5).delay(200).slideUp(); 





在 上 面 的 stop0 方 法 例子 中 ， 使 用 mouseover 和 mouseout 事 件 来 变化 
图 片 的 透明 度 。 可 以 调整 该 例子 : 在 开始 动画 时 ， 添 加 一 个 短小 的 延 
这 样 ， 当 鼠标 快速 滑 过 图 片 而 不 停留 时 ， 不 会 有 任何 分 神 的 动画 产 








$("img").bind({ 
mouseover:function(){$(this).stop(true).delay(100).fadeTo(300,1.0);}, 
mouseout:function(){$(this).stop(true).fadeTo(300,0.5);} 

}); 





和 动画 相关 的 最 后 一 组 方法 可 以 对 jQuery 的 队列 机 制 进行 底层 操 
作 。jQuery 队 列 是 按 顺序 执行 的 函数 列表 。 每 一 个 队列 都 与 一 个 文档 元 
素 ( 或 者 是 Document 或 Window 对 象 ) 关联 ， 每 一 个 元 素 的 队列 都 与 其 
他 元 素 的 队列 彼此 独立 。 可 以 使 用 queque0) 方 法 给 队列 添加 一 个 新 函 
数 。 当 某 个 函数 到 达 队 列 尖 部 时 ， 它 会 自动 从 队列 中 去 除 并 被 调用 。 当 
函数 被 调用 时 ，this 指 同 与 队列 相关 联 的 元 素 。 被 调用 的 函数 会 传 入 唯 
一 一 个 回调 函数 作为 参数 。 当 函数 完成 运行 时 ， 它 必须 调用 回调 函数 。 
这 可 以 运行 队列 中 的 下 一 个 操作 ， 如 果 不 调用 回调 函数 ， 该 队列 会 停止 
运行 ， 剩 余 的 函数 将 永远 不 会 被 调用 。 


我 们 知道 ， 通 过 给 jQuery 动画 方法 传 入 回调 函数 ， 就 可 以 在 动画 完 
0 通过 对 函 数 执行 队列 操作 ， 也 可 达到 这 一 目的 : 











// 淡 入 显示 一 个 元 素 ， 稍 等 片刻 ， 设 置 一些 文 字 ， 然 后 变化 边框 
$("#message").fadeIin().delay(200).queue(function(next){ 
$(this).text("Hello World");// 显 示 一 些 文字 
next();// 运 行 队列 中 的 下 一 项 

}) .animate( {borderwidth:"+=10px;"});// 将 边框 变 粗 








队列 函数 中 的 回调 函数 参数 是 jQuery 1.4 引 入 的 新 特性 。 对 于 jQuery 
的 版 本 ， 需 要 调用 dequeue() 方 法 “手动 ”取消 队列 中 的 下 一 个 函 





$(this).dedqueue();// 替 代 next() 方 法 


如 果 在 队列 中 什么 也 没有 ， 调 用 dequeue() 方 法 不 会 有 任何 响应 。 反 
之 ， 它 则 会 将 队列 尖 部 的 函数 从 队列 中 移 除 ， 并 调用 它 ， 设 置 的 this 值 
和 传 入 的 回调 函数 如 上 所 述 。 


还 有 一 些 笨拙 的 方式 来 操作 队列 。clearQueue0) 方 法 用 来 清除 队 
列 。 给 queue() 方 法 传 入 一 个 函数 组 成 的 数组 而 不 是 单一 函数 时 ， 会 用 传 
入 的 函数 数组 来 蔡 换 当前 队列 。 如 果 在 调用 queue() 方 法 时 ， 不 传 入 任何 
参数 ， 则 会 返回 当前 队列 数组 。jQuery 还 将 queue0 和 dequeue0O 定 义 成 了 
A 
阴 数 : 


























$(e).,queue(f);// 创 建 一 个 持 有 e 的 jQuery 对 象 ， 并 调用 queue( ) 方 法 
jQuery .queue(e,f);// 直 接 调 用 jQuery .queue() 工 具 函 数 























最 后 ， 留 意 下 queueO0、dequeue0 和 clearQueue() 方 法 都 可 以 有 一 个 
可 选 的 队列 名 来 作为 第 一 个 参数 。jQuery 动 画 方法 使 用 的 队列 名 
是 "fx"， 这 是 没有 指定 队列 名 时 默认 使 用 的 队列 。 当 想 要 顺序 执行 异步 
操作 时 ，jQuery 队 列 机 制 非常 有 用 : 原来 需要 给 每 一 个 异步 操作 传 入 回 
调 函 数 来 触发 队列 中 的 下 一 个 函数 ， 现 在 可 以 直接 使 用 jQuery 队列 来 管 
理 异步 序列 。 只 须 传 入 非 "fx" 的 队列 名 ， 并 记得 队列 中 的 函数 不 会 自动 
执行 。 必 须 显 式 调 用 dequeue() 方 法 来 运行 第 一 个 函数 ， 然 后 每 一 步 操 作 
在 完成 时 必须 把 下 一 个 操作 从 队列 中 移出 。 


19.6 jQuery 中 的 Ajax 


在 Web 应 用 编程 技术 里 ，Ajax 很 流行 ， 它 使 用 HTTP 脚 本 〈 人 参考 第 
18 章 ) 来 按 需 加 载 数 据 ， 而 不 需要 刷新 整个 页 面 。 在 现代 Web 应 用 中 ， 
Ajax 技术 非常 有 用 ， 因 此 jQuery 内 置 了 Ajax 工具 来 简化 使 用 。jQuery 定 
义 了 一 个 高 级 工具 方法 和 四 个 高 级 工具 函数 。 这 些 高 级 工具 都 基于 同 
































个 强大 的 底层 函数 : jQuery.ajax0。 下 面 的 章节 会 首先 描述 这 些 高 级 工 
具 ， 然 后 再 详细 阐述 jQuery.ajaxO 函 数 。 为 了 彻底 理解 高 级 工具 的 使 
用 ， 我 们 需要 理解 jQuery.ajax0， 即 便 可 能 永远 不 用 显 式 使 用 它 。 


19.6.1 load0) 方 法 
load0 是 所 有 jQuery 工具 中 最 简单 的 ;向 它 传 入 一 个 URL， 它 会 异步 


加 载 该 URL 的 内 容 ， 然 后 将 内 容 插 入 每 一 个 选中 元 系 中 ， 普 换 挥 已 经 存 
在 的 任何 内 容 。 例 如 : 





// 每 隔 69 秒 加 载 并 显示 最 新 的 状态 报告 
setIinterval(function(){$('#status').1load("status_report.html");},60000); 





19.4.1 节 也 讲 到 了 1load(0) 方 法 ， 它 用 来 注册 load 事 件 的 处 理 程序 。 如 
果 传 给 该 方法 的 第 一 个 参数 是 函数 而 不 是 字符 串 ， 则 load0 方 法 是 事件 
os 如 果 只 想 显 示 被 加 载 文档 的 一 部 

， 可 以 在 URL 后 面 添加 一 个 衬 x 格 和 一 个 jQuery 选择 器 。 当 URL 加 载 完 
成 后 ， jQuery 会 用 指定 的 选择 器 来 从 加 载 好 的 HTML 中 选取 需要 显示 的 


部 分 : 











// 加 载 并 显示 天 气 预 告 的 温度 部 分 
$('#temp').load("wheather_report.html#temperature"); 





注意 :URL 后面 的 选择 器 看 起 来 很 像 片 断 标 识 符 (14.2 节 讲述 的 
URL 的 hash 部 分 ) 。 不 同 的 是 ， 如 果 想 只 插入 被 加 载 文档 的 选中 部 分 的 
话 ， 则 室 格 是 必需 的 。 


除了 必须 的 URL 参 数 ，load0) 方 法 还 接受 两 个 可 选 参数 。 第 一 个 可 
选 参数 表示 的 数据 ， 可 以 追加 到 UREL 后 面 ， 或 者 与 请 求 一 起 发 送 。 如 果 
传 入 的 是 字符 串 ， 则 会 追加 到 URL 后 面 ( 放 在 “?” 或 “&” 后 面 ) 。 如 果 
传 入 对 象 ， 该 对 象 会 被 转化 为 一 个 用 “& ”分隔 的 名 / 值 对 后 与 请 求 一 起 发 
送 。【〔 对 象 转化 为 字符 串 的 具体 细节 在 19.6.2 节 下 面 
的 "2.jQuery.getJSONQO" 节 中 描述 。) 通常 情况 下 ，load() 方 法 发 送 HTTP 
” 但 是 如 果 传 入 数据 对 象 ， 则 它 会 及 送 POST 请 求 。 下 面 是 两 
广 例 半 -: 























// 加 载 特定 区 号 的 天 气 预报 


























$('#temp' ).load("us_weather_report.html", "zipcode=02134");// 使 用 对 象 作为 数据 ， 并 指定 
为 华氏 温度 
$('#temp').1load("us_ weather_report.html", {zipcode:02134,units:'F'}); 








l0ad0) 方 法 的 男 一 个 可 选 参 数 是 回调 函数 。 当 Ajax 请 求 成 功 或 未 成 
功 ， 以 及 【〔 当 请 求 成 功 时 ) URL 加 载 完 毕 并 插入 选中 元 素 时 ， 会 调用 该 
回调 函数 。 如 果 没 有 指定 任何 数据 ， 回 调 函 数 可 以 作为 第 二 个 参数 传 

。 否 则 ， 它 必须 是 第 三 个 参数 。 在 jQuery 对 象 的 每 一 个 元 素 上 都 会 调 
用 回调 函数 ， 并 且 每 次 调用 都 会 传 入 三 个 参数 : 被 加 载 URL 的 完整 文本 
内 容 、 状 态 码 字符 串 ， 以 及 用 来 加 载 访 URL 的 XMLHttpRequest 对 象 。 
其 中 ， 状 态 参 数 是 jQuery 的 状态 码 ， 不 是 HITP 的 状态 码 ， 其 值 是 类 
似 "success"、"error" 和 "timeout" 的 字符 串 。 








jQuery 的 Ajax 状态 码 
jQuery 的 所 有 Ajax 工具 ， 包 括 load( 方 法 ， 会 调用 回调 函数 来 提供 请 


求 成 功 或 失败 的 异步 消息 。 这 些 回调 函数 的 第 二 个 参数 是 一 个 字符 串 ， 
可 以 取 以 下 值 : 


"SUCCeSS” 
表示 请 求 成 功 完成 。 
"notmodified" 


该 状态 码 表示 请 求 已 正和 党 完成， 但 服务 器 返回 的 啊 应 内 容 是 HTTP 
304"Not ”Modified"， 表 示 请 求 的 URL 内 容 和 上 次 请 求 的 相同 ， 没 有 变 
化 。 只 有 在 选项 中 设置 ffModified 为 tue 时 ， 该 状态 人 码 才 会 出 现 ( 参 考 
19.6.3 节 下 面 的 “1. 通 用 选项 * 节 ) 。jQuery 1.4 认 为 "notmodified" 状 态 码 是 
成 功 的 ， 但 之 前 的 版 本 会 将 其 当成 错误 。 





"error" 


表示 请 求 没 有 成 功 完 成 ， 原 因 是 某 些 HITP 错 误 。 更 多 细节 ， 可 以 
检查 传 入 每 一 个 回调 函数 中 的 XMLHttpRequest 对 象 的 HITP 状 态 码 来 获 
取 。 





"timout" 


如 果 Ajax 请 求 没 有 在 选 定 的 超时 区 间 内 完成 ， 会 调用 错误 回调 ， 并 
传 入 该 状态 码 。 默 认 情况 下 ，jQuery 的 Ajax 请 求 没 有 超时 限定 ， 只 有 指 
定 了 timeout 选 项 〈 见 19.6.3 节 下 面 的 “1. 通 用 选项 ”人 ) 时 才能 看 到 该 状态 
码 。 


"parsererror" 


该 状态 码 表示 HTTP 请 求 已 成 功 完成 ， 但 jQuery 无 法 按照 期 望 的 方 
式 解析 。 例 如 ， 如 果 服 务 器 返回 的 是 不 符合 格式 的 XML 文 档 或 不 符合 
格式 的 JSON 文 本 时 ， 就 会 出 现 该 状态 码 。 注 意 拼 写 : 是 "parsererror"， 
而 不 是 "parseerror"。 


19.6.2 ”Ajax 工具 函数 


jQuery 的 其 他 Ajax 高 级 工具 不 是 方法 ， 而 是 函数 ， 可 以 通过 jQuery 
或 $ 直 接 调用 ， 而 不 是 在 jQuery 对 象 上 调用 。jQuery.getScriptO 加 载 并 执 
行 JavaScript 代 码 文件 。jQuery.getJSONO 加 载 URL， 将 其 解析 为 JSON, 并 
将 解析 结果 传递 到 指定 的 回调 函数 中 。 这 两 个 函数 都 会 调用 一 个 更 通用 
的 URL 获 取 函 数 : jQuery.get0。 最 后 ，jQuery.post0 和 jQuery.getO 很 类 
似 ， 除 了 执行 的 是 HTTP POST 而 不 是 GET 请 求 。 与 load(0) 方 法 一 样 ， 所 
有 这 些 函 数 都 是 异步 的 : 在 任何 数据 加 载 前 它们 就 会 返回 调用 者 ， 加 载 
结果 则 通过 调用 指定 的 回调 函数 来 通知 。 





1.jQuery.getScript() 
jQuery.getScript() 函 数 的 第 一 个 参数 是 JavaScript 代 人 码 文 件 的 URL。 


它 会 寞 步 加 载 文件 ， 加 载 完 成 后 在 全 局 作用 域 执行 该 代码 。 它 能 同时 适 
用 于 同 源 和 路 源 脚 本 : 

















// 从 其 他 服务 器 动态 加 载 脚本 
jQuery.getSscript("http://example.com/js/widget.js"); 





可 以 传 入 回调 函数 作为 第 二 个 参数 ， 在 这 种 情况 下 ，jQuery 会 在 代 
码 加 载 和 执行 完成 后 调用 一 次 该 回调 函数 : 

















// 加 载 一 个 类 库 ， 并 在 加 载 完成 时 立刻 使 用 它 
jQuery.getscript("js/jquery.my_plugin.js",function(){ 


$('div').my_plugin();// 使 用 加 载 的 
}); 






































jQuery.getScript() 通 常会 使 用 XMLHttpRequest 对 象 来 获取 要 执行 的 
脚本 内 容 。 但 对 于 跨 域 请 求 〈 脚 本 存放 在 与 当前 文档 的 不 一 样 的 服务 器 
上 ) ，jQuery 会 使 用 二 script 二 元 素来 加 载 脚 本 (参考 18.2 节 ) 。 在 同 源 
情况 下 ， 回 调 函 数 的 第 一 个 参数 是 脚本 的 文本 内 容 ， 第 二 个 参数 
是 "success" 状 态 码 ， 第 三 个 参数 则 是 用 来 获取 脚本 内 容 的 
XMLHttpRequest 对 象 。 在 同 源 情况 下 ，jQuery.getScriptO 函 数 的 返回 值 
也 是 该 XMLHttpRequest 对 象 。 对 于 路 源 请 求 ， 不 存在 XMLHttpRequest 
对 象 ， 并 且 脚 本 的 内 容 获 取 不 到 。 在 这 种 情况 下 ， 回 调 函 数 的 第 一 个 和 
第 三 个 参数 是 undefined，jQuery.getScript() 的 返回 值 也 是 undefined。 


传递 给 jQuery.getScriptO 的 回调 函数 ， 仅 在 请 求 成 功 完 成 时 才 会 被 
调用 。 如 果 需 要 在 发 和 后 错误 以 及 成 功 时 都 得 到 通知 ， 则 需要 使 用 底层 的 
jQuery.ajax0 函 数 。 该 节 描 述 的 其 他 三 个 工具 函数 也 是 如 此 。 

















2.jQuery.getJSON() 





jQuery.getJSON() 与 jQuery.getScript 类 似 : 它 会 获取 文本 ， 然 后 特殊 
处 理 一 下 ， 再 调用 指定 的 回调 函数 。jQuery.getJSONO 获 取 到 文本 后 ， 
不 会 将 其 当做 脚本 执行 ， 而 会 将 其 解析 为 JSON “使 用 19.7 节 描述 的 
jQuery.parseJSONO 函 数 ) 。jQuery.getUJSONO 只 有 在 传 入 了 回调 参数 时 
才 有 用 。 当 成 功 加 载 URL， 以 及 将 内 容 成 功 解析 为 JSON 后 ， 解 析 结 果 
会 作为 第 一 个 参数 传 入 回调 函数 中 。 与 jQuery.getScriptO 一 样 ， 回 调 函 
数 的 第 二 个 和 第 三 个 参数 是 "success" 状 态 码 和 XMLHttpRequest 对 象 : 








// 假 设 data.json 包 含 文本 : '{"x":1,"y":2}' 
jQuery.getJSON("data.json",function(data){//data 参 数 是 对 象 {x:1,y:2} 
}); 


与 jQuery.getScriptO 不 同 ，jQuery.geUSONO 接 受 一 个 可 选 的 数据 对 
象 参数 ， 就 和 传 入 load0) 方 法 中 的 一 样 。 如 果 传 入 数据 到 
jQuery.geUSONO 中 ， 该 数据 必须 是 第 二 个 参数 ， 回 调 函 数 则 是 第 三 
个 。 如 果 不 传 入 任何 数据 ， 则 回调 函数 可 以 是 第 二 个 参数 。 如 果 数 据 是 
字符 串 ， 则 它 会 被 添加 到 URL 的 “?” 或 “&” 后 面 。 如 果 数 据 是 一 个 对 
~ 则 它 会 转化 为 字符 串 (参见 下 面 方 框 中 的 内 容 ) ， 然 后 添加 到 URL 











传递 数据 给 jQuery 的 Ajax 工具 


jQuery 的 大 多 数 Ajax 方法 都 接受 一 个 参数 〈 或 选项 ) 用 来 指定 与 
URL 一 起 发 送 给 服务 器 的 数据 。 通 常 ， 该 数据 的 形式 是 URL 编 码 的 、 
用 “&” 分 隔 的 名 / 值 对 。 “这 个 数据 格式 就 是 已 知 的 "application/x-www- 
form-urlencoded"MIME 类 型 。 这 类 似 于 JSON 格 式 : 一 种 将 JavaScript 简 
单 对 象 与 字符 串 互 相 转 化 的 格式 。) 对 于 HTTP GET 请求， 该 数据 字符 
串 会 添加 到 请 求 URL 后 面 。 对 于 POST 请 求 ， 则 在 所 有 发 送 的 HTTP 请 求 
头 后 面 ， 当 做 请 求 的 内 容 体 及 送 它 。 


获取 该 格式 的 数据 字符 串 的 一 种 方式 是 ， 调 用 包含 表单 或 表单 元 素 
的 jQuery 对 象 的 serialize0) 方 法 。 例 如 ， 可 以 使 用 如 下 代码 来 调用 load() 方 
法 提交 HTML 表 单 : 








$('#submit_ button').click(function(event){ 
$(this.form) .load(// 通 过 加 载 新 内 容 来 蔡 换 表单 
this,.,form.action,// 表 单 url 
$(this.form) .serialize());// 将 表单 数据 附加 到 表单 url 后 面 
event .preventDefault();// 取 消 掉 表单 的 默认 提交 
this.disabled="disabled";// 防 止 多 次 提交 

}); 
























































如 果 将 jQuery Ajax 函数 的 数据 参数 〈 或 选项 ) 设置 为 对 象 而 不 是 字 
符 串 ，jQuery 通 常会 调用 jQuery.param() 来 将 对 象 转化 成 字符 串 (除了 下 
面 提 到 的 一 个 异常 ) 。 该 工具 函数 会 将 对 象 的 属性 当成 名 / 值 对 ， 例 
如 ， 会 将 对 象 {x:1y:"hello"} 转 换 成 字符 串 "x=1&y=hello"。 


在 jQuery 1.4 中 ，jQuery.param() 能 处 理 更 复杂 的 JavaScript 对 象 。 如 
果 对 象 的 某 个 属性 值 是 数组 ， 该 数组 中 的 每 一 项 都 会 在 结果 字符 串 中 拥 
有 自己 的 一 个 名 / 值 对 ， 并 且 属 性 名 后 会 添加 方 括 号 。 如 条 对 象 的 某 个 
人 则 内 网 对 象 的 属性 名 会 放置 在 方 括号 里 并 添加 到 外 层 属 
和 。 例 如: 














$.param( {a: [41,2,3]})// 返 回 "a[]=1&a[]=2&a[]=3" 
$.param( {0: {x:1,y:true}})// 返 回 "o[x]=1&o[y]=true" 
$.param( {0:{x:{y:[1,2]}}})// 返 回 "o[x][y][]=1&o[x][y][]=2" 























为 了 后 问 兼 容 jQuery 1.3 及 其 之 前 的 版 本 ， 可 以 传递 true 给 
jQuery.param() 的 第 二 个 参数 ， 或 设置 traditional 选 项 为 tue。 这 可 以 阻止 
对 值 为 数组 或 对 象 的 属性 进行 进一步 序列 化 。 


偶尔 ， 需 要 将 Document (或 一 些 其 他 不 需要 自动 转换 的 对 象 ) 作 为 
POST 请 求 的 内 容 体 传递 。 在 这 种 情况 下 ， 可 以 设置 contentType 选 项 来 
指定 数据 类 型 ， 并 将 processData 选 项 设置 为 false， 以 阻止 jQuery 将 数据 
对 象 传递 给 jQuery.param()。 


如 果 传 递 给 jQuery.getJSONO 的 URL 或 数据 字符 串 在 末尾 或 “&” 字 符 
前 含有 “=?” 字 符 串 ， 则 表明 这 是 一 个 JSONP 请 求 。 (参考 18.2 节 中 
JSONP 的 解释 。) jQuery 会 创建 一 个 回调 函数 ， 并 用 该 回调 函数 的 函数 
名 替换 掉 “=?” 中 的 “?” 号 ， 接 着 jQuery.getJSON() 的 行为 就 会 像 请 求 脚本 
文件 一 样 ， 而 不 是 JSON 对 象 。 这 对 静态 JSON 数 据 文件 无 效 ， 它 只 能 与 
支持 JSONP 的 服务 器 脚本 一 起 才能 工作 。 由 于 JSONP 被 当做 脚本 来 处 
理 ， 因 此 这 意味 着 JSON 格 式 的 数据 可 以 路 域 请 求 。 


3.jQuery.get0 和 jQuery.postO 


jQuery.get0 和 jQuery.postO 获 取 指 定 URL 的 内 容 ， 如 果 有 数据 的 
话 ， 还 可 传 入 指定 数据 ， 最 后 则 将 结果 传递 给 指定 的 回调 函数 。 
jQuery.getO 使 用 HTTP GET 请 求 来 实现 ，jQuery.post() 使 用 HTTP POST 请 
求 ， 其 他 两 者 则 都 是 一 样 的 。 与 jQuery.getJSON() 一 样 ， 这 两 个 方法 也 
接受 相同 的 三 个 参数 : 必需 的 URL， 可 选 的 数据 字符 串 或 对 象 ， 以 及 一 
个 技术 上 可 选 但 实际 上 总 会 使 用 的 回调 函数 。 调 用 的 回调 函数 会 被 传 入 
三 个 参数 : 第 一 个 参数 是 返回 的 数据 ， 第 二 个 是 "success" 字 符 串 ; 第 三 
个 则 是 XMLHttpRequest 对 象 〈 如 果 有 的 话 ) : 











// 从 服务 器 请 求 文本 并 在 警告 对 话 框 中 显示 
jQuery.get("debug.txt",alert); 





除了 上 面 描述 的 三 个 参数 ， 还 有 两 个 方法 接受 可 选 的 第 4 个 参数 
《如 果 省 略 数据 参数 的 话 ， 则 作为 第 三 个 参数 传 入 ) ， 该 参数 指定 被 请 
求 数据 的 类 型 。 第 4 个 参数 会 影响 在 传 入 回调 函数 前 数据 的 处 理 。load0) 
方法 使 用 "html" 类 型 ，jQuery.getScript() 使 用 "script" 类 型 ， 
jQuery.geUJSON0O 则 使 用 "json" 类 型 。 与 上 面 这 些 专用 函数 相 比 ， 
jQuery.get() 和 jQuery.post() 更 灵活 。 该 参数 的 有 效 值 ， 以 及 省 略 该 参数 
时 jQuery 的 行为 ， 在 下 面 描述 。 


jQuery 的 Ajax 数据 类 型 
可 以 给 jQuery.getO 或 jQuery.postO 传 递 下 面 6 种 类 型 作为 参数 。 此 





外 ， Us 会 讲 到 ， 使 用 dataType 选 项 也 可 以 传递 这 些 类 型 给 jQuery.ajax() 
方 # 


"text" 
将 服务 器 的 啊 应 作为 纯 文 本 人 返回， 不 做 任何 处 理 。 
"html" 


该 类 型 和 "text" 一 样 : 啊 应 是 纯 文 本 。load0) 方 法 使 用 该 类 型 ， 将 返 
回 的 文本 插入 到 文档 自身 中 。 





"xml" 


请 求 的 URL 被 认为 指向 XML 格 式 的 数据 ，jQuery 使 用 
XMLHttpRedquest 对 象 的 responseXML 属性 来 替代 responseText 属 性 。 传 
给 回调 函数 的 值 是 一 个 表示 该 XML 文档 的 Document 对 象 ， 而 不 是 保存 
文档 文本 的 字符 串 。 








"SCTipt” 


请 求 的 URL 被 认为 指向 JavaScript 文 件 ， 返 回 的 文本 在 传 入 回调 函数 
前， 会 当做 脚本 执行 。jQuery.getScriptO 使 用 该 类 型 。 当 类 型 
是 "script" 时 ，jQuery 可 以 使 用 入 script 之 元 素来 蔡 代 XMLHttpRequest 对 
象 ， 因 此 可 以 处 理 跨 域 请 求 。 


"json” 


请 求 的 URL 被 认为 指向 JSON 格 式 的 数据 文件 。 会 使 用 
jQuery.parseJSON()( 参 考 19.7 节 ) 来 解析 返回 的 内 容 ， 得 到 JSON 对 象 
后 传 入 回调 函数 。jQuery.getJSONO 使 用 该 类 型 。 如 果 类 型 是 "json" 同 时 
URL 或 数据 字符 串 含 有 "=?"， 该 类 型 会 转换 成 "jsonp"。 


"jSonp” 


请 求 的 URL 被 认为 指 同 服务 器 脚本 ， 该 脚本 支持 JSONP 协 议 ， 可 以 
将 JSON 格 式 的 数据 作为 参数 传递 给 客户 端 指定 的 函数 。 (JSONP 的 更 
多 细节 请 参考 18.2 节 。) 在 该 类 型 下 ， 传 递 给 回调 函数 的 是 解析 好 的 对 
象 。 由 于 JSONP 请 求 可 以 通过 二 script 二 元 素来 实现 ， 因 此 该 类 型 可 以 用 


来 做 跨 域 请 求 ， 束 和 "script" 类 型 一 样 。 使 用 该 类 型 时 ，URL 或 数据 字符 
串 经 常会 包含 一 个 类 似 "&jsonp=?" 或 "&callback=?" 的 参数 。jQuery 会 将 
参数 中 的 “?” 蔡 换 为 目 动 产生 的 回调 函数 名 。 【可 以 参考 19.6.3 节 下 面 

的 “3. 不 和 用 的 选项 和 钩子 ” 节 中 的 jsonp 和 jsonpCallback 选 项 来 做 蔡 

1 


如 果 调 用 jQuery.get()、jQuery.post() 或 jQuery.ajax(0) 函 数 时 没有 指定 
以 上 类 型 中 的 任何 一 个 ，jQuery 会 检查 HTTP 啊 应 中 的 Content-Type 头 。 
如 果 该 头 部 信息 包含 "xml" 字 符 串 ， 则 传 入 回调 函数 中 的 是 XML 文 档 。 
否则 ， 如 果 头 部 包含 "json" 字 符 串 ， 则 数据 被 被 解析 成 JSON 并 把 解析 后 
的 对 象 传 给 回调 函数 。 否 则 ， 如 果 头 部 含有 "javascript" 字 符 串 ， 则 数据 
被 当做 脚本 执行 。 如 果 以 上 都 不 符合 ， 则 数据 会 被 当做 纯 文 本 处 理 。 


19.6.3 jQuery.ajaxO 函 数 


jQuery 的 所 有 Ajax 工具 最 后 都 会 调用 jQuery.ajax(0) 一 一 这 是 整个 类 库 
中 最 复杂 的 函数 。jQuery.ajax0 仅 接受 一 个 参数 : 一 个 选项 对 象 ， 该 对 
象 的 属性 指定 Ajax 请 求 如 何 执行 的 很 多 细节 。 例 如 ， 
jQuery.getScript(url,callback) 与 以 下 jQuery.ajax() 的 调用 等 价 : 











jQuery.ajax({ 

type:"GET", /A/HTTP 请 求 方法 

url:url,// 要 获取 数据 的 url 

data:null, // 不 给 url 添 加 任何 数据 

dataType:"script",// 一 旦 获取 到 数据 ， 立 刻 当 做 脚本 执行 
success:callback// 完 成 时 调用 该 函数 

}); 



































jQuery.get() 和 jQuery.post() 也 接受 上 面 这 5 个 基本 选项 。 然 而 ， 如 于 
直接 调用 jQuery.ajax0 的 话 ， 它 可 以 文 持 更 多 其 他 选项 。 下 面 会 解释 所 
有 选项 〈 包 含 上 面 这 5 个 基本 选项 ) 。 


在 深入 了 解 所 有 选项 之 前 ， 我 们 得 知道 可 以 通过 给 
jQuery.ajaxSetup() 传 入 一 个 选项 对 象 来 设置 任意 选项 的 默认 值 : 








jQuery.ajaxSetup({ 

timeout :2000,// 在 两 秒 后 取消 所 有 Ajax 请 求 

cache :false// 通 过 给 URL 添 加 时 间 恰 来 禁用 浏览 器 缓存 
}); 













































































运行 以 上 代码 后 ， 指 定 的 timeout 和 cache 选 项 会 在 所 有 未 指定 这 两 
个 选项 的 值 的 Ajax 请 求 中 使 用 (包括 jQuery.get() 和 1]o0ad0) 方 法 等 高 级 工 
具 ) 。 





在 阅读 下 面 章节 中 jQuery 的 大 量 选 项 和 回调 函数 时 ， 参 考 19.6.1 节 
和 19.6.2 节 下 面 的 “3.jQuery.get0 和 jQuery.post02> 节 中 关于 jQuery Ajax 状 
态 人 码 和 数据 类 型 字符 串 的 内 容 会 非常 有 神 益 。 


jQuery 1.5 中 的 Ajax 


在 本 书 即将 交付 印刷 时 ，jQuery 1.5 发 布 了 。 在 1.5 版 本 中 ， 重 写 了 
Ajax 模 块 ， 提 供 一 些 非常 便捷 的 新 特性 。 最 重要 的 一 个 特性 是 
jQuery.ajax0 和 上 所 有 之 前 描述 的 Ajax 工具 函数 现在 都 返回 一 个 jqXHR 对 
象 。 该 对 象 模拟 XMLHttpRequest 的 API， 甚 至 对 于 那些 没有 使 用 
XMLHttpRequest 对 象 的 请 求 〈 比 如 $.getScriptO 发 起 的 请 求 ) 也 进行 了 
模拟 。 更 进一步 的 是 ，jqXHR 对 象 定义 了 success0 和 error() 方 法 ， 可 用 来 
注册 请 求 成 功 或 失败 时 的 回调 函数 。 例 如 ， 不 用 给 jQuery.get(O 传 递 回 调 
数 ， 只 须 将 回调 函数 传递 给 工具 函数 返回 的 jqXHR 对 象 的 success() 方 
法 : 








jQuery.get("data.txt") 
.Success(function(data){console.1log("Got", data);}) 
.Success(function(data){process(data);}); 





1. 通 用 选项 

jQuery.ajax0 中 最 常用 的 选项 如 下 : 

type 

指定 HTTP 的 请 求 方法 。 默 认 是 "GET"。 男 一 个 常用 值 是 "POST"。 
可 以 指定 其 他 HTTP 的 请 求 方法 ， 比 如 "DELETE" 或 "PUSH"， 但 不 是 所 
有 浏览 器 都 支持 它们 。 注 意 : 该 选项 的 命名 有 误导 嫌疑 : 该 选项 与 请 求 
或 响应 的 数据 类 型 没有 任何 关系 ， 或 许 取 名 为 "method" 或 是 一 个 更 好 的 
选择 。 


url 


要 获取 的 URL。 对 于 GET 请 求 ，data 选 项 会 添加 到 该 URL 后 。 对 于 
JSONP 请 求 ， 当 cache 选 项 为 false 时 ，jQuery 可 以 添加 参数 到 URL 中 。 


data 
添加 到 URL 中 (对 GET 请 求 ) 或 在 请 求 的 内 容 体 中 〈 对 POST 请 
求 ) 发 送 的 数据 。 这 可 以 是 字符 串 或 对 象 。 通 常会 把 对 象 转化 为 字符 


串 ， 就 如 19.6.2 节 下 面 的 "2.jQuery.getJSONO" 节 中 描述 的 一 样 ， 除 了 在 
process data 选 项 中 描述 的 异常 情况 。 





dataType 


指定 啊 应 数据 的 预期 类 型 ， 以 及 jQuery 处 理 该 数据 的 方式 。 合 法 值 
是 "text"、"html"、"script"、"json"、"jsonp" 和 "xml"。19.6.2 节 下 面 
的 “3.jQuery.get0 和 jQuery.post02> 节 中 有 解释 这 些 值 的 含义 。 该 选项 没有 
默认 值 。 当 没有 指定 时 ，jQuery 会 检查 啊 应 中 的 Content-Type 头 来 确定 
如 何 处 理 返回 的 数据 。 


contentType 


站 定 请 求 的 HTTP Content-Type 头 。 默 认 是 "application/x-www-form- 
urlencoded"， 这 是 HIML 表 单 和 绝 大 部 分 服务 器 脚本 使 用 的 正常 值 。 如 
果 将 type 选 项 设置 为 "POST"， 想 发 送 纯 文 本 或 XML 文档 作为 请 求 体 
时 ， 需 要 设置 该 选项 。 


timeout 


超时 时 间 ， 单 位 是 富 秒 。 如 果 设 置 了 该 选项 ， 当 请 求 没有 在 指定 超 
时 时 间 内 完成 时 ， 请 求 会 取消 同时 触 友 error 回 调 ， 回 调 中 的 状态 人 码 参 数 
为 "timeout"。 默 认 超时 时 间 是 0， 表 示 除 非 请 求 完成 ， 否 则 永远 不 会 取 
消 。 

Cache 

对 于 GET 请 求 ， 如 果 该 选项 设置 为 false，jQuery 会 添加 一 个 “_=” 参 
数 到 URL 中 ， 或 者 蔡 换 已 经 存在 的 同名 参数 。 该 参数 的 值 是 当前 时 间 


〈 军 秒 格式 ) 。 这 可 以 茶 用 基于 浏览 右 的 缓存 ， 因 为 每 次 请 求 的 URL 都 
不 一 样 。 


ifModified 


当 该 选项 设置 为 true 时 ，jQuery 会 为 请 求 的 每 一 个 URL 记 录 Last- 
Modified 和 If-None-Match 吧 应 头 的 值 ， 并 会 在 接 下 来 的 请 求 中 为 相同 的 
URL 设 置 这 些 头 部 信息 。 这 可 以 使 得 ， 如 果 上 次 请 求 后 URL 的 内 容 没 有 
改变 ， 则 服务 器 会 发 送 回 HTTP 304"Not Modified" 响 应 。 默 认 情 况 下 ， 
该 选项 未 设置 ，jQuery 不 会 设置 或 记录 这 些 头 部 信息 。 


jQuery 将 HTTP 304 啊 应 解释 成 "notmodified" 状 态 
码 。"notmodified" 状 态 不 会 被 当成 错误 ， 传 入 success 回 调 中 的 状态 码 
是 "notmodified"， 而 不 是 通常 的 "success" 状 态 码 。 因 此 ， 如 果 设 置 了 
itModified 选 项 ， 就 必须 在 回调 中 检 碍 该 状态 码 一 一 如 采 状 态 码 
是 "notmodified"， 则 第 一 个 参数 〈 啊 应 数据 ) 会 是 undefined。 注 意 
jQuery 1.4 及 其 之 前 的 版 本 ，HTTP 304 会 被 当成 一 个 错 
误 ，"notmodified" 状 态 码 会 被 传 入 error 回 调 中 ， 而 不 是 suceess 回 调 中 。 
请 参考 19.6.1 市 中 的 信息 ， 以 获取 jQuery Ajax 状态 码 的 更 多 信息 。 








global 


该 选项 指定 jQuery 和 是否 应 该 触 发 上 面 描述 的 Ajax 请 求 过 程 中 的 事 
件 。 默 认 值 是 true; 设置 该 选项 为 false 会 禁用 Ajax 相 关 的 所 有 事件 。 
《参考 19.6.4 节 获取 事件 的 细节 。) 该 选项 的 命名 有 些 令 人 迷惑 : 取 名 
人 而 不 是 在 具体 东 个 
x 


2. 回 调 


下 面 的 选项 指定 在 Ajax 请 求 的 不 同 阶段 调用 的 函数 。success 选 项 已 
经 很 熟悉 了 : 这 是 传 入 给 jQuery.getUJSONO 等 方法 的 回调 函数 。 注 意 
jQuery 也 会 将 Ajax 请 求 过 程 的 消息 当做 事件 发 送 〈 除 非 设 置 了 global 选 
项 为 false) 。 


context 


该 选项 指定 回调 函数 在 调用 时 的 上 下 文 对 象 就 是 this。 该 选项 
没有 默认 值 ， 如 果 不 设置 ，this 会 指 癌 选项 对 象 。 设 置 context 选 项 也 会 
影响 Ajax 事件 触发 的 方式 〈 参 考 19.6.4 节 ) 。 如 果 设 置 该 选项 ， 值 应 该 
为 Window、Document 或 触发 事件 所 在 的 Element。 





beforeSend 


该 选项 指定 Ajax 请 服务 器 之 前 激活 的 回调 函数 。 第 一 个 参 
数 是 XMLHttpRequest 对 象 ， 第 二 个 参数 是 该 请 求 的 选项 对 象 。 
beforeSend 回 调 使 得 程序 有 机 会 在 XMLHttpRequest 对 象 上 设置 自 定 义 
HTTP 头 部 。 如 果 访 回调 函数 返回 false，Ajax 请 求 会 取消 。 注 意 路 域 
的 "script" 和 "jsonp" 请 求 没有 使 用 XMLHttpRequest 对 象 ， 因 此 不 会 触发 
beforeSend 回 调 。 








SUCCeSsS 


0 第 一 个 参数 是 服 
务 器 发 送 的 数据 ， 第 二 个 参数 是 jQuery 状态 码 ， 第 三 个 参数 是 用 来 发 送 
该 请 求 的 XMLHItpRequest 对 多 如 19.6.2 节 下 面 的 “3.jQuery.getO0 和 
jQuery.post()” 节 所 描述 ， 第 一 个 参数 的 类 型 取决 于 dataType 选 项 或 服务 
器 啊 应 的 Content- TyDe 人 全 如 果 类 型 是 "xml"， 则 第 一 个 参数 是 
Document 对 象 。 如 果 类 于 是 "json" 或 jsonp”， 第 一 个 参数 是 服务 器 返回 
的 JSON 格 式 啊 应 的 解析 结果 。 如 果 类 型 是 "script"， 则 啊 应 内 容 是 所 加 
载 脚 本 的 文本 内 容 ( 该 脚本 已 经 执行 了 ， 因 此 ， 在 这 种 情况 下 通常 可 以 
忽略 啊 应 内 容 ) 。 对 于 其 他 类 型 ， 啊 应 内 容 直 接 就 是 请 求 资源 的 文本 内 
2 














第 二 个 参数 的 状态 码 通常 是 字符 串 "success"， 但 是 如 果 设 置 了 
ifModified 选 项 ， 访 参数 就 可 能 是 "notmodified"。 在 这 种 情况 下 ， 服 务 器 
不 发 送 响应 并 且 不 定义 第 1 个 参数 。"script" 和 "jsonp" 类 型 的 震 域 请 求 通 
过 二 script 二 元 素 而 不 是 XMLHttpRequest 执 行 ， 因 此 对 于 那些 请 求 ， 不 
会 定义 第 三 个 参数 。 


eITOT 


该 选项 指定 Ajax 请 求 不 成 功 时 调用 的 回调 函数 。 该 回调 的 第 一 个 参 
数 是 该 请 求 的 XMLHttpRequest 对 象 〈 如 果 用 到 的 话 ) 。 第 二 个 参数 是 
jQuery 的 状态 码 。 对 于 HTTP 错 误 ， 该 状态 码 可 能 是 "error"， 对 于 超时 ， 
则 是 "timeout"，"parsererror" 则 表示 解析 服务 器 啊 应 时 出 了 问题 。 例 如 ， 
如 果 XML 文 档 或 JSON 对 象 不 符合 格式 ， 则 状态 码 为 parsererror 。 在 这 
种 情况 下 ，error 回 调 的 第 三 个 参数 是 抛 出 的 Error 对 象 。 注 意 dataType 
为 "script" 的 请 求 在 返回 无 效 JavaScript 代 码 时 不 会 触发 错误 。 脚 本 中 的 任 
何 错误 都 会 直接 忽略 ， 调 用 的 回调 则 是 success 而 不 是 error。 


complete 


该 选项 指定 Ajax 请 求 完 成 时 激活 的 回调 函数 。 每 一 个 Ajax 请 求 或 者 
成 功 时 调用 success 回 调 ， 或 者 失败 时 调用 error 回 调 。 在 调用 success 或 
error 后 ，jQuery 会 调用 complete 回 调 。 传 给 complete 回 调 的 第 一 个 参数 是 
XMLHttpRequest 对 象 ， 第 二 个 参数 则 是 状态 人 码 。 


3. 不 第 用 的 选项 和 钩子 


下 述 Ajax 选 项 不 经 常 使 用 。 某 些 特定 选项 通常 不 可 能 设置 ， 男 一 些 
选项 则 提供 了 目 定 义 钩子 ， 使 得 可 以 修改 jQuery Ajax 请 求 的 默认 处 理 方 


3 
async 


脚本 化 的 HTTP 请 求 本 里 就 是 异步 的 。 然 而 ，XMLHttpRequest 对 象 
提供 了 一 个 选项 ， 可 用 来 阻塞 当前 进程 ， 直 到 接收 到 响应 。 如 果 想 开启 
这 一 阻塞 行为 ， 可 以 设置 该 选项 为 false。 设 置 该 选项 不 会 更 改 
jQuery.ajax0 的 返回 值 : 如 果 有 使 用 XMLHttpRequest 对 象 的 话 ， 该 函数 
会 始终 返回 该 对 象 。 对 于 同步 请 求 ， 可 以 自己 从 XMLHttpRequest 对 象 
中 提取 服务 器 的 响应 和 HTTP 状 态 码 ， 如 果 想 要 获取 jQuery 解析 的 啊 应 
0 可 以 指定 一 个 complete 回 调 ( 就 和 给 异步 请 求 指定 的 一 

) 


dataFilter 
该 选项 指定 一 个 函数 ， 用 来 过 滤 或 预 处 理 服务 器 返回 的 数据 。 第 一 
个 参数 是 从 服务 器 返回 的 原始 数据 (字符 串 或 XML 请 求 返 回 的 煌 


Document 对 象 ) ， 第 二 个 参数 是 dataType 选 项 的 值 。 如 果 指 定 该 函 
则 它 必须 返回 一 个 值 ， 该 值 会 用 来 符 换 掉 服 务 器 的 响应 。 注 意 
dataFilter() 水 数 会 在 JSON 解 析 和 脚本 执行 前 执行 。 同 时 注意 对 于 跨 域 
的 "script" 和 "jsonp" 请 求 不 会 调用 dataFilter()。 








jsonp 


当 设 置 dataType 选 项 为 "jsonp" 时 ，url 或 data 选 项 通常 会 包含 一 个 类 
似 "jsonp=?" 的 参数 。 如 霖 jQuery 在 URL 或 data 选 项 中 没有 找到 类 似 参 数 
时 ， 会 使 用 该 选项 指定 的 名 字 插 入 一 个 。 该 选项 的 默认 值 是 "callback"。 


在 使 用 JSONP 时 ， 如 果 服 务 器 需要 一 个 不 同 的 参数 名 ， 而 URL 或 data 选 
项 中 又 没有 指定 时 ， 需 要 设置 该 选项 。 请 查看 18.2 节 获取 JSONP 的 更 多 
细节 。 





jsonpCallback 


对 于 dataType 为 "jsonp" 的 请 求 ( 或 URL 中 带 有 类 似 "jsonp=?" 这 种 
JSONP 参 数 的 "json" 请 求 ) ，jQuery 必 须 将 URL 中 的 “?” 蔡 换 成 包装 函数 
名 ， 服 务 器 会 将 数据 传递 给 该 包装 函数 。 通 常 ，jQuery 会 根据 当前 时 间 
来 生成 一 个 唯一 的 函数 名 。 如 果 想 用 自己 的 函数 来 蔡 代 jQuery 生成 的 ， 
则 可 以 设置 该 选项 。 但 是 ， 一 旦 这 样 做 了 ， 会 阻止 jQuery 在 触发 正常 事 
件 时 调用 success 或 complete 回 调 。 


processData 


当 设 置 data 选 项 为 对 象 〈 或 将 对 象 作为 第 二 个 参数 传递 给 
jQuery.get() 和 相关 方法 ) 时 ，jQuery 通 常会 将 该 对 象 转换 成 字符 串 ， 访 
字符 串 遵 守 标 准 的 HIML'"application/x-www-form-urlencoded" 格 式 〈 参 
考 19.6.2 节 下 面 的 "2.jQuery.geUSONO" 节 ) 。 如 果 想 省 略 掉 该 步骤 〈 比 
如 想 将 Document 对 象 作 为 POST 请 求 体 发 送 ) ， 请 设置 该 选项 为 false。 


scriptCharset 


对 于 跨 域 的 "script" 和 "jsonp" 请 求 ， 会 使 用 二 script 二 元素 ， 该 选项 
用 来 指定 二 script 二 元 素 的 charset 属 性 值 。 该 选项 对 正常 的 基于 
XMLHttpRequest 的 请 求 不 会 有 任何 作用 。 








tranditional 


jQuery 1.4 改 变 了 数据 对 象 序列 化 为 "application/x-www-form- 
Urlencoded" 字 符 串 的 方式 〈 细 节 请 参考 19.6.2 节 下 面 
的 "2.jQuery.geUJSON0O"T) 。 设 置 该 选项 为 tue， 可 以 让 jQuery 回复 到 原 
来 的 方式 。 


username,password 


如 末 请 求 需要 密码 验证 ， 请 使 用 这 两 个 选项 来 指定 用 户 名 和 窗 码 。 








xhr 


该 选项 指定 一 个 工厂 函数 ， 用 来 获取 XMLHttpRequest 对 象 。 该 工 
三 函 数 在 调用 时 不 带 参 数 ， 而 且 必 须 返 回 一 个 实现 了 XMLHttpRequest 
API 的 对 象 。 这 个 非常 底层 的 钩子 可 以 创建 自己 对 XMLHttpRequest 的 包 
装 ， 可 以 给 方法 添加 特性 或 测量 


19.6.4 ”Ajax 事 件 





19.6.3” 节 下 面 的 “2. 回 调节 描述 了 jQuery.ajaxO 拥 有 4 个 回调 选项 : 
beforeSend、success、error 和 complete。 除 了 分 别 激活 这 些 指 定 的 回调 函 
数 ，jQuery 的 Ajax 函数 还 会 在 Ajax 请 求 的 每 一 个 相同 阶段 触发 自 定 义 事 
件 。 下 面 的 表格 展示 了 这 些 回调 函数 和 相应 的 事件 : 


回调 事件 类 型 处 理 程序 注册 方法 
beforeSend "ajaxSend" ajaxSend() 
SUCe55 "ajaxSuccess" ajaxSucess() 
error "ajaxError" ajaxError() 
complete "ajaxComplete'" ajaxComplete() 
"ajaxStart" ajaxStart() 
"ajaxStop' ajaxStop() 


可 以 使 用 bind0 方 法 和 上 表 第 二 列 中 的 事件 类 型 字符 串 来 注册 这 些 
目 定义 Ajax 事 件 ， 也 可 以 使 用 第 三 列 中 的 事件 注册 方法 来 注册 。 
ajaxSuccess() 和 其 他 方法 的 使 用 方式 就 与 click()、mouseoverO 以 及 19.4.1 
节 中 的 其 他 简单 事件 注册 方法 一 样 。 


由 于 Ajax 事件 是 自 定义 事件 ， 是 由 jQuery 而 不 是 浏览 器 产生 的 ， 因 
此 传递 给 事件 处 理 程序 的 Event 对 象 不 是 很 有 有 用。 其实，ajaxSend、 
ajaxSuccess、ajaxError 和 ajaxComplete 事 件 在 触发 时 都 带 有 其 他 参数 。 这 
些 事件 的 处 理 程序 激活 时 在 event 参 数 后 都 带 有 两 个 额外 的 参数 。 第 一 个 
额外 参数 是 XMLHttpRequest 对 象 ， 第 二 个 额外 参数 是 选项 对 象 。 例 








如 ， 这 意味 着 ajaxSend 事 件 的 处 理 程序 可 以 同 XMLHttpRequest 对 象 添加 
自 定 义 头 ， 就 和 beforeSend 回 调 可 以 做 的 一 样 。 除 了 上 面 描述 的 两 个 额 
外 参数 ， 触 发 ajaxError 事 件 时 还 会 带 有 第 三 个 额外 参数 。 如 果 有 的 话 ， 
事件 处 理 程序 的 第 三 个 额外 参数 是 Error 对 象 ， 是 在 发 生 错 误 时 抛 出 的 。 
令 人 奇怪 的 是 ， a 例如 ， 如 果 
ajaxSuccess 事 件 的 一 个 处 理 程 序 需 }"success" 和 "notmodified"， 则 
ee 各 始 HTTP 状 态 码 。 


上 面 表 格 中 列举 的 最 后 两 个 事件 与 其 他 事件 不 同 ， 最 明显 的 是 它们 
没有 相应 的 回调 函数 ， 同 时 它们 在 触发 时 不 市 额外 参数 。ajaxStart 和 
ajaxStop 是 一 对 表示 与 Ajax 相 关 的 网 络 活动 开始 和 停止 的 事件 。 当 
jQuery 没 在 执行 任何 Ajax 请 求 时 ， 如 果 开 始 一 个 新 请 求 ， 它 就 会 触及 
ajaxStart 事 件 。 如 果 在 第 一 个 请 求 还 没完 成 时 ， 其 他 请 求 束 开始 了 ， 这 
些 新 请 求 不 会 触发 新 的 ajaxStart 事 件 。 当 最 后 一 个 挂 起 的 Ajax 请 求 完 成 
并 且 jQuery 不 再 执行 任何 网 络 活动 时 ， 会 触发 aaxStop 事 件 。 这 一 对 事 
和 隐藏 某 些 “加 载 中 .动画 或 网 络 活动 的 图 标 。 

列 如 : 

















$("#loading_animation").bind({ 
ajaxStart:function(){$(this).show();}, 
ajaxStop:function(){$(this).hide();} 
}); 


这 些 ajaxStart 和 ajaxStop 的 事件 处 理 程序 可 以 绑 定 到 任意 文档 元 素 
上 : jQuery 是 全 局 地 触发 它们 (参考 19.4.6 节 ) 而 不 是 在 某 个 特定 元 素 
上 触发 。 其 他 4 个 Ajax 事件 ，ajaxSend、ajaxSuccess、ajaxError 和 
jaCormiplata 通常 也 是 全 局 触发 的 ， 因 此 处 理 程序 也 可 以 绑 定 到 任何 
元 素 上 。 然 而 ， 如 果 在 调用 jQuery.ajax0O 时 设置 了 context 选 项 ， 则 这 4 个 
事件 不 会 全 局 地 触发 ， 而 会 在 context 元 素 上 触发 。 


最 后 ， 记 住 可 以 通过 设置 global 选 项 为 false 来 阻止 jQuery 触发 任何 


Ajax 相关 的 事件 。 尽 管 这 个 选项 名 很 让 人 迷惑 ， 但 是 设置 global 为 false 
可 以 让 jQuery 不 再 在 context 对 象 上 触发 事件 以 及 不 再 全 局 地 触发 事件 。 


19.7 工具 函数 


jQuery 类 库 定 义 了 不 少 工具 函数 〈 还 有 两 个 属性 ) ， 在 编写 程序 时 
挺 有 用 。 在 下 面 的 列表 中 你 会 发 现 ， 部 分 函数 在 ECMAScript (ES5) 中 








已 经 有 了 等 价 形式 。jQuery 的 函数 比 ES5 早 ， 并 且 可 以 工作 在 所 有 浏览 
器 中 。 按 照 字 母 排 序 ， 将 这 些 工具 函数 列举 如 下 : 


jQuery.browser 


browser 属 性 不 是 一 个 函数 而 是 一 个 对 象 ， 可 用 于 客户 端 串 探 ( 参 
见 13.4.5 节 ) 。 如 果 浏 览 器 是 正 ， 该 对 象 会 拥有 一 个 msie 属 性 ， 值 为 
true。 如 果 浏 览 监 器 是 Firefox 或 与 其 相关 ， 会 有 一 个 值 为 true 的 mozilla 属 
性 。 同 样 ， 在 Safari 和 Chrome 中 ，webkit 属 性 为 true; 在 Opera 中 ，opera 
属性 为 true。 除了 与 浏览 融 相 关 的 属性 ， 还 有 一 个 version 属 性 ， 包 含 浏 
览 器 的 版 本 号 。 尽 量 不 要 使 用 客户 端 噢 探 ， 但 是 可 以 通过 以 下 代码 使 用 
该 属 性 来 解决 济 览 占 相关 的 bug: 

















if($.browser .mozilla& &parseInt($.browser .version)=<=4){// 在 此 解决 一 个 假设 的 FEirefox 
bug... 
} 





jQuery.contains() 


该 函数 接受 两 个 文档 元 素 作 为 参数 。 如 果 第 一 个 元 素 包 含 第 二 个 元 
素 ， 则 返回 true; 否则 返回 false。 





jQuery.each() 
和 each() 方 法 不 同 ，each() 方 法 只 能 遍历 jQuery 对 象 ， 而 
jQuery.eachO 工 具 以 扣 历 数组 元 系 或 对 肥 属 性 。 第 一 个 参数 是 要 





裔 历 的 数组 或 对 象 ， 第 二 个 参数 是 要 在 每 个 数组 元 素 或 对 象 属 性 上 调用 
的 函数 。 该 函数 在 调用 时 会 带 有 两 个 参数 ， 数组 元 素 的 ns 
性 名 ， 以 及 数组 元 素 的 值 或 对 象 的 属性 值 。 函 数 中 的 this 值 和 第 二 全 

的 。 jQuery.each() 会 停止 当前 换 
刻 返 回 。jQuery.eachO 总 是 返回 第 一 个 参数 的 值 。 


jQuery.each0 会 使 用 普通 的 fovin 循 环 来 所 历 对 象 属性 ， 所 以 会 遇 历 
所 有 可 枚 举 的 属性 ， 包 括 继承 的 属性 。jQuery.each0 在 壳 历 数组 元 叉 
时 ， 会 以 序号 从 小 到 大 来 壳 历 ， 不 会 跳 过 稀 琉 数组 中 的 undefined 属 性 。 





jQuery.extend() 


该 函数 接受 对 象 作 为 参数 。 它 会 将 第 二 个 及 其 以 后 参数 对 象 的 属性 
复制 到 第 一 个 参数 对 象 中 ， 如 果 同 名 的 属性 在 第 一 个 参数 对 象 中 已 经 存 
在 ， 则 会 覆盖 它 。 该 函数 会 急 略 任何 值 为 undefined 或 null 的 属性 。 如 果 
仅 传 入 了 一 个 对 象 ， 访 对象 的 属性 会 被 复制 到 jQuery 对 象 上 自身 中 。 该 对 
象 的 返回 值 是 属性 被 复制 到 的 对 象 。 如 果 一 个 参数 的 值 为 tue， 会 执行 
深 揽 贝 : 第 三 个 (及 其 以 后 ) 对 象 的 属性 会 被 复制 到 第 二 个 对 象 上 。 


是 该 函数 用 来 复制 对 象 以 及 合并 带 有 几 组 默认 值 的 选项 对 象 时 非 第 有 








var clone=jQuery.extend({},original); 
var options=jQuery.extend({},default_optinos,user_options); 


jQuery.globalEval() 


该 函数 会 在 全 局 上 下 文中 执行 JavaScript 代 码 字符 串 ， 就 像 它 是 < 
Script 之 元 素 的 内 容 一 样 。《〈 实 际 上 ，jQuery 实 现 该 函数 时 ， 就 是 通过 创 
替 一 个 二 script 二 元素 并 临时 把 它 插入 文档 中 来 实现 的 。) 只 


jQuery.grepO 


该 函数 和 ES5 中 Array 对 象 的 外 ter0 方 法 类 似 。 它 接受 数组 作为 第 一 
个 参数 ， 以 及 一 个 判断 函数 作为 第 二 个 参数 ， 该 判断 函数 会 在 数组 的 每 
一 个 元 素 上 调用 ， 调 用 时 会 传 入 元 素 值 和 元 素 序 号 作为 参数 。 
jQuery.grep0 返 回 一 个 新 数组 ， 新 数组 由 调用 判断 函数 时 返回 true (或 其 
他 真 值 ) 的 元 素 组 成 。 如 果 给 jQuery.grepO 传 入 true 作 为 第 三 个 参数 ， 则 
它 会 反 转 判断 函数 ， 返 回 的 数组 将 会 由 判断 函数 调用 时 为 false 或 其 他 假 
值 的 元 素 组 成 。 





jQuery.inArray() 


该 函数 和 ES5 中 Array 对 象 的 indexOf() 方 法 类 似 。 它 的 第 一 个 参数 可 
以 是 任意 值 ， 第 二 个 参数 则 是 数组 (或 类 数组 对 象 ) ， 返 回 值 是 第 一 个 
参数 值 在 数组 中 第 一 次 出 现 的 序号 ， 如 果 访 参数 值 不 存在 的 话 ， 则 返 
回 -1。 


jQuery.isArray() 


当 参 数 是 原生 Array 对 象 时 ， 返 回 true。 
jQuery.isEmptyObject() 

当 参 数 对 象 没 有 可 枚 举 的 属性 时 ， 返 回 true。 
jQuery.isFunction() 


当 参 数 是 原生 Function 对 象 时 ， 返 回 true。 注 意 ， 在 IE8 及 以 前 版 本 
中 ，window.alert() 和 window.attachEvent() 等 浏览 器 方法 返回 false。 


jQuery.isPlainObject() 


如 果 参 数 是 “ 纯 ” 对 象 ， 而 不 是 某 些 特定 类 型 或 类 的 对 象 的 实例 时 ， 
返回 true。 





jQuery.makeArray() 


如 琳 参 数 是 类 数组 对 象 ， 该 函数 会 将 对 象 的 属性 复制 到 一 个 新 的 
( 真 ) 数组 中 ， 并 返回 该 数组 。 如 果 参 数 不 是 类 数组 对 象 ， 该 函数 会 仅 
返回 一 个 新 数组 ， 该 数组 只 包含 传 入 的 参数 一 个 元 素 。 


jQuery.map() 


该 函数 和 ES5 中 Array 对 象 的 map() 方 法 类 似 。 它 接受 数组 或 类 数组 
对 象 作为 第 一 个 参数 ， 第 二 个 参数 则 为 映射 函数 。 每 一 个 数组 元 素 与 其 
序号 都 会 传 入 这 映射 函数 中 ， 返 回 值 就 是 由 映射 函数 返回 的 值 组 成 的 新 
数组 。jQuery.map0 与 ES5 map(0) 方 法 存在 两 点 不 同 。 首 先 ， 如 果 有 映射 函 
数 返 回 的 是 null， 该 值 不 会 被 包含 在 返回 的 数组 中 。 其 次 ， 如 果 映 射 函 
该 数组 的 元 素 会 被 添加 到 结果 数组 中 ， 而 不 是 数组 本 








jQuery.mergel() 


该 函数 接受 两 个 数组 或 类 数组 对 象 。 它 会 将 第 二 个 参数 的 元 系 添加 
到 第 一 个 上 面 ， 并 返回 第 一 个 参数 。 第 一 个 数组 会 修改 ， 第 二 个 不 会 。 
可 以 使 用 该 函数 来 浅 拷贝 类 数组 对 象 : 





var clone=jQuery.merge([],original); 


jQuery.parseJSON() 


该 函数 会 解析 JSON 格 式 的 字符 串 ， 返 回 解析 结果 。 当 传 入 的 格式 
有 误 时 ， 它 会 抛 出 异常 。 在 定义 它 的 浏览 器 中 jQuery 使 用 标准 的 
JSON.parse0 函 数 。 注 意 jQuery 只 定义 JSON 解 析 函 数 ， 而 没有 定义 JSON 
序列 化 函数 。 





jQuery.proxy() 


该 函数 和 ES5 中 Function 对 象 的 bindO 方 法 (参见 8.7.4 节 )〉 类似。 它 
接受 函数 作为 第 一 个 参数 ， 对 象 作 为 第 二 个 参数 ， 并 返回 一 个 新 函数 ， 
该 函数 会 作为 第 二 个 参数 对 象 的 方法 调用 。 它 没有 像 bind() 方 法 那样 实 
现 参 数 的 部 分 应 用 。 


jQuery.proxy0O 在 调用 时 还 可 以 传 入 对 象 作为 第 一 个 参数 ， 传 入 属性 
名 作为 第 二 个 参数 。 该 名 称 代 表 的 属性 值 应 该 是 一 个 函数 。 通 过 这 种 方 
式 调用 ， 函 数 jQuery.proxy(omI 的 返回 值 与 jQuery.proxy(o[n],o) 一 样 。 


jQuery.proxyO 的 目的 是 用 来 与 jQuery 的 事件 处 理 程序 绑 定 机 制 一 起 
使 用 。 如 果 绑 定 了 一 个 代理 函数 ， 可 以 使 用 原始 函数 来 解除 绑 定 它 。 


jQuery.Support 


这 个 属性 类 似 jQuery.browser, 它 用 来 做 可 移植 的 特性 探测 (参见 
13.4.3 节 ) ， 而 不 是 脆弱 的 浏览 占 探 测 。jQuery.support 的 值 是 一 个 对 
象 ， 该 对 象 的 属性 都 是 布尔 值 ， 用 来 指明 浏览 器 特性 的 存在 情况 。 
jQuery.support 的 绝 大 部 分 属性 都 是 jQuery 内 部 使 用 的 底层 特性 。 这 可 能 
会 引起 插件 开发 者 的 兴趣 ， 但 对 应 用 开发 者 来 说 大 部 分 都 用 途 不 大 。 一 
个 例外 是 jQuery.support.boxModel: 当 浏览 器 使 用 CSS 标 准 的 "context- 
box" 模 型 时 ， 该 属性 为 tue， 而 在 下 6 和 IE7 的 怪异 模式 下 时 为 false ( 参 
考 16.2.3 节 下 面 的 “边框 使 模 型 和 box-sizing 属 性 ”入 )。 





jQuery.trim() 


该 函数 和 ES5 中 全 字符 串 添 加 的 timg 方 法 关 似 ， 它 接 受 字符 串 作 为 
唯一 参数 ， 返 回 的 字符 串 开 头 和 结尾 处 的 空白 字符 都 已 移 除 。 


19.8 jQuery 选择 硕 和 选取 方法 


在 本 章 中 ， 我 们 已 经 使 用 了 带 有 简单 CSS 选 择 器 的 jQuery 选取 函 
数 : $0。 现 在 是 时 候 深 入 了 解 jQuery 选择 器 语法 ， 以 及 一 些 提 取 和 扩充 
选中 元 素 集 的 方法 了 。 


19.8.1 jQuery 选择 器 


在 CSS3 选 择 器 标准 草案 定义 的 选择 需 语 法 中 ，jQuery 文 持 相当 完整 
的 一 套子 集 ， 同 时 还 添加 了 一 些 非 标准 但 很 有 用 的 伪 类 。15.2.5 克 描述 
过 基本 的 CSS 选 择 器 。 在 此 我 们 会 重复 一 下 ， 并 增加 对 更 多 高 级 选择 需 
的 阐释 。 注 意 : 本 节 讲 述 的 是 jQuery 选择 器 。 其 中 有 不 少 选 择 器 (但 不 
是 全 部 ) 可 以 在 CSS 样 式 表 中 使 用 。 


选择 器 语法 有 三 层 结构 。 你 肯定 已 经 见 过 选择 器 中 最 简单 的 形 
式 。"#test" 选 取 id 属 性 为 "test" 的 元 素 。"blockquote" 选 取 文 档 中 的 所 有 去 
blockquote 之 元 素 ， 而 "divnote" 则 选取 所 有 class 属 性 为 "note" 的 二 div> 
元 素 。 人 简单 选择 器 可 以 组 合成 < 组 合 选择 咒 ”， 比 如 "div.note> 
p" 和 "blockquote i"， 只 要 用 组 合 字 符 做 分 隔 符 束 行 。 简 单 选择 器 和 组 合 
选择 器 还 可 以 分 组 成 去 号 分 隔 的 列表 。 这 种 选择 器 组 是 传递 给 $0 函 数 最 
常见 的 形式 。 在 解释 组 合 选 择 器 和 选择 器 组 之 前 ， 我 们 必须 先 了 解 简 单 
选择 器 的 语法 。 


1. 人 简单 选择 器 


简单 选择 圳 的 开头 部 分 〈 显 式 或 隐 式 地 ) 是 标签 类 型 声明 。 例 如 ， 
如 果 只 对 <p> 元 素 感 兴趣 ， 简 单 选 择 器 可 以 用 "p" 开 头 。 如 果 选 取 的 元 
素 和 标签 名 无 天 ， 则 可 以 使 用 通配符 “*" 号 来 代 蔡 。 如 宋 选 择 器 没有 以 
标签 名 或 通配符 开头 ， 则 隐 式 含有 一 个 通配符 。 


标签 名 或 通配符 指定 了 备 选 文档 元 系 的 一 个 初始 集 。 在 简单 选择 器 
中 ， 标 签 类 型 声明 之 后 的 部 分 由 零 个 或 多 个 过 滤器 组 成 。 过 滤器 从 左 到 
右 应 用 ， 和 书写 顺序 一 致 ， 其 中 每 一 个 都 会 缩小 选中 元 素 集 。 表 19-1 列 
举 了 jQuery 文 持 的 过 滤器 。 














表 19-1; jQuery 选择 过 滤器 

过 滤器 含义 

相 d 匹配 id 属 性 为 id 的 元 素 。 在 有 效 的 HTML 文 档 中 ， 永 远 不 会 出 现 多 
个 元 素 拥 有 相同 的 ID， 因 此 该 过 滤器 通常 作为 独立 选择 器 来 使 用 


过 滤器 


.Class 


[attr] 
[attr=val] 
[attr!=val] 


[attr^=val] 
[attr$=val] 
[attr*=val] 
[attr~ =val] 


[attr|=val] 


:animated 


:button 


:checkbox 


:checked 


:contains(text) 


:disabled 
:empty 
:enabled 
:eq(n) 


:even 


:file 
:first 


:first-child 


含义 

匹配 class 属 性 (是 一 串 被 解析 成 用 空格 分 隔 的 单词 列表 ) 含有 class 
单词 的 所 有 元 素 

匹配 拥有 attr 属 性 (和 值 无 关 ) 的 所 有 元 素 

匹配 拥有 attr 属 性 且 值 为 veal 的 所 有 元 素 

匹配 没有 attr 属 性 、 或 attr 属 性 的 值 不 为 val 的 所 有 元 素 (jQuery 的 扩 
展 ) 

匹配 attr 属 性 值 以 val 开 头 的 元 素 

匹配 attr 属 性 值 以 val 结 尾 的 元 素 

匹配 attr 属 性 值 含有 val 的 元 素 


当 其 attr 属 性 解释 为 一 个 由 空格 分 隔 的 单词 列表 时 ， 匹 配 其 中 包含 单 
词 val 的 元 素 。 因 此 选择 器 “div.note” 与 “div [class~=note]” 相 同 


匹配 attr 属 性 值 以 al 开头 且 其 后 没有 其 他 字符 ,或 其 他 字符 是 以 连 
字符 开头 的 元 素 
匹配 正在 动画 中 的 元 素 ， 该 动画 是 由 jQuery 产生 的 


匹配 <button type="button"> 和 <input type="button"> 元 素 (jQuery 
的 扩展 ) 


匹配 <input type="checkbox"> 元 素 (jQuery 的 扩展 ) ， 当 显 式 带 有 
input 标 签 前 缀 “input:checkbox” 时 ， 该 过 滤器 更 高 效 


匹配 选中 的 input 元 素 
匹配 含有 指定 text 文 本 的 元 素 (jQuery 的 扩展 ) 。 该 过 滤器 中 的 圆 括 








号 确定 了 文本 的 范围 无 须 添 加 引号 。 被 过 滤 的 元 素 的 文本 是 由 
textContent 或 innerText 属 性 来 决定 的 这 是 原始 文档 文本 ， 不 带 标 
答 和 注释 

匹配 禁用 的 元 素 

匹配 没有 子 节点 、 没 有 文本 内 容 的 元 素 

匹配 没有 禁用 的 元 素 


匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 的 第 n 个 元 素 (jQuery 
的 扩展 ) 

匹配 列表 中 偶数 序号 的 元 素 。 由 于 第 一 个 元 素 的 序号 是 0， 因 此 实际 
上 选中 的 是 第 I 个 、 第 3 个 、 第 5 个 等 元 素 (jQuery 的 扩展 ) 

匹配 <input type="file"> 元 素 (jQuery 的 扩展 ) 

匹配 列表 中 的 第 一 个 元 素 。 和 “:eq(0)” 相同 (jQuery 的 扩展 ) 
匹配 的 元 素 是 其 父 节 点 的 第 一 个 子 元 素 。 注 意 : 这 与 “:first” 不 同 


过 滤器 
:gt(n) 


:has(sel) 


:header 


:hidden 


:image 


:input 


:last 
:last-child 
:lt(n) 


:not(sel) 
:nth(n) 
:nth-child(n) 


:odd 


:only-child 
:parent 


:password 


舍 兴 

匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 序号 大 于 n 的 元 素 
(jQuery 的 扩展 ) 

匹配 的 元 素 拥 有 匹配 内 与 选择 器 sel 的 子孙 元 素 


匹配 所 有 头 元 素 : <hi1>、<h2>、<h3>、<h4>、<h5> 或 ch6>》(jQuery 的 
扩展 ) 

匹配 所 有 在 屏幕 上 不 可 见 的 元 素 : 大 体 上 可 以 认为 这 些 元 素 的 
offsetWidth 和 offsetHeight 为 0 

匹配 <input type="image"> 元 素 。 注 意 该 过 滤器 不 会 匹配 cimg> 元 素 
(jQuery 的 扩展 ) 


匹配 用 户 输入 元 素 : cinput>、<textarea>、<select> 和 <button> 
(jQuery 的 扩展 ) 


匹配 选中 列表 中 的 最 后 一 个 元 素 (jQuery 的 扩展 ) 

匹配 的 元 素 是 其 父 节 点 的 最 后 一 个 子 元 素 。 注 意 : 这 与 “:1ast” 不 同 
匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 序号 小 于 n 的 元 素 
(jQuery 的 扩展 ) 

匹配 的 元 素 不 匹配 内 柚 选 择 器 sel 

与 “:eq(n)” 相 同 (jQuery 的 扩展 ) 

匹配 的 元 素 是 其 父 节 点 的 第 n 个 子 元 素 。n 可 以 是 数值 、 单 词 even.、 
单词 odd 或 计算 公式 。 使 用 “:nth-child(even)” 来 选取 那些 在 
其 父 节 点 的 子 元 素 中 排行 第 2 或 第 4 等 序号 的 元 素 。 使 用 “:nth- 
child(odd)” 来 选取 那些 在 其 父 节 点 的 子 元 素 中 排行 第 1、 第 3 等 序号 
的 元 素 。 

更 第 见 的 情况 是 ，n 是 xn 或 Xn+y 这 种 计算 公式 ， 其 中 x 和 y 是 整数 ，n 是 
字面 量 n。 因 此 可 以 用 nth-child(3n+1) 来 选取 第 1 个 、 第 4 个 、 第 7 个 
等 元 素 。 

注意 该 过 滤器 的 序号 是 从 1 开始 的 ， 因 此 如 果 一 个 元 素 是 其 父 节点 的 
第 一 个 子 元 素 ， 会 认为 它 是 奇数 元 素 ， 匹 配 的 是 3n+1， 而 不 是 3n。 要 
和 “:even” 以 及 “:odd” 过 滤器 区 分 开 来 ， 后 者 匹配 的 序号 是 从 0 开 
始 的 。 

匹配 列表 中 奇数 (从 0 开始 ) 序号 的 元 素 。 注 意 序号 为 1 和 3 的 元 素 分 
别 是 第 2 个 和 第 4 个 匹配 元 素 (jQuery 的 扩展 ) 


匹配 那些 是 其 父 节 点 唯一 子 节点 的 元 素 
匹配 是 父 节 点 的 元 素 ， 这 与 “:empty” 相 反 (jQuery 的 扩展 ) 
匹配 <input type="password"> 元 素 (jQuery 的 扩展 ) 


过 洲 需 含义 


:radio 匹配 (input type="Tadio"> 元 素 (jQuery 的 扩展 ) 

‘reset 匹配 input type="reset"> 和 <button type="Teset"> 匹 素 (jQuery 的 
扩展 ) 

:selected 匹配 选中 的 coption> 元 素 。 使 用 “:checked” 来 选取 选中 的 复 选 框 和 
单 选 框 (jQuery 的 扩展 ) 

:submit 匹配 (input type="submit"> 和 <button type="submit"》 元 系 (jQuery 
的 扩展 ) 

:text 匹配 (input type="text"》 元 素 (jQuery 的 扩展 ) 

‘visible 匹配 所 有 当前 可 见 的 元 素 ， 大 体 上 可 以 认为 这 些 元 素 的 offsetWidth 


和 offsetHeight 的 值 不 为 9， 这 和 “:hidden 相反 


注意 : 表 19-1 中 列举 的 部 分 选择 器 在 圆 括号 中 接受 参数 。 例 如 ， 下 
面 这 个 选择 器 选取 的 元 素 在 其 父 节 点 的 子 元 素 中 排行 第 1 或 第 2 等 ， 只 要 
它们 含有 "JavaScript" 单 词 ， 束 不 包含 a 二 元 素 。 








p:nth-child(3n+1):text(Javascript):not(:has(a)) 








通常 来 襄 ， 指 定 标 签 类 型 前 经， 可 以 让 过 滤器 的 运行 更 高 效 。 例 
如 ， 不 要 简单 使 用 ":radio" 来 选取 单 选 框 按钮 ， 使 用 "input:radio" 会 更 
好 。ID 过 滤器 是 个 例外 ， 不 添加 标签 前 级 时 它 会 更 高 效 。 例 如 ， 选 择 
器 "#address" 通 常 比 更 明确 的 "form#address" 蝎 高 效 。 


2. 组 合 选 择 器 
使 用 特殊 操作 符 或 “组 合 符 ” 可 以 将 简单 选择 器 组 合 起 来 ， 表 达 文 档 


树 中 元 素 之 间 的 关系 。 表 19-2 列 举 了 jQuery 文 持 的 组 合 选择 器 。 这 些 组 
合 选择 圳 与 CSS3 文 持 的 组 合 选择 器 是 一 样 的 。 





表 19.2， jQuery 的 组 合 选择 器 
组 合 万 式 。 含义 


AB 从 匹配 选择 器 A 的 元 素 的 子孙 元 素 中 ,选取 匹配 选择 器 B 的 文档 元 素 。 注 
意 在 这 种 组 合 方式 下 ， 组 合 符 就 是 空白 字符 

人 >》 从 匹配 选择 器 A 的 元 素 的 子 元 素 中 ， 选 取 匹 配 选 择 细 B 的 文档 元 素 

A+B 从 匹配 选择 器 A 的 元 素 的 下 一 个 兄弟 元 素 (忽略 文本 节点 和 注释 ) 中 ， 进 
取 匹 配 选 择 器 B 的 文档 元 素 

A"B 从 匹配 选择 器 A 的 元 素 后 面 的 兄弟 元 素 中 ,选取 匹配 选择 器 B 的 文档 元 素 


下 面 是 组 合 选 择 右 的 一 些 例子 : 





"blockquote i"// 匹 配 <blockquote 过 里 的 <i> 元 素 
"ol>1i" // 三 1 元 素 是 <01 的 直接 了 元 = 
"#0Utput+*"//id="output" 元 素 后面 的 兄弟 
"div,note>h1+p"// 紧 跟 二 h1> 的 <p> 元 素 ， IN class="note" 之 里 面 












































注意 组 合 选择 器 并 不 限于 组 合 两 个 选择 器 ; 组 合 三 个 甚至 更 多 选择 
器 也 是 允许 的 。 组 合 选 择 器 从 左 到 右 处 理 。 


3. 选 择 器 组 


传递 给 $0 函数 或 在 样式 表 中 使 用 〉 的 选择 器 就是 选择 器 组 ， 这 

个 去 号 分 隔 的 列表 ， 由 一 个 或 多 个 简单 选择 器 或 组 合 选择 器 构成 。 选 
择 磊 组 匹配 的 元 素 只 要 匹配 该 选择 器 组 中 的 任何 一 个 选择 器 束 行 。 对 我 
Da ne 下 面 是 选择 需 组 
一些 例 子 : 








"hl1, h2,h3"7// 匹 配 <h1>、<h2> 和 <h3 之 元 素 
"#p1,#p2,#p3"// 匹 配 id 为 pl1、p2 或 p3 的 元 素 
"div.notep.note"// 匹 配 class="note" 的 <div 之 和 所 p 之 元 素 
"body>p,div.note>p"/V/<body> 和 <<div class="note" 的 <p 二 子 元 素 














注意 : CSS 和 jQuery 选择 器 语法 允许 在 简单 选择 器 的 某 些 过 滤器 中 
使 用 圆 括 号 ， 但 并 不 允许 使 用 圆 括号 来 进行 更 常见 的 分 组 。 例 如 ， 不 能 
把 选择 器 组 或 组 合 选 择 器 放 在 圆 括 号 中 并 且 当 成 简单 选择 器 : 





(h1, h2,h3)+p// 非 法 
h1+p, h2+p, h3+p// 正 确 的 写法 





19.8.2 ”选取 方法 


除了 $0 函数 支持 的 选择 器 语法 ，jQuery 还 定义 了 一 些 选取 方法 。 本 
草 中 我 们 已 看 到 过 的 大 部 分 jQuery 方法 都 是 在 选中 元 系 上 执行 东 种 操 
作 。 选 取 方法 不 一 样 : 它们 会 修改 选中 元 素 集 ， 对 其 进行 提取 、 扩 充 或 
仅 作 为 新 选取 操作 的 起 点 。 


本 市 插 述 这 些 选取 方法 。 你 会 注意 到 这 些 选 取 方 法 中 的 多 数 提供 的 
功能 与 选择 需 语 法 的 功能 是 一 样 的 。 


提取 选中 元 素 最 简单 的 方式 是 按 位 置 提 取 。first0 返 回 的 jQuery 对 象 
仅 包含 选中 元 素 中 的 第 一 个 ，last0 返 回 的 jQuery 对 象 则 只 包含 最 后 一 个 
元 素 。 更 通用 的 是 ，eq() 方 法 返回 的 jQuery 对 象 只 包含 指定 序号 的 单个 
选中 元 素 。“〈 在 jQuery ”1.4 中 ， 负 序号 也 是 允许 的 ， 会 从 选区 的 末尾 开 
人 计数 。) 注意 这 些 方法 返回 的 jQuery 对 象 只 含有 一 个 元 素 。 这 与 常见 








var paras=$("p"); 

paras.first()// 仅 选取 第 一 个 <p 二 元 素 
paras .1last()// 仅 选取 最 后 一 个 <p 二 
paras.eq(1)// 选 取 第 二 个 <p> 
paras.eq( -2)// 选 取 倒数 第 二 个 <p> 
paras[1]// 第 二 个 <p 二 元 素 自 身 








通过 位 置 提取 选区 更 通用 的 方法 是 slice0。jQuery 的 slice0) 方 法 与 
Array.slice() 方 法 类 似 : 前 者 接受 开始 和 结束 序号 〈 负 序号 会 从 结尾 处 计 
算 ) ， 返 回 的 jQuery 对 象 包 含 从 开始 到 结束 序号 〈 但 不 包含 结束 序号 ) 
2 

几 系 : 








$("p") ,slice(2,5)// 选 取 第 3 个 、 第 4 个 和 第 5 个 <p> 元 素 
$("div") .slice(-3)// 选 取 最 后 3 个 二 div> 元 素 














filterO 是 通用 的 选区 过 滤 方 法 ， 有 3 种 调用 方式 ; 


.传递 选择 器 字符 串 给 filter0， 它 会 返回 一 个 jQuery 对 象 ， 仅 包含 也 
匹配 该 选择 器 的 选中 元 素 。 


.传递 另 一 个 jQuery 对 象 给 filter0， 它 会 返回 一 个 新 的 jQuery 对 象 ， 
该 对 象 包 含 这 两 个 jQuery 对 象 的 交集 。 也 可 以 传递 元 素数 组 其 至 单一 文 
档 元 素 给 filter()。 


传递 判断 函数 给 他 ter()， 会 为 每 一 个 逻 配 元 素 调 用 该 函数 ，filter() 
则 返回 一 个 jQuery 对 象 ， 仅 包含 判断 函数 为 tue〈 或 任意 真 值 ) 的 元 
系 。 在 调用 判断 函数 时 ，this 值 为 当前 元 素 ， 人 参数 是 元 素 序 号 。 (参考 
19.7 节 中 的 jQuery.grep0) 














$("div").filter(".note")// 与 $("div.note")— 样 
$("div").filter($(".note"))// 与 $("div.note")— 样 
$("div").filter(function(idx){return idx%2==0})// 与 $("div:even") 一 样 








not() 方 法 与 flter() 一 样 ， 除 了 含义 与 flter0 相 反 。 如 果 传 递 选择 器 字 
符 串 给 not0， 它 会 返回 一 个 新 的 jQuery 对 象 ， 该 对 象 只 包含 不 匹配 该 选 
择 器 的 元 素 。 如 果 传 递 jQuery 对 象 、 元 素数 组 或 单一 元 素 给 not0)， 它 会 

返回 除了 显 式 排除 的 元 素 之 外 的 所 有 选中 元 素 。 加 果 信 断 因数 给 
not()， 该 判断 函数 的 调用 就 与 在 iterO0) 中 一 样 ， 只 是 返回 的 jQuery 对 象 
仪 包含 那些 使 得 判断 函数 返回 false 或 其 他 假 值 的 元 素 : 





$("div").not("#header,#footer");// 除 了 两 个 特殊 元 素 之 外 的 所 有 二 div 之 元素 








在 jQuery ”1.4 中， 提取 选区 的 男 一 种 方式 是 has() 方 法 。 如 果 传 入 选 
择 器 ，has0 会 返回 一 个 新 的 jQuery 对 象 ， 仅 包含 有 子孙 元 素 匹 配 该 选择 
器 的 选中 元 素 。 如 果 传 入 文档 元 素 给 has0， 它 会 将 选中 元 素 集 调整 为 那 
些 是 指定 元 素 祖先 节点 的 选中 元 素 : 








$("p").has("a[href]")// 包 含 链接 的 段落 





add() 方 法 会 扩充 选区 ， 而 不 是 对 其 进行 过 滤 或 提取 。 可 以 将 传 给 
$0 函数 的 任何 参数 (除了 函数 〉 照样 传 给 add() 方 法 。add() 方 法 会 返回 
原来 的 选中 元 素 ， 加 上 传 给 $0 函 数 的 那些 参数 所 选中 《或 创建 ) 的 那些 
元 素 。add0 会 移 除 重复 元 隶 ， 并 对 该 组 合 选 区 进行 排序 ， 以 便 里 面 的 元 
素 按照 文档 中 的 顺序 排列 : 






































// 选 取 所 有 <div 之 和 所 有 <p> 元 素 的 等 价 方式 
$("div,p")// 使 用 选择 器 组 
$("div").add(p)// 给 add( ) 传 入 选择 器 
$("div").add($("p"))// 给 add() 传 入 jQuery 对 象 

var paras=document .getElementsByTagName("p");// 类 数组 对 象 
$("div").add(paras);// 给 add( ) 传 入 元 素数 组 




















1. 将 选中 元 素 集 用 做 上 下 文 


上 面 描 述 的 filter0、add0、 和 not0 方 法 会 在 各 自 的 选中 元 素 集 上 的 
行 交 集 、 并 集 和 差 集运 算 。jQuery 还 定义 一 些 其 他 选取 方法 可 将 当前 选 
中 元 素 集 作 为 上 下 文 来 使 用 。 对 选中 的 每 一 个 元 素 ， 这 些 方法 会 使 用 该 
选中 元 素 作 为 上 下 文 或 起 始点 来 得 到 新 的 选中 元 素 集 ， 然 后 返回 一 个 新 
的 jQuery 对 象 ， 包 含 所 有 新 的 选中 元 素 的 并 集 。 与 add(0) 方 法 类 似 ， 会 移 
除 重 复元 素 并 进行 排序 ， 以 便 元 素 会 按照 在 文档 中 出 现 的 顺序 排列 好 。 


该 类 别 选取 方法 中 最 通用 的 是 find0。 它 会 在 每 一 个 当前 选中 元 素 
的 子孙 元 素 中 寻找 与 指定 选择 器 字符 串 匹 配 的 元 素 ， 然 后 它 返回 一 个 新 
的 jQuery 对 和 象 来 代表 所 匹配 的 子孙 元 素 集 。 注 意 这 些 新 选中 的 元 素 不 会 
并 入 已 存在 的 选中 元 素 集 中 。 同 时 注意 find0 和 filter(0 不 同 ，filter0 不 会 
选中 新 元 素 ， 只 是 简单 地 将 当前 选中 的 元 素 集 进行 缩减 : 





























$("div").find("p")// 在 <div 二 中 查找 <p 二 元 素 ， 与 $("div p") 相 同 











该 类 别 中 的 其 他 方法 返回 新 的 jQuery 对 象 ， 代 表 当 前 选中 元 素 集中 
每 一 个 元 素 的 子 元 系 、 兄 第 元 素 或 父 元 系 。 大 部 分 都 接受 可 选 的 选择 器 
字符 串 作 为 参数 。 不 传 入 选择 圳 时 ， 它 们 会 返回 所 有 子 元 素 、 兄 弟 元 素 
或 父 元 素 。 传 入 选择 器 时 ， 它 们 会 过 滤 元 素 集 ， 仅 返回 匹配 的 。 


children() 方 法 返回 每 一 个 选中 元 素 的 直接 子 元 系 ， 可 以 用 可 选 的 选 
择 器 参数 进行 过 滤 : 

















// 寻 找 id 为 "header" 和 "footer" 元 素 的 子 节 点 元 素 中 的 所 有 二 span 二 元 素 
// 与 $("#header 之 span,#footer> 之 span" ) 相 同 
$("#header,#footer").children("span") 





contents() 方 法 与 children() 方 法 类 似 ， 不 同 的 是 它 会 返回 每 一 个 元 素 
的 所 有 子 节 点 ， 包 括 文 本 节点 。 如 果 选 中 元 素 集中 有 到 iframe 之 元 素 ， 
contents(0) 还 会 返回 该 生 ifame> 之 内 容 的 文档 对 象 。 注 意 contents() 不 接受 
可 选 的 选择 器 字符 串 参 数 一 -一 因为 它 返回 的 文档 节点 不 完全 是 元 素 ， 而 
选择 器 字符 串 仅 用 来 描述 元 素 节 点 。 


next() 和 prev() 方 法 返回 每 一 个 选中 元 素 的 下 一 个 和 上 一 个 兄 第 元 素 
《如 果 有 的 话 ) 。 如 果 传 入 了 选择 器 ， 会 只 选中 匹配 该 选择 器 的 兄 第 元 


. 
人 ~ 














$("h1") .hext("p")// 与 $("h1i+p") 相 同 
$("h1") .prev()//<h1> 元 素 前 面 的 兄弟 元 素 
































nextAl10 和 prevAl10 返 回 每 一 个 选中 元 系 前 面 或 后 面 的 所 有 兄弟 元 
素 〈 如 果 有 的 话 ) 。 siblingsO) 方 法 则 返回 每 一 个 选中 元 素 的 所 有 兄弟 元 
素 〈 选 中 元 素 本 身 不 是 自己 的 兄弟 元 素 ) 。 如 果 给 这 些 方法 传 入 选择 
器 ， 则 只 会 返回 匹配 的 兄弟 元 素 : 


























$("#footer").nextAll("p")// 紧 跟 #footer 元 素 的 所 有 二 p 二 兄弟 元 素 
$("#footer").prevAll( )//#footer 元 素 前 面 的 所 有 兄弟 元 素 












































从 jQuery ” 1.4 开始 ，nextUntil() 和 prevUntil0 方 法 接受 一 个 选择 器 参 
数 ， 会 选取 选中 元 素 后 面 或 前 面 的 所 有 兄弟 元 素 ， 直 到 找到 某 个 匹配 该 
选择 器 的 兄弟 元 素 为 止 。 如 果 省 略 该 选择 器 ， 这 两 个 方法 的 作用 就 和 不 
带 选 择 器 的 nextAll0 和 prevAll0 一 样 。 


parent(0 方 法 返回 每 一 个 选中 元 素 的 父 节 点 : 











$("1i").parent()/V/ 列 表 元 素 的 父 节 点 ， 比 如 科 uUL> 和 扫 o01 之 元 素 





parents() 方 法 返回 每 一 个 选中 元 素 的 祖先 节点 (同上 直到 <<html> 
元 素 ) 。parent() 和 parents() 都 接受 一 个 可 选 的 选择 器 字符 串 参 数 : 





$("a[href]").parents("p")// 含 有 链接 的 本 p> 之 元 素 

















parentsUntilO 返 回 每 一 个 选中 元 素 的 祖先 元 素 ， 直 到 出 现 匹 配 指定 
选择 器 的 第 一 个 祖先 元 素 。closest(0) 方 法 必须 传 入 一 个 选择 器 字符 串 ， 
会 返回 每 一 个 选中 元 素 的 祖先 元 素 中 区 配 该 选择 器 的 最 近 一 个 祖先 元 素 
《如 末 有 的 话 ) 。 对 该 方法 而 言 ， 元 素 被 认为 是 自身 的 祖先 元 素 。 在 
jQuery 1.4 中 ， 还 可 以 给 closest() 传 入 一 个 祖先 元 素 作 为 第 二 个 参数 ， 用 
来 阻止 jQuery 往 上 查找 时 超越 该 指定 元 素 : 





























里 层 <div>> 
$("a[href]").parentsUntil(":not(div)")// 所 有 包 庄 <a 二 的 <div 元 素 


$("a[href]").closest("div")// 包 含 链接 的 最 里 


























2. 恢 复 到 之 前 的 选中 元 素 集 


为 了 实现 方法 的 链 式 调用 ， 很 多 jQuery 对 象 的 方法 最 后 都 会 返回 调 
用 对 象 。 然 而 本 市 讲述 的 方法 都 返回 新 的 jQuery 对 象 。 可 以 链 式 调用 下 
去 ， 但 必须 清晰 地 意识 到 ， 在 链 式 调用 的 后 面 所 操作 的 元 素 集 ， 可 能 
经 不 是 该 链 式 调用 开始 时 的 元 素 集 了 。 


实际 情况 还 要 复杂 些 。 当 这 里 所 描述 的 选取 方法 在 创建 或 返回 一 个 
新 的 jQuery 对 象 时 ， 它 们 会 给 该 对 象 添加 一 个 到 它 派 生 自 的 旧 jQuery 对 
象 的 内 部 引用 。 这 会 创建 一 个 jQuery 对 象 的 链 式 表 或 栈 。end0 方 法 用 来 
弹出 栈 ， 返 回 保存 的 jQuery 对 象 。 在 链 式 调用 中 调用 end0) 会 将 匹配 元 素 
集 还 原 到 之 前 的 状态 。 考 虑 以 下 代码 : 









































// 寻 找 所 及 div> 之 元 素 ， 然 后 在 其 中 寻找 <p 之 元 素 

// 高 亮 显示 雪 p 之 元素， 然后 给 天 div 之 元 素 添 加 一 个 边框 
// 首 先 ， 不 使 用 链 式 调 用 
var divs=$("div"); 

var paras=div.find("p"); 
paras.addClass(' ‘highlight" ) 2 













































































divs. css(! 'border", "solid black 1px");// 下 面 展 现 如 何 使 用 链 式 调 

$("div").find("p' '). addClass("highlight").end().css("border","solid black 1px");// 
还 可 以 将 操作 调换 顺序 来 避免 调用 end( ) 

$("div").css("border","solid block 1ipx").find("p").addCclass("highlight"); 
























































如 果 想 手动 定义 选中 元 素 集 ， 同 时 保持 与 end() 方 法 的 兼容 ， 可 以 将 
新 的 元 素 集 作为 数组 或 类 数组 对 象 传递 给 pushStack() 方 法 。 指 定 的 元 素 
会 成 为 新 的 选中 元 素 ， 之 前 选中 的 元 素 集 则 会 压 入 栈 中 ， 之 后 可 以 用 

end0) 方 法 还 原 它 们 : 





var sel=$("div") ;// 选 取 所 有 <div 之 元 素 
sel.pushstack(document .getElementsByTagName("p"));// 修 改 为 所 有 二 p 二 元 素 
sel.end() ;// 还 原 为 二 div> 元 素 





























既然 我 们 已 经 讲解 了 end0) 方 法 及 其 使 用 的 选区 栈 ， 就 有 最 后 一 个 方 
法 需要 讲解 。andSelfO 返 回 一 个 新 的 jQuery 对 象 ， 包 含 当前 的 所 有 选中 
元 素 ， 加 上 之 前 的 所 有 选中 元 素 〈 会 去 除 重 复 的 ) 。andSelfO0 和 add0) 方 
法 一 样 ， 或 许 "addPrev" 是 一 个 更 具 描 述 性 的 名 字 。 作 为 例子 ， 
代码 的 下 述 变 化 ， 高 亮 显 示 过 p 之 元 素 及 其 父 节 点 中 的 和 div 之 元 素 ， 然 
后 给 这 些 二 div 二 元素 添 加 边框 : 




















$("div"). find(" p").andSelf().// 和 寻找 <div 二 中 的 <p 二 ,合并 起 来 
addclass("highlight").// 都 高 亮 

end().end(). // 弹 出 栈 两 次 ， 返回 $ ("div" 
css("border", "solid black 1px");// 给 divs 添 加 边框 


19.9 ”jQuery 的 插件 扩展 


jQuery 的 写法 使 得 添加 新 功能 很 方便 。 添 加 新 功能 的 模块 称 为 插件 
(plug-in) ， 可 以 在 这 里 找到 很 多 插件 : http://plugins.jquery.com。 
jQuery 插件 是 普通 的 JavaScript 代 码 文件 ， 在 网 页 中 使 用 时 ， 只 需要 用 去 
script 二 元素 引 入 就 好 ， 就 ipt 类 库 一 样 ( 注 意 ， 
必须 在 jQuery 之 后 引入 插件 ) 。 

开发 jQuery 插件 非常 简单 。 关 键 点 是 要 知 证 0 


对 象 的 原型 对 象 。 如 果 给 该 对 象 添加 一 个 函数 ， 该 函数 会 成 为 一 
jQuery 方法 。 例 子 如 下 : 






























































jQuery .fn.println=function(){// 将 所 有 参数 合 并 成 裤 格 分 隔 的 字符 串 
var msg=Array.prototype.join.calL(arguments,"")， // 遍 历 jQuery 对 象 中 的 每 一 个 元 素 
this ,each(function(){// 将 参数 字符 串 作 为 纯 文 本 添加 到 每 一 个 元 素 后 面 ， 并 添加 一 个 <br/> 
jQuery(this).append(document.createTextNode(msg).append(' 二 ) ) ， 
});// 返 回 这 个 未 加 修改 的 jQuery 对 象 ， 以 便 链 式 调用 
return this; 


} 







































































通过 上 面 对 jQuery.fn.printIn() 函 数 的 定义 ， 我 们 可 以 在 任何 jQuery 
对 象 上 类 似 如 下 调用 printIn0 方 法 了 : 





$("#debug").println("x=",x,";y=",y); 





这 是 添加 新 方法 到 jQuery.fn 中 的 常见 开发 方式 。 如 果 友 现 自己 在 使 
用 each(0) 方 法 “手动 ” 山 历 jQuery 对 象 中 的 元 素 ， 并 在 元 系 上 执行 某 些 操作 
时 ， 就 可 以 问 问 自己 ， 是 否 可 以 将 代码 重 构 一 下 ， 使 得 这 些 each() 回 调 
移动 到 一 个 扩展 方法 里 归 。 在 开发 扩展 功能 时 ， 如 果 遵 守 基 本 的 模块 化 
代码 实践 ， 以 及 遵守 jQuery 特定 的 一 些 传统 约定 ， 束 可 以 将 该 扩展 称 为 
插件 ， 并 与 他 人 分 享 。 下 面 是 一 些 值得 留意 的 jQuery 插件 约定 : 


不 要 依赖 $ 标 识 符 : 包含 的 页 面 有 可 能 调用 JU 
数 ，$() 可 能 不 再 等 同 于 jQuery0 函 数 。 在 上 面 这 种 简短 的 插件 里 ， 只 要 
使 用 jQuery 代 蔡 $ 就 行 。 如 果 开 发 的 扩展 很 长 ， 则 最 好 用 一 个 匿名 函数 
将 扩展 代码 都 包装 起 来 ， 以 避免 创建 全 局 变量 。 如 果 这 样 做 ， 可 以 将 
jQuery 作为 参数 传递 给 匿名 函数 ， 参 数 名 采用 $: 











人 
// 在 此 书写 插件 代码 
}(jQuery) ) ;// 使 用 jQuery 对 象 作为 参数 调用 该 匿名 函数 
























































.如果 揪 件 代码 不 返回 自己 的 值 ， 请 确保 返回 jQuery 对 象 以 便 链 式 调 
用 。 通 常 这 就 是 this 对 象 ， 只 要 不 加 修改 地 返回 即 可 。 在 上 面 的 例子 
中 ， 方 法 末尾 是 "retum this;" 代 人 码 行 。 遭 循 jQuery 的 另 一 个 习俗 ， 人 
上 面 的 方法 更 简短 些 〈 可 读 性 低 一 些 ) : 返回 each() 方 法 的 结果 。 
样 ，printin(0) 方 法 会 包含 代码 "return this.each(functionO{...});"。 


如果 扩展 方式 拥有 两 个 以 上 参数 或 配置 选项 ， 请 允许 用 户 能 使 用 
对 象 的 方式 传递 选项 (就 如 我 们 在 19.5.2 节 看 到 的 animate() 方 法 和 在 
19.6.3 节 看 到 的 jQuery.ajax0 函 数 一 样 ) 。 


:不 要 污染 jQuery 方法 的 命名 空间 。 优 雅 的 jQuery 插件 会 用 一 套 有 用 
的 API 定 义 最 少量 的 方法 。 通 常 ， 一 个 jQuery 插件 只 会 在 jQuery.fn 上 定 
义 一 个 方法 。 该 方法 会 接受 字符 串 作 为 第 一 个 参数 ， 人 然后 将 该 字符 串 作 
为 冰 数 名 解析 ， 然 后 将 剩余 参数 传 给 该 解析 函数 。 当 可 以 将 插件 限定 为 
一 个 方法 时 ， 该 方法 名 应 该 与 插件 同名 。 如 果 需 要 定义 多 个 方法 ， 则 使 
用 插件 名 作为 每 一 个 方法 名 的 前 绥 。 


:如果 插 件 需 要 绑 定 事件 处 理 程序 ， 请 将 所 有 这 些 处 理 程序 放 在 事 
件 命名 空间 中 《参见 19.4.4 六 ) 。 使 用 插件 名 作为 命名 空间 名 。 











:如果 插 件 需要 使 用 data0) 方 法 与 元 素 关 联 数据 ， 请 将 所 有 数据 值 放 
在 单一 对 象 中 ， 然 后 用 与 插件 名 相同 的 键 值 将 该 对 象 作为 单一 值 存储 。 


.用 "jquery.plugin.js" 这 种 文件 命名 方式 保存 插件 代码 到 一 个 文件 中 
(将 "plugin" 蔡 换 为 插件 名 ) 。 


插件 可 以 给 jQuery 目 身 增加 函数 来 添加 新 的 工具 函数 。 例 如 : 






































// 该 方法 输出 其 参数 (使 用 printlin( ) 插 件 方法 ) 
// 到 id 为 "debug" 的 元 素 上 。 如 果 不 存在 该 元 素 ， 则 创建 一 个 并 添加 到 文档 中 
jQuery .debug=function(){ 

var elt=jQuery("#debug");// 查 找 #debug 元 素 

if(elt. 1ength==9){// 如 果 它 不 存在 则 创建 之 

elt=jQuery("<div id='debug'>><hi>Debugging Output=<=/hi></div>"); 
jQuery(document .body).append(elt); 














Ee 

















} 
elt .println.apply(elt,arguments);// 将 参数 输出 到 元 素 中 
}; 





除了 定义 新 方法 ， 还 可 以 扩展 jQuery 关 库 的 其 他 部 分 。 例 如 ， 在 
19.5 节 中 ， 我 们 已 经 看 到 可 以 通过 给 jQuery.fx.speeds 添 加 属性 来 扩充 新 
的 动画 时 长 名 (除了 "fast" 和 "slow") ， 也 可 以 通过 给 jQuery.easing 添 加 
属性 来 添加 新 的 绥 动 函数 。 插 件 甚至 可 以 扩展 jQuery 的 CSS 选 择 器 引 
擎 ! 可 以 通过 给 jQuery.expr[":"] 对 象 添加 属性 来 添加 新 的 伪 类 过 滤器 〈 比 
如 : first 和 :input) 。 下 面 这 个 例子 定义 了 一 个 新 的 :draggable 过 滤器 ， 可 
用 来 仅 返 回 拥有 draggable= true 属 性 的 元 素 : 








jQuery.expr[':'].draggable=function(e){return e.draggable===true,;}; 





使 用 上 面 定 义 的 这 个 选择 器 ， 可 以 用 $("img:draggable") 来 选取 可 拖 
上 忠 的 图 片 ， 而 不 用 使 用 见长 的 $("img[draggable=true]")。 


从 上 面 的 代码 中 可 以 看 到 ， 自 定义 选择 器 水 数 的 第 一 个 参数 是 候选 
的 DOM 元 素 。 如 果 访 元素 匹 配 选 择 器 ， 则 返回 true; 否则 返回 false。 许 
多 目 定 义 选 择 需 只 需要 这 一 个 元 系 参 数 ， 但 实际 上 在 调用 它们 时 传 入 了 
4 个 参数 。 第 二 个 参数 是 整数 序号 ， 表示 当前 元 素 在 候选 元 素数 组 中 的 
位 置 。 候 选 元 素数 组 作为 第 4 个 参数 传 入 ， 选 择 器 不 应 该 修改 它 。 第 三 
个 参数 很 有 趣 的 : 这 是 调用 RegExp. exec() 方 法 后 返回 的 数组 。 如 果 有 的 
话 ， 该 数组 的 第 4 个 元 素 (序号 是 3) 是 伪 类 过 滤器 后 面 的 圆 括 号 中 的 
值 。 圆 括号 和 里 面 的 任何 引号 都 去 除了 ， 只 留 下 参数 字符 串 。 下 面 是 一 


























个 例子 ， 用 来 说 明 如 何 实现 一 个 :data(x) 伪 类 ， 该 伪 类 只 在 元 素 拥 有 data- 
x 属性 时 返回 true (参考 15.4.3 节 ) : 


jQuery.expr[':'].data=function(element,index,match,array){// 注 意 : IE7 及 其 以 下 版 本 不 
支持 hasAttribute() 
return element.hasAttribute("data-"+match[3]); 








19.10 jQuery UI 类 库 


jQuery 限定 自己 只 提供 核心 DOM、CSS、 事 件 处 理 以 及 Ajax 功能 。 
这 提供 了 一 个 很 棒 的 基础 ， 可 用 来 构建 高 层面 的 抽象 ， 比 如 用 户 界 面 组 
件 ，jQuery UI 类 库 就 是 这 么 做 的 。 对 jQuery UI 做 全 面 讲述 不 属于 本 书 的 
范畴 ， 在 此 我 们 只 会 简单 概要 地 介绍 它 。 该 类 库 及 其 文档 可 以 在 这 里 找 
到 : http:/jqueryui.com 。 


类 如 其 名 ，jQuery UI 定义 了 一 些 用 户 界 面 组 件 ， 输入 区 域 的 目 动 完 
成 、 输 入 日 期 的 日 期 选取 器 、 用 来 组 织 信息 的 手风琴 和 标签 页 、 可 视 化 
展现 数字 的 滑 块 和 进度 条 ， 以 及 用 来 和 用 户 紧 急 通 信 的 模 态 对 话 框 。 除 
了 这 些 组 件 ，jQuery UI 还 实现 了 更 一 般 化 的 “交互 >， 可 以 使 得 任何 文档 
元 素 轻 松 束 实现 可 拖 上 忠 、 可 放置 、 可 改变 大 小 、 可 选取 或 可 排序 。 最 
后 ，jQuery UI 还 给 jQuery 上 自身 的 效果 方法 提供 了 一 些 新 的 视觉 效果 方法 
《还 使 得 可 以 变化 颜色 ) ， 同 时 定义 很 多 新 的 缓 动 函 数 。 


可 以 把 jQuery UI 想象 成 一 组 相关 的 jQuery 插件 ， 只 是 最 后 打包 成 一 
个 JavaScript 文 件 。 要 使 用 它 很 简单 ， 在 网 页 中 ， 将 jQuery UI 脚本 放 在 
jQuery 代码 后 面 引入 进来 就 行 。 下 载 页 面 http://jqueryui.com 人 允许 选取 计 
划 使 用 的 组 件 ， 然 后 会 构建 一 个 目 定 义 的 下 载 包 ， 与 整个 jQuery UI 类 库 
相 比 ， 这 可 以 减少 页 面 的 加 载 时 间 。 


jQuery UI 是 完全 皮肤 化 的 ， 它 的 皮肤 直接 采用 CSS 文 件 的 形式 。 
此 除了 要 加 载 jQuery UI 的 JavaScript 代 人 码 到 网 页 中 ， 还 需要 引入 选中 皮 
肤 的 CSS 文 件 。jQuery UI 站 点 标注 了 一 些 预 先 打包 好 的 皮肤 包 ， 还 有 一 
个 “皮肤 工作 坊 ” 页 面 ， 可 以 让 你 自 定 义 和 下 载 自己 的 皮肤 。 


jQuery UI 组 件 和 区 互 功能 采用 jQuery 插件 的 方法 构建 ， 每 一 个 都 定 
义 一 个 jQuery 方法 。 通 常 ， 在 已 存在 的 文档 元 素 中 调用 该 方法 时 ， 会 将 
该 元 素 转化 为 组 件 。 例 如 ， 要 改变 输入 文本 ， 以 便 在 单 击 或 聚焦 文本 输 




















时 它 要 弹出 一 个 日 期 选取 组 件 ， 直 接 用 下 面 的 代码 调用 datapicker() 
束 行 : 











// 将 class="date" 的 <input> 元 素 转 化 成 日 期 选取 组 件 
$("input.date").datepicker(); 











要 想 灵 活 自 如 地 使 用 jQuery UI 组 件 ， 需 要 熟悉 三 件 东西 ， 它 的 配置 
选项 、 它 的 方法 以 及 它 的 事件 。 所 有 jQuery UI 组 件 都 是 可 配置 的 ， 有 一 
些 组 件 有 很 多 配置 选项 。 可 以 通过 给 组 件 方法 传递 选项 对 象 〈 和 在 动画 
操作 里 ， 传 递 选项 对 象 给 animate(O) 类 似 ) 来 自 定义 组 件 的 行为 和 外 观 。 


jQuery UI 组 件 通 第 会 定义 至 少 有 几 个 “方法 ”来 与 组 件 交 互 。 但 是 ， 
为 了 避免 jQuery 方法 的 迅速 增多 ，jQuery UI 组 件 不 会 将 它们 的 “方法 ” 定 
义 成 真正 的 方法 。 每 个 组 件 只 会 有 一 个 方法 (与 上 例 中 的 datapicker() 方 
法 一 样 ) 。 当 需要 调用 组 件 的 一 个 “方法 "时 ， 需 要 给 该 组 件 定义 的 真正 
方法 传递 预期 “方法 ”的 名 称 。 例 如 ， 想 要 禁用 日 期 选取 组 件 ， 不 能 调用 
disableDatapicker() 方 法 ， 而 需要 调用 datepicker("disable")。 


jQuery UI 组 件 通常 会 定义 自 定义 事件 ， 啊 应 用 户 交 互 时 触发 它们 。 
可 以 使 用 常用 的 bind0 方 法 来 给 这 些 目 定 义 事件 绑 定 事件 处 理 程序 ， 通 
常 还 可 以 将 事件 处 理 程序 函数 作为 选项 对 象 的 属性 ， 访 选项 对 象 会 传递 
给 组 件 方法 。 事 件 处 理 程序 的 第 一 个 参数 依旧 是 Event 对 象 。 东 些 组 件 
还 会 传递 一 个 "UI" 对 象 作为 事件 处 理 程序 的 第 二 个 参数 。 该 对 象 通常 提 
供 了 当前 组 件 的 状态 信息 。 


注意 ，jQuery ”UI 文档 中 有 时 摘 述 的 “事件 ”并 不 是 真正 的 自 定 义 事 
件 ， 可 能 描述 为 回调 函数 会 更 好 ， 这 些 回 调 函 数 是 通过 配置 选项 对 象 设 
置 的 。 例 如 ， 日 期 选取 组 件 文 持 不 少 回调 函数 ， 可 以 在 不 同 的 时 间 点 调 
用 它 。 但 是 ， 这 些 函 数 中 没有 一 个 拥有 标准 的 事件 处 理 程序 签名 ， 不 能 
使 用 bind0 来 为 这 些 “ 事 件 ?注册 处 理 程 序 。 正 确 的 做 法 是 ， 在 初始 调用 
datapicker(0) 方 法 ， 给 组 件 传递 配置 选项 时 ， 融 指定 合适 的 回调 函数 。 


[ 岂 本 书 不 涵盖 Prototype、YUI、dojo 等 其 他 通用 类 库 。 搜 索 "JavaScript 
libraries" 可 以 找到 更 多 类 库 。 

[2 如 果 你 在 自己 的 代码 中 有 使 用 $ 作 为 变量 ， 或 者 引入 了 Prototype 等 使 
用 $ 作 为 全 局 变量 的 类 库 ， 这 时 ， 为 了 避免 冲突 ， 可 以 调用 
jQuery.noConflict() 来 释放 $ 变 量 ， 让 其 指 问 原始 值 。 
































D] 在 撰写 本 章 时 ，jQuery 的 最 新 版 本 是 1.4.2。 在 本 书 准 备 出 版 时 ， 
jQuery 刚 发 布 1.5。1.5 版 本 最 大 的 变化 是 Ajax 工具 函数 ， 这 将 在 19.6 节 提 
及 。 在 本 书 翻译 成 中 文 时 ，jQuery 已 发 布 1.6.2 版 本 ， 不 过 万 物 归 宗 ， 学 
会 1.4.2 版 本 如 何 使 用 ， 跟 进 jQuery 的 最 新 版 本 ， 都 是 很 简单 的 事情 了 。 
[4ltextColor 不 对 ， 应 该 是 color。 

[5ljQuery 使 用 术语 "bind" 来 表示 事件 处 理 程序 的 注册 。ECMA Script 
5 以 及 不 少 JavaScript 框 架 ) 给 函数 定义 了 bind(0) 方 法 《参见 8.7.4 节 ) ， 
使 用 "bind" 术 语 来 表示 对 象 与 函数 之 间 的 关联 ， 这 些 函 数 会 在 这 些 对 象 
上 调用 。Function.bind() 方 法 的 jQuery 版 本 是 一 个 名 为 jQuery.proxy0 的 工 
具 函 数 ， 在 19.7 节 中 会 讲解 它 。 

[6jjQuery 的 实现 方式 不 支持 非 数值 动画 ， 但 有 其 他 实现 方案 ， 比 如 传 入 
自 定 义 的 CSS 属 性 变化 函数 。 

外 在 最 新 版 本 的 jQuery 里 ， 己 优化 了 实现 ， 采 用 eval 和 execScript 来 执 


休 。 

[8]jQuery 插 件 的 这 种 扩展 方式 是 全 局 性 的 ， 带 来 方便 的 同时 ， 也 污染 了 
ey 容易 造成 潜在 的 冲突 。 译 者 并 不 推荐 “随时 想 着 ”使 用 这 种 
广 展 方式 。 




















第 20 章 ”客户 器 人 存储 


Web 应 用 人 允许 使 用 浏览 器 提供 的 API 实 现 将 数据 存储 到 用 户 的 电脑 
上 。 这 种 客户 端 存储 相当 于 赋予 了 Web 浏 览 器 记忆 功能 。 比 方 说 ，Web 
应 用 就 可 以 用 这 种 方式 来 “ 记 住 ”用 户 的 偏好 甚至 是 用 户 所 有 的 状态 信 
恩 ， 以 便 准确 地 “回忆 ”起 用 户 上 一 次 访问 的 位 置 。 客 户 端 存 储 遵循 “ 同 
源 策略 ?， 因 此 不 同 站 点 的 页 面 是 无 法 互相 读 取 对 方 存 储 的 数据 ， 而 同 
一 站 点 的 不 同 页 面 之 间 是 可 以 互相 共享 存储 数据 的 ， 它 为 我 们 提供 了 一 
种 通信 机 制 ， 例 如 ， 一 个 页 面 上 填写 的 表单 数据 可 以 显示 在 另外 一 个 页 
面 中 。Web 应 用 可 以 选择 它们 存储 数据 的 有 效 期 : 比如 采用 临时 存储 可 
以 让 数据 保存 至 当前 窗口 关闭 或 者 浏览 器 退出 ;采用 永久 存储 ， 可 以 将 
数据 永久 地 存储 到 硬盘 上 ， 数 年 或 者 数 月 不 失效 。 


客户 端 存储 有 以 下 几 种 形式 : 
Web 存 储 


Web 存 储 最 初 作 为 HIML5 的 一 部 分 被 定义 成 API 形 式 ， 但 是 后 来 被 
剥离 出 来 作为 独立 的 一 份 标准 了 。 该 标准 目前 还 在 草案 阶段 ， 但 其 中 一 
部 分 内 容 已 经 被 包括 IE8 在 内 的 所 有 主流 浏览 器 (可 交互 地 ) 实现 了 。 
Web 存 储 标准 所 描述 的 API 包 含 localStorage 对 象 科 sessionStorage 对 和 象 ， 

这 两 个 对 象 实际 上 是 持久 化 关联 数组 ， 是 名 值 对 的 映射 

表 , “名 ”和 “ 值 ? 都 是 字符 串 。Web 存 储 易于 使 用 、 文 持 大 容量 《但 非 无 
限量 ) 数据 存储 同时 莱 容 当前 所 有 主流 浏览 器 ， 但 是 不 兼容 早期 浏览 
器 。20.1 节 会 对 localStorage 和 sessionStorage 这 两 个 对 象 作 详细 介绍 。 





























cookie 


cookie 是 一 种 早期 的 客户 端 存 储 机 制 ， 起 初 是 针对 服务 器 并 脚本 设 
计 使 用 的 。 尽 管 在 客户 端 提 供 了 非常 繁琐 的 JavaScript API 来 操作 
cookie， 但 它们 难 用 至 极 ， 而 且 只 适合 存储 少量 文本 数据 。 不 仅 如 此 ， 
任何 以 cookie 形 式 存 储 的 数据 ， 不 论 服 务 喜 端 是 否 需要 ， 每 一 次 HTTP 请 
求 都 会 把 这 些 数据 传输 到 服务 器 端 。cookie 目 前 仍然 被 客户 端 程序 员 大 
量 使 用 的 一 个 重要 原因 是 : 所 有 新 旧 浏 览 器 都 支持 它 。 但 是 ， 随 着 Web 
Storage 的 普及 ，cookie 终 将 会 回归 到 最 初 的 形态 : 作为 一 种 被 服务 端 脚 
本 使 用 的 客户 端 存 储 机 制 。20.2 节 会 详细 介绍 cookie。 





IE User Data 





微软 在 IE5 及 之 后 的 下 浏览 器 中 实现 了 它 专 属 的 客户 并 存储 机 制 
"userData"。userData 可 以 实现 一 定量 的 字符 串 数 据 存储 ， 对 于 IE8 
以 前 的 下 浏览 器 中 ， 可 以 将 其 用 做 是 Web 存 储 的 蔡 代 方案 。 关 于 
userData 的 API 会 在 20.3 节 中 进行 相应 介绍 。 


离线 Web 应 用 





HTML5 标 准 中 定义 了 一 组 “离线 web 应 用 ”API， 用 以 缓存 web 页 面 
以 及 相关 资源 〈 脚 本 、CSS 文 件 、 图 像 等 ) 。 它 实现 的 是 将 Web 应 用 整 
体 存 储 在 客户 端 ， 而 不 仅仅 是 存储 数据 。 它 能 够 让 Web 应 用 “安装 ”在 客 
户 端 ， 这 样 一 来 ， 哪 怕 网 络 不 可 用 的 时 候 Web 应 用 依然 是 可 用 的 。 离 线 
Web 应 用 相关 的 内 容 会 在 20.4 节 中 介绍 。 


Web 数 据 库 


为 了 能 够 让 开发 者 像 使 用 数据 库 那 样 来 操作 大 量 数据 ， 很 多 主流 的 
浏览 右 纷 纷 在 其 中 开始 集成 客户 端 数据 库 的 功能 。Safari、Chrome 和 
Opera 都 内 置 了 SQL 数据 库 的 客户 端 API。 遗 憾 的 是 ， 这 类 API 的 标准 化 
工作 以 失败 告终 ， 并 且 Firefox 和 I 看 样子 也 都 不 打算 实现 这 种 API。 日 
前 还 有 一 种 正在 标准 化 的 数据 库 API， 称 为 “索引 数据 库 API”(Indexed 
Database API) 。 调 用 该 API 返 回 的 是 一 个 不 包含 查询 语言 的 简单 数据 库 
对 象 。 这 两 种 客户 端 数 据 库 API 都 是 异步 的 ， 都 使 用 了 事件 处 理 机 
制 出 ， 这 样 的 方式 多 多 少 少 会 显得 有 些 复 林 。 本 章 不 会 对 它们 做 介绍 ， 
但 是 22.8 节 会 简要 介绍 索引 数据 库 API 同 时 会 提供 一 些 例子 。 


文件 系统 API 


本 书 第 8 章 介绍 过 现在 主流 浏览 器 都 支持 一 个 文件 对 象 ， 用 以 将 择 
的 文件 通过 XMLHttpRequest 上 传 到 服务 端 。 与 之 相关 的 规范 《草案 阶 
段 ) 定义 了 一 组 API， 用 于 操作 一 个 私有 的 本 地 文件 系统 。 在 该 文件 系 
统 中 可 以 进行 对 文件 的 读 写 操作 。 这 些 内 容 正 在 紧锣密鼓 标准 化 当中 ， 
这 些 API 将 在 22.7 节 中 介绍 。 随 着 这 些 API 被 广泛 地 实现 和 支持 ，Web 应 
We 这 对 于 大 部 分 程序 员 来 说 再 熟悉 
了 了 





























存储 、 安 全 和 隐私 


Web 浏 览 器 通常 会 提供 “ 记 住 Web 密 码 ” 功 能 ， 这 些 密码 会 以 加 密 的 
形式 安全 地 仓储 到 便 盘 上 上 。 然而 ， 本 党 介绍 的 任何 形式 的 客户 首 数 据 存 
储 都 不 牵涉 加 密 : 任何 存储 在 用 户 人 硬盘 上 的 数据 都 是 未 加 密 的 形式 。 这 
祥 一 来 ， 对 于 拥有 电脑 访问 权限 的 恶意 用 户 以 及 计算 机 上 存在 的 泪 和 软 
件 〈 比 如 : 间谍 软件 ) 同样 也 可 以 获取 到 存储 的 数据 。 因 此 ， 任 何 形式 
的 客户 端 存 储 不 应 该 用 来 保存 密码 、 商 业 账 号 或 者 其 他 类 似 的 敏感 信 
息 。 记 住 : 尽管 用 户 访 问 你 的 网 站 时 ， 愿 意 在 表单 中 输入 一 些 信 息 ， 但 
绝 不 代表 用 户 愿 意 将 这 些 信息 保存 到 硬盘 上 。 就 拿 信 用 卡 卡 号 来 举例 好 
了 ， 这 是 用 户 的 隐私 ， 用 户 并 不 愿意 公开 ， 如 果 你 利用 客户 端 持久 性 将 
该 信息 存储 起 来 ， 这 无 异 于 你 将 信用 卡号 写 在 一 张 便签 纸 上 ， 随 后 粘贴 
在 用 户 的 键盘 上 ， 让 所 有 人 都 看 到 。 


还 有 要 说 记 的 一 点 : 很 多 Web 用 户 不 信任 那些 使 用 cookie 和 其 他 客 
户 问 存储 机 制 来 做 类 似 “ 跟 踪 ? 功 能 的 网 站 。 所 以 ， 尽 量 符 试 用 本 章 讨 论 
的 存储 机 制 来 为 网 站 提升 用 户 体验 ;而 不 是 用 它们 来 收集 和 侵犯 隐私 相 
关 的 数据 。 如 果 网 站 滥用 客户 端 存 储 ， 用 户 将 会 禁用 该 功能 ， 这 样 一 来 
不 仅 起 不 到 效果 ， 还 会 导致 依赖 客户 并 存储 的 网 站 完全 不 可 用 。 


























20.1 localStorage 和 sessionStorage 


实现 了 “Web 存 储 ” 草 加 标准 的 浏览 器 在 Window 对 象 上 定义 了 两 个 
属性 : localStorage 和 sessionStorage。 这 两 个 属性 都 代表 同一 个 Storage 对 
象 一 一 一 个 持久 化 关联 数组 ， 数 组 使 用 字符 串 来 索引 ， 存 储 的 值 也 都 是 
字符 串 形式 的 。Storage 对 象 在 使 用 上 和 一 般 的 JavaScript 对 象 没 什么 区 
别 : 设置 对 象 的 属性 为 字符 串 值 ， 随 后 浏览 器 会 将 该 值 存储 起 来 。 
localStorage 和 sessionStorage 两 者 的 区 别 在 于 存储 的 有 效 期 和 作用 域 的 不 
同 : 数据 可 以 存储 多 长 时 间 以 及 谁 拥有 数据 的 访问 权 。 


下 面 ， 我 们 会 对 存储 的 有 效 期 和 作用 域 进 行 详细 的 解释 。 不 过 ， 在 
此 之 前 ， 让 我 们 先 来 看 些 例子 。 下 面 的 代码 使 用 的 是 localStorage， 但 是 
它 对 sessionStorage 也 同样 适用 : 














var name=localStorage.username;// 查 询 一 个 存储 的 值 
name=localStorage["username"];// 等 价 于 数组 表示 法 
if(!name){ 

name=prompt ("What is your name?");// 询 问 用 户 一 个 问题 
localSstorage.username=name;// 存 储 用 户 的 答案 

} 

// 和 迭代 所 有 存储 的 name/value 对 
for(var name :in localSstorage){f// 和 迭代 所 有 存储 的 名 字 






























































var value=localStorage[name];// 查 询 每 个 名 字 对 应 的 值 
} 





Storage 对 0 os 如 存储 、 获 取 、 裔 历 和 删除 的 方法 。 
些 方法 会 在 20.1.2 节 中 介 


“Web 和 存储 ” 草 条 标准 指出 ， 我 们 既 可 以 存储 结构 化 的 数据 (对象 和 
数组 ) ， 也 可 以 存储 原始 类 型 数据 ， 还 可 以 存储 庶 如 日 期 、 正 则 表达 式 
甚至 文件 对 象 在 内 的 内 置 类 型 的 数据 。 但 是 ， 截 全 本 书 截 稿 时 ， 浏 览 器 
仅仅 文 持 存储 字符 串 类 型 数据 。 如 果 想 要 存储 和 获取 其 他 类 型 的 数据 ， 
不 得 不 上 自己 手动 进行 编码 和 人 解码。 如 以 下 例子 所 示 : 























// 当 存储 一 个 数字 的 时 候 ， 会 把 它 自动 转换 成 一 个 字符 串 
// 但 是 ， 当 获取 该 值 的 时 候 别 忘记 了 手动 将 其 转换 成 数字 类 型 
lJocalStorage.x=10,; 
a var x= parseInt (localstorage. XxX);// 同 样 地 ， 存 储 一 个 日 期 类 型 数据 的 时 候 进 行 编码 ， 获 取 的 时 候 进 
行 解码 


localStorage.lastRead=(new Date( )).toUTCString() ， 

var lastRead=new Date(Date.parse(localStorage.lastRead));// 使 用 JSON 可 以 使 得 对 基本 数 
据 类 型 编码 的 工作 变 得 很 方便 

localstorage.data=JSON.stringify(data);// 编 码 然后 存储 

var data=JSON.parse(localStorage.data);// 获 取 数 值 之 后 再 解码 


长 














































































































20.1.1 存储 有 效 期 和 作用 域 


localStorage 和 sessionStorage 的 区 别 在 于 存储 的 有 效 期 和 作用 域 的 不 
同 。 通 过 localStorage 存 储 的 数据 是 永久 性 的 ， 除 非 Web 应 用 刻意 删除 存 
储 的 数据 ， 或 者 用 户 通 过 设置 浏览 器 配置 (浏览 器 提供 的 特定 UI 来 删 
除 ， 否 则 数据 将 一 直 保 留 在 用 户 的 电脑 上 ， 水 不 过 期 。 


localStorage 的 作用 域 是 限定 在 文档 源 (document origin) 级 别 的 。 
正如 13.6.2 节 所 介绍 的 ， 文 档 源 是 通过 协议 、 主 机 名 以 及 端口 三 者 来 确 
定 的 ， 因 此 ， 下 面 每 人 URL 都 拥 右 不 同 的 文档 尖 : 








http://www.example.com// 协 议 :http; 主 机 名 :www.example.com 
https://www.example.com// 不 同 协 议 
http://static.example.com// 不 同 主机 名 
http://www.example.com:8000// 不 同 端 口 











同 源 的 文档 间 共 享 同 样 的 localStorage 数 据 (不论 该 源 的 脚本 是 否 真 
正 地 访问 localStorage) 。 它 们 可 以 互相 读 取 对 方 的 数据 ， 甚 至 可 以 履 盖 


对 方 的 数据 。 但 是 ， 非 同 源 的 文档 间 互 相 都 不 能 读 取 或 者 履 盖 对 方 的 数 
据 《 即 使 它们 运行 的 脚本 是 来 目 同 一 全 第 三 方 服务 器 也 不 行 ) 。 


需要 注意 的 是 localStorage 的 作用 域 也 受 浏 览 器 供应 商 限制 。 如 果 你 
使 用 Firefox 访 问 站 点 ， 那 么 下 次 用 另 一 个 浏览 器 〈 比 如 ，Chrome) 再 次 
访问 的 时 候 ， 那 么 本 次 是 无 法 获取 上 次 存储 的 数据 的 。 


通过 sessionStorage 存 储 的 数据 和 通过 localStorage 存 储 的 数据 的 有 效 
期 也 是 不 同 的 ;前 者 的 有 效 期 和 存储 数据 的 脚本 所 在 的 最 顶层 的 窗口 或 
者 是 浏览 器 标签 页 是 一 样 的 。 一 旦 窗口 或 者 标签 页 被 永久 关闭 了 ， 那 么 
所 有 通过 sessionStorage 存 储 的 数据 也 都 被 删除 了 。 (当时 要 注意 的 是 ， 
现代 浏 时 名 己 经 具备 了 重新 打开 最 近 关 闭 的 标签 页 随后 恢复 上 一 次 浏览 
的 会 话 功 能 ， 因 此 ， 这 些 标签 页 以 及 与 之 相关 的 sessionStorage 的 有 效 期 
可 能 会 更 加 长 些 ) 。 


与 localStorage 一 样 ，sessionStorage 的 作用 域 也 是 限定 在 文档 源 中 ， 
因此 非 同 源 文 档 间 都 是 无 法 共享 sessionStorage 的 。 不 仪 如 此 ， 
sessionStorage 的 作用 域 还 被 限定 在 窗口 中 。 如 果 同 源 的 文档 泻 染 在 不 同 
的 浏览 器 标签 页 中 ， 那 么 它们 互相 之 间 拥 有 的 是 各 自 的 sessionStorage 数 
据 ， 无 法 共 至 ; 一 个 标签 页 中 的 脚本 是 无 法 读 取 或 者 窗 芳 由 为 一 个 标签 
页 脚本 0 哪怕 这 两 个 标签 页 泻 染 的 是 同一 个 页 面 ， 运 行 的 是 
同一 个 脚本 也 不 行 


要 注意 的 是 : 这 里 提 到 的 基于 窗口 作用 域 的 sessionStorage 指 的 窗口 
只 是 顶级 窗口 。 如 果 一 个 浏览 器 标签 页 包含 两 个 <<iframe> 之 元 系 ， 它 们 
所 包含 的 文档 是 同 源 的 ， 那 么 这 两 者 之 间 是 可 以 共享 sessionStorage 的 。 


20.1.2 ”存储 API 














localStorage 和 sessionStorage 通 第 被 当做 普通 的 JavaScript 对 象 使 
通过 设置 属性 来 存储 字符 串 值 ， 查 询 该 属性 来 读 取 该 值 。 除 此 之 外 ， 
两 个 对 象 还 提供 了 更 加 正式 的 API。 调 用 setItem() 方 法 ， 将 对 应 的 
和 值 传递 进去 ， 可 以 实现 数据 存储 。 调 用 getItem() 方 法 ， 将 名 字 传 递 进 
去 ， 可 以 获取 对 应 的 值 。 调 用 removeItem() 方 法 ， 将 名 字 传 递 进 去 ， 可 
以 删除 对 应 的 数据 。【〔 在 非 IE8 浏 览 占 中 ， 还 可 ee 符 来 删 
除数 据 ， 就 和 对 普通 的 对 象 使 用 delete 操 作 符 一 样 。) 调用 clear() 方 法 

(不 需要 参数 ) ， 可 以 删除 所 有 存储 的 数据 。 最 后 ， 使 用 length 属 性 以 
及 key(0) 方 法 ， 传 入 0~length-1 的 数字 ， 可 以 枚 举 所 有 存储 数据 的 名 字 。 











下 面 是 一 些 使 用 localStrage 的 例子 。 这 些 代 人 码 对 sessionStorage 也 适用 : 








localSstorage.setItem("x",1);// 以 "x" 的 名 字 存 储 一 个 数值 
localStorage.getItem("x' '); // 获 取 数 值 

// 枚 举 所 有 存储 的 名 字 / 值 对 

for(var i=0;i<localStorage.length;i++){//length 表 示 了 所 有 名 字 / 值 对 的 总 数 
var name=localStorage .key(I) ;// 获 取 第 i 对 的 名 字 

var value=localStorage.getItem(name);// 获 取 该 对 的 值 

} 

localStorage.removeItem("x");// 删 除 "x" 项 

localStorage.clear( );// 全 部 删除 


















































尽管 通过 设置 和 查询 属性 能 更 加 方便 地 存储 和 获取 数据 ， 但 是 有 的 
时 候 还 是 不 得 不 使 用 上 面 提 到 的 这 些 分 法 的 。 比方 说 ， 其 中 clear0) 方 法 
是 唯一 能 删除 存储 对 象 中 所 有 名 / 值 对 的 方式 。 同 样 的 还 有 ， 
removeltem() 方 法 也 是 唯一 通用 的 删除 单个 名 / 值 对 的 方式 ， 因 为 IE8 不 
支持 delete 操 作 符 


如 果 浏 览 器 提供 商 完全 实现 了 “Web 存 储 ” 的 标准 ， 支 持 对 象 和 数组 
类 型 的 数据 存储 ， 那 么 加 会 又 多 了 一 个 使 用 类 似 于 setItem(0 和 getItem0) 
这 类 方法 的 理由 。 对 象 和 数组 类 型 的 值 通常 是 可 变 的 ， 因 此 存储 对 象 要 
求 存 储 它 们 的 副本 ， 以 确保 之 后 任何 对 这 类 对 象 的 改变 都 不 影响 到 存储 
的 对 象 。 同 样 的 ， 在 获取 该 对 象 的 时 候 也 要 求 获 取 的 是 该 对 象 的 副本 ， 
以 确保 对 已 获取 对 象 的 改动 不 会 影响 到 存储 的 对 象 。 而 这 类 操作 如 果 使 
用 基于 属性 的 API 束 会 令 人 困惑 。 考 虑 下 面 这 段 代 码 ( 假 设 浏览 器 已经 
文 持 了 结构 化 数据 的 存储 〉: 














localStorage.o={x:1};// 存 储 一 个 带 有 "x" 属 性 的 对 象 
localStorage.0.Xx=2;// 试 图 去 设置 该 对 象 的 属性 值 
localStorage.0.Xx//=>>1:x 没 有 变 





























上 述 第 二 行 代码 想 要 设置 存储 的 对 象 的 属性 值 ， 但 是 事实 上 ， 它 获 
取 到 的 只 是 存储 的 对 象 的 副本 ， 随 后 设置 了 该 对 象 的 属性 值 ， 然 后 就 将 
该 副本 废弃 了 。 真 正 存储 的 对 象 保持 不 变 。 像 这 样 的 情况 ， 使 用 
getltem() 就 不 会 这 么 让 人 困惑 了 。 








localSstorage.getItem("o").x=2;// 我 们 并 不 想 存储 2 





最 后 ， 还 有 另外 一 个 使 用 显 式 的 机 遇 方 法 的 存储 API 的 理由 就 是 : 


在 还 不 支持 “Web 存 储 ” 标 准 的 浏览 嚣 中， 其 他 的 存储 机 制 的 顶层 API 对 
其 也 是 兼容 的 。 下 面 这 段 代 码 使 用 cookie 和 IE userData 来 实现 存储 API。 
如 果 使 用 基于 方法 的 API， 当 localStorage 可 用 的 时 候 就 可 以 使 用 它 编写 
代码 ， 而 当 它 在 其 他 浏览 器 上 不 可 用 的 时 候 依 然 可 以 依赖 于 其 他 的 存储 
机 制 乌 。 代 码 如 下 所 示 : 

















// 识 别 出 使 用 的 是 哪 类 存储 机 制 
var memory=window.localSstorage|| 
(window.UserDataStorage& &new UserDatastorage())|| 
new cookiestorage(); // 然 后 在 对 应 的 机 制 中 查询 数 居 
var Username=memory .getItem("username'" ) 




















20.1.3 ”存储 事件 


无 论 什么 时 候 存储 在 localStorage 或 者 sessionStorage 的 数据 发 生 改 
变 ， 浏 览 器 部 会 在 其 他 对 该 数据 可 见 的 窗口 对 象 上 触发 存储 事件 (但 
是 ， 在 对 数据 进行 改变 的 窗口 对 象 上 是 不 会 触发 的 ) 。 如 果 浏 览 占 有 两 
个 标签 页 都 打开 了 来 自 同 源 的 页 面 ， 其 中 一 个 页 面 在 localStorage 上 存储 
了 数据 ， 那 么 另外 一 个 标签 页 就 会 接收 到 一 个 存储 事件 。 要 记 住 的 是 
sessionStorage 的 作用 域 是 限制 在 顶层 窗口 的 ， 因 此 对 sessionStorage 的 改 
变 只 有 当 有 相 替 连 的 窗口 的 时 候 才 会 触发 存储 事件 。 还 有 要 注意 的 是 ， 
只 有 当 存 储 数 据 真 正 发 生 改 变 的 时 候 才 会 触发 存储 事件 。 像 给 已 经 存在 
的 存储 项 设置 一 个 一 模 一 样 的 值 ， 抑 或 是 删除 一 个 本 来 就 不 存在 的 存储 
项 都 是 不 会 触发 存储 事件 的 。 


为 存储 事件 注册 人 处理 程序 可 以 通过 addEventListener() 方 法 (或 者 在 
IE 下 使 用 attachEvent() 方 法 ) 。 在 绝 大 多 数 浏览 器 中 ， 还 可 以 使 用 给 
Window 对 象 设置 onstorage 属 性 的 方式 ， 不 过 Firefox 不 支持 该 属性 。 


与 存储 事件 相关 的 事件 对 象 有 5 个 非 第 重要 的 属性 (遗憾 的 是 ，IE8 
不 文 持 它们 )， 

















key 


被 设置 或 者 移 除 的 项 的 名 字 或 者 键 名 。 如 果 调 用 的 是 clear() 函 数 ， 
那么 该 属性 值 为 null。 


newValue 


保存 该 项 的 新 值 ， 或 者 调用 removeItem(0 时 ， 该 属性 值 为 null。 
oldValue 


改变 或 者 删除 该 项 前 ， 保 存 该 项 原先 的 值 ， 当 插入 一 个 新 项 的 时 
候 ， 该 属性 值 为 null。 


storageArea 


这 个 属性 值 就 好 比 是 目标 Window 对 象 上 的 localStorage 属 性 或 者 是 
sessionStorage 属 性 。 


url 
触发 该 存储 变化 脚本 所 在 文档 的 URL。 


最 后 要 注意 的 是 : localStorage 和 存储 事件 都 是 采用 广播 机 制 的 ， 浏 
览 器 会 对 目前 正在 访问 同样 站 点 的 所 有 窗口 发 送 消息 。 举 个 例子 ， 如 果 
一 个 用 户 要 求 网 站 停止 动画 效果 ， 那 么 站 点 可 能 会 在 localStorage 中 存储 
该 用 户 的 首选 项 ， 这 样 依 赖 ， 以 后 再 访问 该 站 点 的 时 候 就 自动 停止 动画 
效果 了 。 因 为 存储 了 该 首选 项 ， 导 致 了 触发 一 个 存储 事件 让 其 他 展现 统 
一 站 点 的 窗口 也 获得 了 这 样 的 一 个 用 户 请 求 。 再 比如 ， 一 个 基于 Web 的 
图 片 编 辑 应 用 ， 通 常 允许 在 其 他 的 窗口 中 展示 工具 条 。 当 用 户 选 择 一 个 
工具 的 时 候 ， 应 用 就 可 以 使 用 localStorage 来 存储 当前 的 状态 ， 然 后 通知 
其 他 窗口 用 户 选 择 了 新 的 工具 。 


20.2 cookie 


cookie 是 指 Web 浏 览 器 存储 的 少量 数据 ， 同 时 它 是 与 具体 的 Web 页 
面 或 者 站 点 相关 的 。cookie 最 早 是 设计 为 被 服务 端 所 用 的 ， 从 最 底层 来 
看 ， 作 为 HTTP 协议 的 一 种 扩展 实现 它 。cookie 数 据 会 目 动 在 Web 浏 览 右 
和 Web 服 务 器 之 间 传 输 的 ， 因 此 服务 端 脚 本 就 可 以 读 、 写 存储 在 客户 站 
的 cookie 的 值 。 本 节 将 介绍 客户 端的 脚本 如 何 通 过 使 用 Document 对 象 的 
cookie 属 性 实现 对 cookie 的 操作 。 


为 什么 叫 "cookie" 


"cookie" 这 个 名 字 没 有 太 多 的 含义 ， 但 是 在 计算 机 历史 上 其 实 很 早 


























束 用 到 它 了。"cookie" 和 "magic cookie" 用 于 代表 少量 数据 ， 特 别 是 指 类 
似 密码 这 种 用 于 识别 号 份 或 者 许可 访问 的 保密 数据 。 在 JavaScript 中 ， 
cookie 用 于 保存 状态 以 及 能 够 为 Web 浏 览 占 提供 一 种 喘 份 识别 机 制 。 但 
是 ，JavaScript 中 使 用 cookie 不 会 采用 任何 加 密 机 制 ， 因 此 它们 是 不 安全 
的 。 但 是 ， 通 过 https 来 传输 cookie 数 据 是 安全 的 ， 不 过 这 和 cookie 本 
身 无 关 ， 而 和 https: 协 议 相 关 。 ) 


操作 cookie 的 API 很 早 就 已 经 定义 和 实现 了 ， 因 此 该 API 的 兼容 性 很 
好 。 但 是 ， 访 API 几乎 形同虚设 。 根 本 没有 提供 诸如 查询 、 设 置 、 删 除 
cookie 的 方法 ， 所 有 这 些 操作 都 要 通过 以 特殊 格式 的 字符 串 形式 读 写 
Document 对 象 的 cookie 属 性 来 完成 。 每 个 cookie 的 有 效 期 和 作用 域 都 可 
以 通过 cookie 属 性 来 分 别 指定 。 这 些 属 性 也 是 通过 在 同一 个 cookie 属 性 
上 以 特殊 格式 的 字符 串 来 设 定 的 。 


本 节 剩 余部 分 会 解释 如 何 通过 cookie 属 性 来 指定 cookie 的 有 效 期 和 
作用 域 ， 以 及 如 何 通 过 JavaScript 来 设置 和 查询 cookie 的 值 。 最 后 ， 将 以 
一 个 “实现 基于 cookie 的 存储 API”* 例 子 来 结束 本 节 的 介绍 。 


检测 cookie 是 否 启用 


由 于 滥用 第 三 方 cookie 引 〈 如 :，cookie 是 和 网 页 上 的 图 片 相 关 而 非 

网 页 本 身 相 关 ) 的 缘故 ， 导 致 cookie 在 大 多 数 Web 用 户 心 目 中 都 留 下 了 
很 不 好 的 印象 。 比 如 ， 广 告 公 司 可 以 利用 第 三 方 cookie 来 实现 跟踪 用 户 
的 访问 行为 和 习惯 ， 而 用 户 为 了 禁止 这 种 “ 希 探 ”用 户 隐 私 的 行为 会 在 它 
们 的 浏览 器 中 禁用 cookie。 因 此 ， 在 JavaScript 代 码 中 使 用 cookie 前 ， 首 
先 要 确保 cookie 是 启用 的 。 在 绝 大 多 数 浏 览 器 中， 可 以 通过 检测 

navigator.cookieEnabled 这 个 属性 实现 。 知 该 值 为 tue， 则 当前 cookie 是 局 
用 的 ; 反之 则 是 禁用 的 《但 是 ， 只 有 具备 “当前 浏览 会 话 生 命 周期 ”的 非 持 
久 化 cookie 仍 然 是 启用 的 ) 。 但 是 ， 该 属性 不 是 一 个 标准 的 属性 〈 不 是 
所 有 浏览 器 都 支持 的 ) 。 因 此 在 不 支持 该 属性 的 浏览 嚣 上， 必须 通过 使 
用 下 面 将 要 介绍 的 技术 尝试 着 读 、 写 和 删除 测试 cookie 数 据 来 测试 是 否 


支持 cookie。 
20.2.1 ”cookie 属 性 : 有 效 期 和 作用 域 
除了 名 (name) 和 值 (value) ，cookie 还 有 一 些 可 选 的 属性 来 控制 


cookie 的 有 效 期 和 作用 域 。cookie 默 认 的 有 效 期 很 短暂 ;， 它 只 能 持续 在 
Web 浏 览 器 的 会 话 期 间 ， 一 旦 用 户 关 闭 浏览 器 ，cookie 保 存 的 数据 束 于 














失 了 。 要 注意 的 是 : 这 与 sessionStorage 的 有 效 期 还 是 有 区 别 的 : coookie 
的 作用 域 并 不 是 局 限 在 浏览 器 的 单个 窗口 中 ， 它 的 有 效 斯 和 整个 浏览 占 
进程 而 不 是 单个 浏览 器 窗口 的 有 效 期 一 至。 如 果 想 要 延长 cookie 的 有 效 
期 ， 可 以 通过 设置 max-age 属 性 ， 但 是 必须 要 明确 告诉 浏览 器 cookie 的 有 
效 期 是 多 长 (单位 是 秒 )。 一 旦 设置 了 有 效 期 ， 浏览 器 束 会 将 cookie 数 
据 存 储 在 一 个 文件 中 ， 并 且 直 到 过 了 指定 的 有 效 期 才 会 删除 该 文件 。 


和 1localStorage 以 及 sesstionStorage 类 似 ，cookie 的 作用 域 是 通过 文档 
源 和 文档 路 径 来 确定 的 。 该 作用 域 通 过 cookie 的 path 和 domain 属 性 也 是 
可 配置 的 。 默 认 情 况 下 ，cookie 和 创建 它 的 Web 页 面 有 关 ， 并 对 该 Web 
页 面 以 及 和 该 Web 页 面 同 目录 或 者 子 目 录 的 其 他 Web 页 面 可 见 。 比 如 ， 
Web 页 面 http:/www.example.comycatalog/index.html 页 面 创建 了 一 个 
cookie， 那 么 该 cookie 对 http:/www.example.comycatalog/order.htm 页面 和 
http:Wwww.example.comy/catalog/widgets/index.html 页 面 都 是 可 见 的 ， 但 
它 对 http://www.example.com/about.html 页 面 不 可 见 。 


默认 的 cookie 的 可 见 性 行为 满足 了 最 常见 的 需求 。 不 过 ， 有 的 时 
候 ， 你 可 能 希望 让 整个 网 站 都 能 够 使 用 cookie 的 值 ， 而 不 管 是 哪个 页 面 
创建 它 的 。 比 方 说 ， 当 用 户 在 一 个 页 面 表单 中 输入 了 他 的 邮件 地 址 ， 你 
想 将 它 保 存 下 来 ， 为 了 下 次 该 用 户 回 到 这 个 页 面 填写 表单 ， 或 者 在 网 站 
其 他 页 面 的 任何 地 方 要 求 输入 账单 地 址 的 时 候 ， 将 其 作为 默认 的 邮件 地 
址 。 要 满足 这 样 的 需求 ， 可 以 设置 cookie 的 路 径 〈 设 置 cookie 的 path 属 
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这 样 一 来 ， 来 自 同 一 个 Web 服 务 器 的 Web 页 面 ， 只 要 其 URL 是 以 指 
定 的 路 径 前 级 开始 的 ， 都 可 以 共享 cookie。 例 如 ， 如 果 
http://www.example.com/catalog/widgets/index.html 页 面 创建 了 一 个 
cookie， 并 且 将 该 路 径 设 置 成 "/catalog"， 那 么 该 cookie 对 于 
http://www.example.com/catalog/order.html 页 面 也 是 可 见 的 。 或 者 ， 如 果 
把 路 径 设 置 成 %”， 那 么 该 cookie 对 任何 http://www.example.com 这 台 Web 
服务 器 上 的 页 面 都 是 可 见 的 。 


将 cookie 的 路 径 设 置 成 “/” 等 于 是 让 cookie 和 localStorage 拥 有 同样 的 
作用 域 ， 同 时 当 它 请 求 该 站 点 上 任何 一 个 web 页 面 的 时 候 ， 浏 览 器 都 必 
须 将 cookie 的 名 字 和 值 传递 给 服务 器 。 但 是 ， 要 注意 的 是 ，cookie 的 path 
属性 不 能 被 用 做 访问 控制 机 制 。 如 果 一 个 Web 页 面 想 要 读 取 同一 站 点 其 
他 页 面 的 cookie， 只 要 简单 地 将 其 他 页 面 以 隐藏 二 iframe> 的 形式 加 载 
进来 ， 随 后 读 取 对 应 文档 的 cookie 就 可 以 了 。 同 源 策 略 (参见 13.6.2 节 ) 





























限制 了 跨 站 的 cookie 吉 探 ， 但 是 对 于 同一 站 点 的 文档 它 是 完全 合法 的 。 


cookie 的 作用 域 默 认 由 文档 源 限 制 。 但 是 ， 有 的 大 型 网 站 想 要 子 域 
之 间 能 够 互相 共享 cookie。 比 如 ，order.example.com 域 下 的 服务 器 想 要 
读 取 catalog.example.com 域 下 设置 的 cookie 值 。 这 个 时 候 就 需要 通过 设置 
cookie 的 domain 属 性 来 达到 目的 。 如 果 catalog.example.com 域 下 的 一 个 页 
面 创 建 了 一 个 cookie， 并 将 其 path 属 性 设置 成 *”， 其 domain 属 性 设置 
成 ".example.com"， 那 么 该 cookie 就 对 所 有 catalog.example.com、 
orders.example.com 以 及 任何 其 他 example.com 域 下 的 任何 其 他 服务 器 都 
可 见 。 如 果 没 有 为 一 个 cookie 设 置 域 属 性 ， 那 么 domain 属 性 的 默认 值 是 
当前 Web 服 务 器 的 主机 名 。 要 注意 的 是 ，cookie 的 域 只 能 设置 为 当前 服 
务 器 的 域 。 


最 后 要 介绍 的 cookie 的 属性 是 secure， 它 是 一 个 布尔 类 型 的 属性 ， 
用 来 表明 cookie 的 值 以 何 种 形式 通过 网 络 传递 。cookie 默 认 是 以 不 安全 
的 形式 〈 通 过 普通 的 、 不 安全 的 HTTP 连 接 ) 传递 的 。 而 一 旦 cookie 被 标 
识 为 “安全 的 "， 那 就 只 能 当 浏 览 器 和 服务 器 通过 HTTPS 或 者 其 他 的 安全 
协议 连接 的 时 候 才 能 传递 它 。 


20.2.2 ”保存 cookie 


要 给 当前 文档 设置 默认 有 效 期 的 cookie 值 ， 非 党 简单 ， 只 须 将 
cookie 属 性 设置 为 一 个 字符 串 形式 的 值 : 











name=value 





如 下 所 示 : 





document .cookie="version="+encodeURIComponent(document.1lastModified ) ， 











下 次 读 取 cookie 属 性 的 时 候 ， 之 前 存储 的 名 / 值 对 的 数据 就 在 文档 的 
cookie 列 表 中 。 由 于 cookie 的 名 / 值 中 的 值 是 不 允许 包含 分 写 、 召 号 和 空 
白 符 ， 因 此 ， 在 存储 前 一 般 可 以 采用 JavaScript 核 心 的 全 局 函数 
encodeURIComponentO 对 值 进行 编码 。 相 应 的 ， 读 取 cookie 值 的 时 候 需 
要 采用 decodeURIComponent() 函 数 解码 。 





以 简单 的 名 / 值 对 形式 存储 的 cookie 数 据 有 效 期 只 4 在 当前 Web 浏 览 器 
的 会 话 内 ， 一 旦 用 户 关 闭 浏 览 器 ，cookie 数 据 就 入 失 了 。 如 果 想 要 延长 
cookie 的 有 效 期 ， 就 需要 设置 max-age 属 性 来 指定 cookie 的 有 效 期 (单位 
是 秒 ) 。 按 照 如 下 的 字符 串 形式 设置 cookie 属 性 即 可 : 





name=value;max-age=seconds 





Ws 函数 用 来 设置 一 个 cookie 的 值 ， 同 时 提供 一 个 可 选 的 max-age 





// 以 名 / 值 的 形式 存储 cookie 

// 同 时 采 jencodeURIComponent ( ) 函数 进行 编码 ， 来 转 义 分 号 、 逗 号 和 空白 符 

// 如 果 daysToLive 是 一 个 数字 , 设置 hax-age 属 性 为 该 数值 表示 cookie 直 到 指定 的 天 数 
// 到 了 才 会 过 期 。 如 果 daysToLive 是 9 就 表示 删除 cookie 

function setcookie(name, value, daysToLive){ 

Var cookie=name+"= -"+encodeURIComponent (value); 






















































































cookie+=";max-age="+(daysToLive*60*60*24); 
document .cookie=cookie; 





同样 地 ， 如 果 要 设置 cookie 的 os domain 和 secure 属 性 ， 只 须 在 存 
储 cookie 值 前 ， 以 如 下 字符 串 形式 奶 加 在 cookie 值 的 后 面 : 





;bath=path 
;domain=domain 
;Secure 





要 改变 cookie 的 值 ， 需 要 使 用 相同 的 名 字 、 路 径 和 域 ， 但 是 新 的 值 
重新 设置 cookie 的 值 。 同 样 地 ， 设 置 新 max-age 属 性 就 可 以 改变 原来 的 
cookie 的 有 效 期 。 


要 删除 一 个 cookie， 需 要 使 用 相同 的 名 字 、 路 径 和 域 ， 然 后 指定 一 
个 任意 〈 非 空 ) 的 值 ， 并 且 将 max-age 属 性 指定 为 0， 再 次 设置 cookie。 


20.2.3” 读 取 cookie 
使 用 JavaScript 表 达 式 来 读 取 cookie 属 性 的 时 候 ， 其 返回 的 值 是 一 个 


字符 串 ， 该 字符 串 都 是 由 一 系列 名 / 值 对 组 成 ， 不 同名 / 值 对 之 间 通 过 “分 
写 和 空格 ”分 开 ， 其 内 容 包 含 了 所 有 作用 在 当前 文档 的 cookie。 但 是 ， 它 








并 不 包含 其 他 设置 的 cookie 属 性 。 通 过 document.cookie 属 性 可 以 获取 
cookie 的 值 ， 但 是 为 了 更 好 地 吾 看 cookie 的 值 ， 一 般 会 采用 splitO 方 法 将 
cookie 值 中 的 名 / 值 对 都 分 离 出 来 。 


把 cookie 的 值 从 cookie 属 性 分 离 出 来 之 后 ， 必 须要 采用 相应 的 解码 
方式 (取决 于 之 前 存储 cookie 值 时 采用 的 编码 方式 Ee 把 值 还 原 出 来 。 
比如 ， 先 采用 decodeURIComponent() 方 法 把 cookie 值 解码 出 来 ， 之 后 再 
利用 JSON.parse() 方 法 转化 成 json 对 象 。 


例 20-1 定 义 了 一 个 getcookie() 函 数 ， 该 函数 将 document.cookie 属 性 
0 将 对 应 的 名 / 值 对 存储 到 一 个 对 象 中 ， 函 数 最 后 返回 该 
对 角 。 


例 20-1: 解析 document.cookie 属 性 值 











// 将 document .cookie 的 值 以 名 / 值 对 组 成 的 一 个 对 象 返 回 
// 假 设 存 储 cookie 的 值 的 时 候 是 采用 encodeURIComponent ( ) 函 数 编码 的 
function getcookie(){ 

var cookie={};// 初 始 化 最 后 要 返回 的 对 象 

var all=document .cookie;// 在 一 个 大 写字 符 串 中 获取 所 有 的 cookie 值 
E 值 为 空 字 符 串 
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if(all==="")// 如 果 该 cookie 属 
return cookie;// 返 回 一 个 空 对 象 
var list=all.split(";");// 分 离 出 名 / 值 对 
for(var i=0;i<1list.length;i+t+){// 遍 历 每 个 cookie 
Var cookie=1list[i]; 

var p=cookie.index0f("=");// 查 找 第 一 个 "=" 符 号 

var name=cookie.substring(0,p);// 获 取 cookie 名 字 

var value=cookie.substring(p+1);// 获 取 cookie 对 应 的 值 
value=decodeURIComponent (value);// 对 其 值 进行 解码 
cookie[name]=value;// 将 名 / 值 对 存储 到 对 象 中 
} 




































































return cookie,; 





20.2.4 ”cookie 的 局 限 性 


cookie 的 设计 初衷 是 给 服务 端 脚 本 用 来 存储 少量 数据 的 ， 该 数据 会 
在 每 次 请 求 一 个 相关 的 URL 时 传递 到 服务 器 中 。RFC 2965 鼓 励 浏 览 器 供 
应 商 供应 商 对 cookie 的 数目 和 大 小 不 做 限制 。 可 是 ， 要 知道 ， 该 标准 不 
0 为 每 个 Web 服 务 右 保存 的 cookie 数 不 

召 过 20 个 (是 对 整个 服务 器 而 言 ， 而 不 仅仅 指 服务 器 上 的 页 面 和 站 
点 ) ， 而 且 ， 每 个 cookie 保 存 的 数据 不 能 超过 4KB 〈 即 名 字 和 值 的 总 量 
不 能 超过 4KB 的 限制) 。 实 际 上 ， 现 代 浏 览 器 允许 cookie 总 数 超过 300 
个 ， 但 是 部 分 浏览 器 对 单个 cookie 大 小 仍然 有 4KB 的 限制 。 








20.2.5 “cookie 相关 的 存储 


例 20-2 展 示 了 如 何 实现 基于 cookie 的 一 系列 存储 API 方 法 。 
了 一 个 cookieStorage 函 数 〈 被 实例 化 的 时 候 具 有 构造 
将 max-age 和 path 属 性 传递 给 该 构造 函数 ， 就 会 返回 一 个 对 象 ， 


函数 特性 )〉， 


六 全 定义 
所 hy 


以 像 使 用 localStorage 或 者 sessionStorage 一 样 来 使 用 这 个 对 象 了 。 但 是 





注意 的 是 ， 该 例 并 没有 实现 存储 事件 ， 因 此 ， 当 设置 和 查询 





oe 象 的 属性 的 时 候 ， 不 会 实现 目 动 保存 和 获取 对 应 的 值 。 


例 20-2: 实现 基于 cookie 的 存储 API 





/* 
*cookieStorage.js 











* 本 类 实现 像 localStorage 和 sessionStorage 一 样 的 存储 API， 不 同 的 是 ， 基 于 HTTP cookie 实 现 它 





*/ 




















function cookieStorage(maxage, path)f{// 两 个 参数 分 别 代表 存储 有 效 期 和 作用 域 

















// 获 取 一 个 存储 全 部 cookie 信 息 的 对 象 

var cookie=(function(){// 类 似 之 前 介绍 的 getcookie( ) 函 数 
var COOkie={};// 该 对 象 最 终 会 返 开 
var all=document .cookie;// 以 大 字符 串 的 形式 获取 所 有 cookie 信 息 
if(all==="" )// 如 果 该 属 性 为 空 字符 串 
return cookie;// 返 回 一 个 空 对 象 
var list=all.split(";");// 分 离 出 名 / 值 对 
for(var i=0;i<1list.length;i+t+){// 遍 历 每 个 cookie 
Var cookie=1list[i]; 

var p=cookie.index0f("=");// 查 找 第 一 个 "=" 符 号 

var name=cookie.substring(0,p);// 获 取 cookie 名 字 

var value=cookie.substring(p+1);// 获 取 cookie 对 应 的 值 
value=decodeURIComponent (value);// 对 其 值 进行 解码 
cookie[name]=value;// 将 名 值 对 存储 到 对 象 中 

} 

return cookie,; 
}() );// 将 所 有 cookie 的 名 字 存 储 到 一 个 数组 中 


Var keys=[]; 




















































































































for(var key in cookie)keys,.push(key);// 现 在 定义 存储 API 公 共 的 属性 和 方法 





// 存 储 的 cookie 的 个 数 














this.length=keys.length;// 返 回 第 n 个 cookie 的 名 字 , 如 果 n 越 界 则 返 
this.key=function(n){ 
if(n=0||n>=keys.length)return null; 

return keys[n]; 

};// 返 回 指定 名 字 的 cookie 值 ,如 果 不 存在 则 返回 nu1l1. 
this.getIitem=function(name)t{ 

return cookie[name]||null; 

};// 存 储 cookie 值 
this.setItem=function(key,value)t{ 

if(!(key in cookie) ){// 如 果 要 存储 的 cookie 还 不 存在 
keys,push(key);// 将 指定 的 名 字 加 入 到 存储 所 有 cookie 名 的 数组 中 
this.length++;//cookie 个 数 加 一 

} 

// 将 该 名 / 值 对 数据 存储 到 cookie 对 象 中 

cookie[key]=value;// 开 始 正式 设置 cookie 












































Snull 





























// 首 先 将 要 存储 的 cookie 的 值 进行 编码 ， 同时 创建 一 个 "名 字 = 编 码 后 的 值 " 























式 的 字符 


忆 











var cookie=key+"="+encodeURIComponent(value) ;// 将 cookie 的 属性 也 加 入 到 该 字符 串 中 
if(maxage)cookie+=" ;max-age="+maxage 

if(path)cookie+=";path="+path;// 通 过 document .cookie 属 性 来 设置 cookie 

document .cookie=cookie; 

};// 圳 除 指定 的 cookie 

this.removeItem=function(key)t{ 

if(!1(key in cookie))return;// 如 果 cookie 不 存在 ， 则 什么 也 不 做 

// 从 内 部 维护 的 cookie 组 删除 指定 的 cookie 

delete cookie[key];// 同 时 将 cookie 中 的 名 字 也 在 内 部 的 数组 中 删除 

// 如 果 使 用 ES5 定 义 的 数组 indexoOf ( ) 方 法 会 更 加 简 让 
for(var i=0;i<keys.length;i+t+){// 遍 历 所 有 的 名 字 
if(keys[i]===key ){// 当 我 们 找到 了 要 找 的 那个 

keys .splice(i,1);// 将 它 从 数组 中 删除 

break; 


} 


} 

this.length--;//cookie 个 数 减 一 

// 最 终 通 过 将 该 cookie 值 设置 为 空 字符 串 以 及 将 有 效 期 设置 为 6 来 删除 指定 的 cookie 
document ,cookie=key+"=;max-age=0"; 
} 7; // 删 除 所 有 的 cookie 
this.clear=function( ){// 循 环 所 有 的 cookie 的 名 字 ， 并 将 cookie 删 除 
for(var i=0;i<keys.length;i++) 

document .cookie=keys[i]+"=;max-age=0";// 重 置 所 有 的 内 部 状态 
cookie={}; 

keys=[]; 

this.1length=0,; 

}; 

} 


20.3 利用 IE userData 持 久 化 数据 


IE5 以 及 IE5 以 上 版 本 的 浏览 器 是 通过 在 document 元 素 后 面 附加 一 个 
专属 的 “DHTML 行 为 ”来 实现 客户 端 存储 的 。 如 以 下 代码 所 示 : 





















































下 


























































































































var memory=document .createElement("div");// 创 建 一 个 元 素 
memory .id="_memory";// 设 定 一 个 id 名 
memory.style.display="none";// 将 其 隐藏 
memory.style.behavior="url('#default#userData' )";// 附 加 userData 行 为 
document .body.appendCchild(memory);// 将 其 添加 到 document 元 素 中 


























一 旦 给 元 素 赋 了 予 了 "userData" 行 为 ， 该 元素 就 拥有 load0 和 save0) 方 
法 。load0) 方 法 用 于 载 入 存储 的 数据 。 使 用 它 的 时 候 必须 传递 一 个 字符 
串 作为 参数 一 一 类 似 于 一 个 文件 名 ， 该 参数 用 来 指定 要 载 入 的 存储 数 
据 。 当 数据 载 入 后 ， 就 可 以 通过 该 元 素 的 属性 来 访问 这 些 名 / 值 对 形式 
的 数据 ， 可 以 使 用 getAttribute0) 来 查询 这 些 数据 。 通 过 setAttribute() 方 法 
设置 属性 ， 然 后 调用 sava(0) 方 法 可 以 存储 新 的 数据 ;而 要 删除 数据 ， 通 
过 使 用 removeAttribute() 方 法 然后 调用 save() 方 法 即 可 。 如 下 例 所 示 【〈 议 
例 使 用 了 此 前 例子 中 初始 化 的 那个 memory 元 素 ) : 











memory,.1oad("myStoredData" ) ;// 根 据 指定 名 ， 载 入 对 应 的 数据 
var name=memory .getAttribute("username") ;// 获 取 其 中 的 数据 片段 
if(!name ){// 如 果 没 有 指定 的 数据 片段 

name=prompt ("What is your _ name? ) ;// 获 取 用 户 输入 
memory ,setAtttribute("username", name ) ;// 将 其 设置 成 emory 元 素 的 一 个 属性 
memory,.save("myStoredData" ) ;// 保 存 它 方便 下 次 使 用 
} 












































[三 












































默认 情况 下 ， 通 过 userData 存 储 的 数据 ， 除 非 手 动 去 删除 它 人 否则 永 
不 失效 。 但 是 ， 也 可 以 通过 设置 expires 属 性 来 指定 它 的 过 期 时 间 。 就 拿 
上 面 的 例子 来 说 ， 可 以 给 存储 的 数据 设置 时 长 100 达 天 的 有 效 期 ， 如 下 
所 示 : 





var now=(new Date()).getTime();// 获 取 当 前 时 间 ， 以 毫秒 为 单位 
var expires=now+100*24*60*60*1000;// 距 离 当 前 时 间 100 天 ， 把 天 数 换算 成 毫秒 
expires=new Date(expires).toUTCString();// 将 其 转换 成 字符 串 
memory .expires=expires;// 设 置 userData 的 过 期 时 间 


















































IE userData 的 作用 域 限 制 在 和 当前 文档 同 目 录 的 文档 中 。 它 的 作用 
域 没 有 cookie 宽 泛 ，cookie 对 其 所 在 目录 下 的 子 目 录 也 有 效 。userData 的 
机 制 并 没有 像 cookie 那 样 ， 通 过 设置 path 和 domain 属 性 来 控制 或 者 改变 
其 作用 域 的 方式 。 


userData 人 允许 存储 的 数据 量 要 比 cookie 大 ， 但 是 却 比 localStorage 以 
及 sessionStorage 人 允许 存储 的 数据 量 要 小 。 


例 20-3 基 于 下 的 userData 实 现 了 存储 API 提 供 的 getItem(、setItem0) 
以 及 removeItem() 方 法 。《 但 是 它 没有 实现 key0 或 者 clear0 方 法 ， 原 
是 userData 并 没有 定义 过 历 所 有 存储 项 的 一 种 方法 。) 


例 20-3: 基于 下 的 userData 实 现 部 分 存储 API 


























function UserDataStorage(maxage){// 创 建 一 个 document 元 素 并 附加 userData 行 为 
// 因 此 该 元 素 获 得 save( ) 和 1oad ( ) 方 法 
var memory=document .createElement("div");/V/ 创 建 一 个 元 素 
memory.style.display="none";// 将 其 隐藏 
memory.style.behavior="url('#default#userData' )";// 附 加 userData 行 为 
document .body.appendCchild(memory );// 将 该 元 素 添加 到 document 元 素 中 
// 如 果 传 递 了 maxage 参 数 〈 单 位 为 秒 ) ， 则 将 其 设置 为 userData 的 有 效 期 ， 以 毫秒 为 单位 
if(maxage)t 
var now=new Date().getTime();// 当 前 时 间 

var expires=now+maxage*1000;// 当 前 时 间 加 上 有 效 期 就 等 于 过 期 时 间 
memory ,expires=new Date(expires),toUTCString()， 


} 
// 通 过 载 入 存储 的 数据 来 初始 化 memory 元 素 











































































































// 参 数 是 任意 的 ， 只 要 是 在 保存 的 时 候 存在 的 就 可 以 了 
memory,.1oad("UserDatastorage" ) ;// 载 入 存储 的 数据 
this .getItem=function(key){f// 通 过 属性 来 获取 保存 的 值 
return memory.getAttribute(key)||null; 






































this， SetItem=function(key,Vvalue){ 

memory .setAttribute(key， value) // 以 设置 属性 的 形式 来 保存 数据 
memory,.save("UserDatastorage" ) ;// 保 存 数据 改变 后 的 状态 

}; 

this.removeItem=function(key)t{ 

memory ,removeAttribute(key);// 删 除 存 储 的 数据 
memory.save("UserDataStorage" );// 再 次 保存 状态 
}; 

} 












































由 于 上 述 代码 只 在 下 浏览 器 下 有 效 ， 最 好 使 用 I 正 条 件 注释 来 避免 其 
他 浏览 器 载 入 上 述 代码 。 





<!--[if IE]> 
所 Script src="UserDataSstorage.js"></script> 
<![endif]--> 


20.4 ”应 用 程序 存储 和 离线 Web 应 用 


HTML5 中 新 增 了 “应 用 程序 缓存 ”"， 人 允许 Web 应 用 将 应 用 程序 自 吴 本 
地 保存 到 用 户 的 浏览 器 中 。 不 像 localStorage 和 sessionStorage 只 是 保存 
Web 应 用 程序 相关 的 数据 ， 它 是 将 应 用 程序 自身 保存 起 来 一 一 应 用 程序 
所 需 运 行 的 所 有 文件 CHTML、CSS、JavaScript、 图 片 等 ) 。“ 应 用 程 
序 绥 存 ?和 一 般 的 浏览 器 绥 存 不 同 : 它 不 会 随 着 用 户 清除 浏览 器 组 存 而 
被 清除 。 同 时 ， 组 存 起 来 的 应 用 程序 也 不 会 像 一 般 固定 大 小 的 缓存 那 
样 ， 老 数据 会 被 最 近 一 次 访问 的 新 数据 代 蔡 掉 。 它 其 实 不 是 临时 存储 在 
绥 存 中 : 应 用 程序 更 像 是 被 “安装 ”在 那里 ， 除 非 补 用户“ 纯 载 * 或 者 “市 
除 ” 它 们 ， 否 则 它们 就 会 一 直 “ 驻 扎 ” 在 那里 。 所 以 ， 总 的 来 说 ,，“ 应 用 程 
I 
件 ”。 


让 Web 应 用 能 够 实现 “本 地 安装 ”的 目的 是 要 保证 它们 能 够 在 离线 状 
态 《〈 比 如 ， 当 在 发 机 上 或 者 手机 没 信 号 的 时 候 ) 下 依然 可 访问 。 将 自 
己 “ 安 装 ” 到 应 用 程序 缓存 中 的 Web 应 用 ， 在 离线 状态 下 使 用 localStorage 
来 你 存 应 用 相关 的 数据 ， 同 时 还 县 备 一 套 同 步 机 制 ， 在 青 次 回 到 在 线 状 
态 的 时 候 ， 能 够 将 存储 的 数据 传输 给 服务 器 。 在 20.4.3 下 我 们 会 看 到 一 
个 离线 WEb 应 用 的 例子 。 不 过 ， 在 这 之 前 ， 先 来 介绍 下 应 用 程序 是 如 何 
































将 自己 “安装 ?到 应 用 程序 缓存 中 的 。 
20.4.1 应 用 程序 绥 存 清单 


想 要 将 应 用 程序 “安装 ”到 应 用 程序 缓存 中 ， 首 先 要 创建 一 个 清单 : 
包含 了 所 有 应 用 程序 依赖 的 所 有 UREL 列 表 。 然 后 ， 通 过 在 应 用 程序 主 
HTML 页 面 的 二 html 才 标签 中 设置 manifest 属 性 ， 指 向 到 该 清单 文件 就 可 
以 了 : 

















< 过 !DOCTYPE HTML> 

<html manifest="myapp.appcache"> 
<head>...<=/head> 
<body>,..</body> 

</html> 








清单 文件 中 的 首 行内 容 必须 以 "CACHE MANIFEST" 字 符 串 开始 。 
其 余 就 是 要 缓存 的 文件 URL 列 表 ， 一 行 一 个 URL。 相 对 路 径 的 URL 都 相 
对 于 清单 文件 的 URL。 会 忽略 内 容 中 的 空 行 ， 会 作为 注释 而 忽略 
以 “#”? 开 始 的 行 。 注 释 前 面 可 以 有 空格 ， 但 是 在 同一 行 注释 后 面 是 不 允 
许 有 非 空 字符 的 。 如 下 所 示 是 一 个 简单 的 清单 文件 : 











CACHE MANIFEST 

# 上 一 行 标识 此 文件 是 一 个 清单 文件 。 本 行 是 注释 
# 下 面 的 内 容 都 是 应 用 程序 依赖 的 资源 文件 的 URL 
myapp.html 

myapp.js 

myapp.css 

images/background.png 















































缓存 清单 的 MIME 类 型 


应 用 程序 缓存 清单 文件 约定 以 .appcache 作 为 文件 扩展 名 。 但 是 ， 这 
也 仪 仅 只 是 约定 而 已 ，Web 服 务 器 真正 识别 清单 文件 的 方式 是 通 
过 "text/cache-manifest" 这 个 MIME 类 型 的 一 个 清单 。 如 果 服 务 器 将 清单 
文件 的 Content-Type 的 头 信 息 设置 成 其 他 MIME 类 型 ， 那 么 就 不 会 绥 存 
应 用 程序 了 。 因 此 ， 可 能 需要 对 Web 服 务 器 做 一 定 的 配置 来 使 用 这 个 
MIME 类 型 ， 比 如 ， 在 Web 应 用 目录 下 创建 Apache 服 务 器 的 一 
个 .htaccess 文 件 。 


清单 文件 包含 要 缓存 的 应 用 的 标识 。 如 果 一 个 Web 应 用 有 很 多 Web 
页 面 ( 用 户 可 以 访问 多 个 HTML 页 面 ) ， 那 么 每 个 HTML 页 面 就 需要 设 





置 <html manifest= 之 属性 来 指 回 清 单 文件 。 事 实 上 ， 将 这 些 不 同 的 页 面 
都 指 问 同一 个 清单 文件 ， 可 以 很 清楚 地 表达 出 它们 都 是 需要 缓存 起 来 
的 ， 同 时 它们 又 是 来 自 同 一 个 Web 应 用 的 。 如 果 一 个 应 用 只 有 少量 的 
HTML 页 面 ， 那 么 一 般 会 把 这 些 页 面 都 显 式 地 列 在 清单 文件 中 。 但 这 不 
是 强制 的 会 认为 任何 链接 到 清单 文件 的 文件 都 是 Web 应 用 的 一 部 分 ， 
并 会 随 独 应 用 一 起 缓存 起 来 。 


像 之 前 提 到 的 ， 一 个 简单 的 清单 必须 列 出 Web 应 用 依赖 的 所 有 资 
源 。 一 旦 一 个 Web 应 用 首次 下 载 下 来 并 缓存 ， 之 后 的 任何 加 载 请 求 束 都 
来 日 缓存 。 从 绥 存 中 去 载 入 一 个 应 用 资源 的 时 候 ， 就 要 求 它 请 求 的 任何 
资源 务必 要 在 清单 中 。 不 会 载 入 不 在 清单 中 的 资源 。 这 种 政策 有 点 离线 
的 味道 。 如 果 一 个 简单 的 缓存 起 来 的 应 用 能 够 从 缓存 中 载 入 并 运行 ， 那 
么 它 也 可 以 在 浏览 圳 的 离线 状态 下 运行 。 通 常情 况 下 ， 很 多 复杂 的 Web 
应 用 无 法 将 它们 依赖 的 所 有 资源 都 缓存 起 来 。 但 是 ， 如 果 它 们 同时 也 有 
一 个 复杂 的 清单 的 话 ， 它 们 仍然 可 以 使 用 应 用 程序 缓存 。 


复杂 的 清单 


一 个 应 用 从 应 用 程序 缓存 中 载 入 的 时 候 ， 只 有 其 清单 文件 中 列举 出 
来 的 资源 文件 会 载 入 。 前 面 例 子 中 的 清单 文件 一 次 列举 一 个 资源 的 
URL。 事 实 上 ， 清 单 文件 还 有 比 这 更 复杂 的 语法 ， 列 举 资源 的 方式 也 还 
有 另外 两 种 。 在 清单 文件 中 可 以 使 用 特殊 的 区 域 头 印 来 标识 该 头 信息 之 
后 清单 项 的 类 型 。 像 该 例 中 列举 的 简单 缓存 项 事实 上 都 属 
于 "CACHE:" 区 域 ， 这 也 是 默认 的 区 域 。 男 外 两 种 区 域 是 
以 "Network:" 和 "FALLBACK:" 头 信息 开始 的 (一 个 清单 可 以 有 任意 数量 
的 区 域 ， 而 且 在 相 邻 两 个 区 域 之 间 可 以 根据 需要 相互 切换 ) 。 


"NETWORK:" 区 域 标 识 了 该 URL 中 的 资源 从 不 缓存 ， 总 要 通过 网 络 
获取 。 通 第 ， 会 将 一 些 服 务 端 的 脚本 资源 放 在 "NETWORK:" 区 域 中 ， 而 
实际 上 该 区 域 中 的 资源 的 URL 都 只 是 URL 前 级 ， 用 来 表示 以 此 URL 前 级 
开头 的 资源 都 应 该 要 通过 网 络 加 载 。 当 然 ， 如 果 浏 览 器 处 于 离线 状态 ， 
那么 这 些 资源 都 将 获取 失败 。"NETWORK:" 区 域 中 的 URL 还 支持 “*” 通 
配 符 。 该 通配符 表示 对 任何 不 在 清单 中 的 资源 ， 浏 览 器 都 将 通过 网 络 加 
载 。 这 实际 上 违背 了 这 样 一 条 规则 :， 绥 存 应 用 程序 必须 要 在 清单 中 列举 
所 有 应 用 相关 的 资源 ! 


"FALLBACK:" 区 域 中 的 清单 项 每 行 都 包含 两 个 URL。 第 二 个 URL 
是 指 需 要 加 载 和 存储 在 绥 存 中 的 资源 ， 第 一 个 URL 是 一 个 前 级 。 任 何 能 












































够 匹配 到 该 前 绥 的 URL 都 不 会 缓存 起 来 ， 但 是 可 能 的 话 ， 它 们 会 从 网 络 
中 载 入 。 如 果 从 网 络 中 载 入 这 样 一 个 URL 失 败 的 话 ， 就 会 使 用 第 二 个 
URL 指 定 的 缓存 资源 来 代 蔡 ， 从 绥 存 中 获取 。 想 象 一 个 Web 应 用 包含 一 
定数 量 的 视频 教程 。 这 些 视频 部 很 大 ， 显 然 把 它们 缓存 到 本 地 是 不 合适 
的 。 因 此 ， 在 离线 状态 下 ， 通 过 清单 文件 中 的 fallback 区 域 ， 就 可 以 使 
用 一 些 机 过 文本 的 帮助 文件 来 代 蔡 了 。 


下 面 是 一 个 更 加 复杂 的 缓存 清单 : 








CACHE MANIFEST 
CACHE : 


myapp.html 

myapp.css 

myapp.js 

FALLBACK : 
videos/offline_help.html 
NETWORK : 

cgi/ 


20.4.2 ”缓存 的 更 新 


当 一 个 Web 应 用 从 缓存 中 载 入 的 时 候 ， 所 有 与 之 相关 的 文件 也 是 直 
接 从 缓存 中 获取 。 在 线 状态 下 ， 浏 览 右 会 异步 地 检查 清单 文件 是 否 有 更 
新 。 如 果 有 更 新 ， 新 的 清单 文件 以 及 清单 中 列举 的 所 有 文件 都 会 下 载 下 
来 重新 保存 到 应 用 程序 缓存 中 。 但 是 ， 要 注意 的 是 ， 浏 览 右 只 是 检查 清 
单 文件 ， 而 不 会 去 检查 缓存 的 文件 是 否 有 更 新 :只 检查 清单 文件 。 比 
如 ， 如 果 修 改 了 一 个 缓存 的 JavaScript 文 件 ， 并 且 要 想 让 该 文件 生效 ， 就 
必须 去 更 新 下 清单 文件 。 由 于 应 用 程序 依赖 的 文件 列表 其 实 并 没有 变 
化 ， 因 此 最 简单 的 方式 就 是 更 新 版 本 号 : 




















CACHE MANIFEST 

#MyApp version 1( 更 改 这 个 数字 以 便 让 浏览 器 重新 下 载 这 个 文件 ) 
MyYApp .htm] 

MyApp .js 








同样 ， 如 果 想 要 让 Web 应 用 从 缓存 中 “ 利 载 >?， 就 要 在 服务 器 端 删 除 
清单 文件 ， 使 得 请 求 该 文件 的 时 候 返 回 HTTP 404 无 法 找到 的 错误 ， 同 
时 ， 修 改 HITML 文 件 以 便 他 们 与 该 清单 列表 “ 断 开 链接 ”。 


要 注意 的 是 ， 浏 览 器 检查 清单 文件 以 及 更 新 缓存 的 操作 是 腊 步 的 ， 


可 能 是 在 从 缓存 中 载 入 应 用 之 前 ， 也 有 可 能 同时 进行 。 因 此 ， 对 于 简单 
的 Web 应 用 而 言 ， 在 更 新 清单 文件 之 后 ， 用 户 必 须 载 入 应 用 两 次 才能 保 
证 最 新 的 版 本 生效 : 第 一 次 是 从 缓存 中 载 入 老 版 本 随后 更 新 缓存 ， 第 二 
次 才 从 缓存 中 载 入 最 新 的 版 本 。 


浏览 器 在 更 新 缓存 过 程 中 会 触及 一 系列 事件 ， 可 以 通过 注册 人 处理 程 
序 来 跟 踊 这 个 过 程 同 时 提供 反馈 给 用 户 。 如 下 例 所 示 : 














applicationCache.onupdateready=function(){ 

var reload=confirm("A new version of this application is available\n"+"and will 
be used the next time you reload.\n"+"Do you want to reload now?"); 

if(reload)location.reload(); 





要 注意 的 是 ， 该 事件 处 理 程序 是 注册 在 ApplicationCache 对 象 上 
的 ， 该 对 象 是 window 的 applicationCache 属 性 的 值 。 支 持 应 用 程序 缓存 
的 浏览 器 会 定义 该 属性 。 此 外 ， 除 了 上 面 例子 中 的 updateready 事 件 之 
外 ， 还 有 其 他 7 种 应 用 程序 绥 存 事件 可 以 监控 。 例 20-4 展 示 了 一 个 简单 
ee 通过 显示 对 应 的 消息 来 通知 用 户 绥 存 更 新 的 进度 ， 以 及 当前 
爱人 存 的 状态 。 


例 20-4: 处 理应 用 绥 存 相关 事件 












































// 下 面 所 有 的 事件 处 理 程 序 都 使 用 此 函数 来 显示 状态 消息 
// 由 于 都 是 通过 调用 status 函 数 来 显示 状态 ， 因 此 所 有 处 理 程 序 都 返回 false 来 阻止 浏览 器 
// 显 示 其 默认 状态 消息 

function status(msg){// 将 消息 输出 到 id 为 "statusline" 的 文档 元 素 中 

document .getElementById("statusline").innerHTML=msg; 
console.1og(msg);// 同 时 在 控制 台 输出 此 消息 ， 便 于 调试 


} 

// 每 当 应 用 程序 载 入 的 时 候 ， 都 会 检查 该 清单 文件 

// 也 总 会 首先 触发 "checking" 事 件 
window.applicationCache.onchecking=function(){ 
status("Checking for a new version."); 

return false; 

};// 如 果 清 单 文件 没有 改动 ， 同 时 应 用 程序 也 已 经 缓存 了 
//"noupdate" 事 件 会 被 触发 ， 整 个 过 程 结束 
window.applicationCache.onnoupdate=function(){ 
status("This version is up-to-date.") 

return false; 

};// 如 果 还 未 缓存 应 用 程序 ， 或 者 清单 文件 有 改动 

// 那 么 浏览 器 会 下 载 并 缓存 清单 中 的 所 有 资源 

// 触 发 "downloading" 事 件 ， 同 时 意味 着 下 载 过 程 开 始 
window.applicationCache.ondownloading=function(){ 
status("Downloading new version"); 
window.progresscount=0;// 在 下 面 的 "progress" 事 件 处 理 程序 会 用 到 
return false; 


}; // 在 下 载 过 程 中 会 间断 性 地 触发 "progress" 事 件 





















































































































































































































































































































































// 通 常 是 在 每 个 文件 下 载 完 毕 的 时 候 

window.applicationCache.onprogress=function(e){// 事 件 对 象 应 当 是 "process" 事 件 ( 就 像 哪 
些 被 XHR2 使 用 的 ) ， 

// 通 过 该 对 象 可 以 计算 出 下 载 完成 比例 ， 但 是 ， 如 果 它 不 是 "process" 事 件 ， 

// 我 们 统计 调用 的 次 数 

var progress="",; 

if(e&&e.lengthcomputable)//"process" 事 件 :计算 下 载 完 成 比例 

progress=""+Math.round(100*e.loaded/e.total)+"%" 

else// 否 则 ， 输 出 调用 次 数 

progress="("+++progresscount+")" 

status("Downloading new version"+progress); 

return false; 

};// 当 下 载 完 成 并 且 首 次 将 应 用 程序 下 载 到 绥 存 中 时 ， 

// 浏 览 器 会 触发 "cached" 事 件 

window.applicationCache.oncached=function(){ 

status("This application is now cached locally"); 

return false; 

}; // 当 下 载 完 成 并 将 缓存 中 的 应 用 程序 更 新 后 ， 浏 览 器 会 触发 "Updateready "事件 

// 要 注意 的 是 : 触发 此 事件 的 时 候 ， 用 户 任 然 可 以 看 到 老 版 本 的 应 用 程序 . 

window.applicationCache. onupdateready= function(){ 

status("A new version has been downloaded.Reload to run it"); 

return false; 

}; // 如 果 浏览 器 处 于 离线 状态 ， 检 查 清单 列表 失败 ， 则 会 触发 "error" 事 件 

// 当 一 个 未 缓存 的 应 用 程序 引用 一 个 不 存在 的 清单 文件 ， 也 会 触发 此 事件 

window.applicationCache.onerror=function(){ 

status("Couldn't load manifest or cache application"); 

return false; 

};// 如 果 一 个 缓存 的 应 用 程序 引用 一 个 不 存在 的 清单 文件 

// 会 触发 "obsolete" 事 件 ， 同 时 会 将 应 用 从 缓存 中 移 除 

// 之 后 都 不 会 从 缓存 而 是 通过 网 络 来 加 载 资源 

window.applicationCache.onobsolete=function(){ 

status("This application is no longer cached."+ 

"Reload to get the latest version from the network."); 

return false; 


}; 




























































































































































































































































































































































































每 次 载 入 一 个 设置 了 manifest 属 性 的 HTML 文 件 ， 浏 览 器 都 会 触 
发 "checking" 事 件 ， 并 通过 网 络 载 入 该 清单 文件 。 不 过 之 后 ， 会 随 着 不 
同 的 情况 触发 不 同 的 事件 。 


没有 可 用 的 更 新 


如 果 应 用 程序 已 经 绥 存 并 且 清 单 文件 没有 改动 ， 则 浏览 右 会 触 
发 "noupdate" 事 件 。 


有 可 用 的 更 新 


如 有 果 应 用 程序 已 经 缓存 了 并 是 清单 文件 发 生 了 改动 ， 则 浏览 器 会 触 
发 "downloading" 事 件 ， 并 开始 下 载 和 缓存 清 单 文件 中 列举 的 所 有 资源 。 
随 着 下 载 过 程 的 进行 ， 浏 览 器 还 会 触发 "progress" 事 件 ， 在 下 载 完 成 
后 ， 会 触发 "updateready" 事 件 。 








首次 载 入 新 的 应 用 程序 

如 果 还 未 绥 存 应 用 程序 ， 如 上 所 述 ，"downloading" 事 件 
和 "progress" 事 件 都 会 触发 。 但 是 ， 当 下 载 完成 后 ， 浏 览 右 会 触 
发 "cached" 事 件 而 不 是 "updateready" 事 件 。 

浏览 器 处 于 离线 状态 

如 果 浏 览 器 处 于 离线 状态 ， 它 无 法 检查 清单 文件 ， 同 时 它 会 触 
发 "error" 事 件 。 如 果 一 个 未 绥 存 的 应 用 程序 引用 一 个 不 存在 的 清单 文 
件 ， 浏 览 器 也 会 触发 该 事件 。 

清单 文件 不 存在 

如 果 浏 览 器 处 于 在 线 状态 ， 应 用 程序 也 已 经 缓存 起 来 了 了， 但 是 清香 
文件 不 存在 (返回 404 无 法 找到 错误 ) ， 浏 览 器 会 触发 "obsolete" 事 件 ， 
并 将 该 应 用 程序 从 缓存 中 移 除 。 


除了 使 用 事件 处 理 程序 之 外 ， 还 可 以 使 用 applicationCache.status 属 
性 来 查看 当前 缓存 状态 。 该 属性 有 6 个 可 能 的 属性 值 : 


ApplicationCache.UNCACHED(0) 

应 用 程序 没有 设置 manifest 属 性 : 未 缓存 
ApplicationCache.IDLE(1) 

清单 文件 己 经 检查 完毕 ， 并 且 已 经 缓存 了 最 新 的 应 用 程序 
ApplicationCache.CHECKING(2) 

浏览 器 正在 检查 清单 文件 
ApplicationCache.DOWNLOADING(3) 

浏览 器 正在 下 载 并 缓存 清单 中 列举 的 所 有 文件 


ApplicationCache.UPDATEREADY(4) 














己 经 下 载 和 缓存 了 最 新 版 的 应 用 程序 
ApplicationCache.OBSOLETE(5) 
清单 文件 不 存在 ， 缓 存 将 被 清除 


ApplicationCache 对 象 还 定义 了 两 个 方法 : update() 方 法 显 式 调用 了 
更 新 缓存 算法 以 检测 是 否 有 最 新 版 本 的 应 用 程序 。 这 导致 浏览 器 检测 同 
ee (并 触发 相同 的 事件 ) ， 这 和 第 一 次 载 入 应 用 程序 时 的 效 
果 是 一 样 的 。 


还 有 一 个 方法 是 swapCache()， 访 方法 更 加 巧妙 。 还 记得 当 浏 览 器 
下 载 并 缓存 更 新 版 本 的 应 用 时 ， 用 户 仍 然 在 运行 老 版 本 的 应 用 吧 。 只 有 
当 用 户 再 次 载 入 应 用 时 ， 才 会 访问 到 最 新 版 本 。 但 是 如 果 用 户 没有 重新 
载 入 ， 就 必须 要 保证 老 版 本 的 应 用 也 要 工作 正常 。 同 时 要 注意 的 是 ， 老 
版 本 应 用 程序 的 相关 资源 可 能 是 从 缓存 中 加 载 的 : 比如 ， 应 用 程序 可 能 
使 用 XMLHttpRequest 去 获取 文件 ， 而 这 些 请 求 也 务必 要 保证 能 够 从 老 
版 本 缓存 中 的 文件 获取 到 。 因 此 ， 浏 览 器 在 用 户 再 次 载 入 应 用 前 必须 在 
绥 存 中 保留 老 版 本 的 应 用 。 


swapCache() 方 法 告诉 浏览 器 它 可 以 弃 用 老 的 缓存 ， 所 有 的 请 求 都 

从 新 绥 存 中 获取 。 要 注意 的 是 ， 这 并 不 会 重新 载 入 应 用 程序 : 所 有 已 经 
载 入 的 HTML 文 件 、 图 片 、 脚 本 等 资源 都 不 会 改变 。 但 是 ， 之 后 的 请 求 
都 将 从 最 新 的 缓存 中 获取 。 这 会 导致 "版 本 错乱 ”的 问题 ， 因 此 ， 一 般 不 
推荐 使 用 ， 除 非 应 用 程序 设计 得 很 好 ， 确 保 这 样 的 方式 没有 问题 。 想 象 
下 ， 比 方 说 ， 有 这 么 个 应 用 程序 ， 它 什么 也 不 做 ， 就 只 是 在 浏览 器 检查 
清单 文件 的 整个 过 程 中 ， 显 示 过 渡 画 面包 。 触 发 "noupdate" 事 件 时 ， 它 
继续 “前 进 ” 并 载 入 应 用 程序 的 首页 。 触 发 "downloading" 事 件 ， 并 且 更 新 
缓存 后 ， 它 显示 合适 的 反馈 给 用 户 。 触 发 "updateready" 事 件 时 ， 它 调用 
swapCache() 方 法 ， 然 后 从 最 新 的 缓存 中 载 入 更 新 过 的 首页 。 


要 注意 的 是 ， 只 有 当 状 态 属性 是 ApplicationCache.UPDATEREADY 
或 者 ApplicationCache.OBSOLETE 时 ， 调 用 swapCache() 方 法 才 有 意义 
( 当 状 态 是 OBSOLETE 时 ， 调 用 swapCache() 方 法 可 以 立即 弃 用 废弃 的 
缓存 ， 让 之 后 所 有 的 请 求 都 通过 网 络 获 取 ) 。 如 果 在 状态 属性 是 其 他 数 
值 的 时 候 调 用 swapCache0) 方 法 ， 它 就 会 殷 出 寞 第 。 























20.4.3 ”离线 Web 应 用 





离线 web 应 用 指 的 是 将 自己“ 安装? 在 应 用 程序 绥 存 中 的 程序 ， 使 得 
哪怕 在 浏览 器 处 于 离线 状态 时 候 依然 可 访问 它 。 举 个 最 简单 的 例子 一 一 
类 似 时 钟 和 万 花 简 生成 器 这 样 的 应 用 Web 应 用 要 离线 可 用 需要 做 的 
事情 。 但 是 ， 大 多 数 重要 的 Web 应 用 也 需要 同 服 务 嚣 上传 数据 : 哪怕 是 
简单 的 游戏 应 用 都 有 可 能 需要 把 用 户 的 最 高 得 分 上 传 到 服务 器 上 。 这 类 
应 用 也 可 以 成 为 离线 应 用 。 它 们 可 以 使 用 localStorage 来 存储 应 用 数据 ， 
然后 当 在 线 的 时 候 再 将 数据 上 传 到 服务 器 。 在 本 地 存储 和 服务 器 端 同步 
数据 是 将 Web 应 用 转变 为 离线 应 用 最 巧妙 的 环节 ， 特 别 是 当 用 户 需 要 从 

台 设 备 获取 数据 的 时 候 。 


为 了 在 离线 状态 可 用 ，Web 应 用 需要 可 以 告知 别人 自己 是 离线 还 是 
在 线 ， 同 时 当 网 络 连接 的 状态 发 生 改 变 时 候 也 能 “感知 ”到 。 通 过 
navigator.onLine 属 性 ， 可 以 检测 浏览 器 是 否 在 线 ， 同 时 ， 在 Window 对 
象 上 注册 在 线 和 离线 事件 的 处 理 程序 ， 可 以 检测 网 络 连接 状态 的 改变 。 


本 章 将 以 一 个 简单 的 离线 we b 应 用 结束 ， 该 应 用 使 用 了 这 些 技术 。 
该 应 用 名 叫 "PermaNote" 一 个 简单 的 记事 本 程序 ， 它 将 用 户 的 文本 
保存 到 locaStorage 中 ， 并 且 在 网 络 连 接 可 用 的 时 候 岛 ， 将 其 上 传 到 服务 
器 。PermaNote 只 允许 用 户 编辑 单个 笔记 ， 而 且 不 考虑 任何 授权 和 吴 份 
验证 的 问题 它 假设 服务 端 有 区 分 用 户 的 方式 ， 但 是 不 包括 任何 登录 
界面 。PermaNote 应 用 包含 三 个 文件 。 例 20-5 是 一 个 缓存 清单 文件 ， 它 
列 出 了 另外 两 个 文件 ， 同 时 指定 不 需要 缓存 "note" 这 个 URL: 我 们 使 用 
此 URL 来 实现 在 服务 端 读 写 笔记 数据 。 
































例 20-5: permanote.appcache 





CACHE MANIFEST 
#PermaNote v8 
permanote.html 
permanote.js 
NETWORK : 

note 


例 20-6 是 PermaNote 应 用 的 第 二 个 文件 ， 它 是 一 个 HTML 文件 ， 定 义 
了 一 个 简单 的 编辑 器 的 UI: 中 间 是 一 个 二 textarea 二 元 素 ， 上 和 面 是 一 排 
的 按钮 ， 下 面 是 消息 的 一 个 状态 栏 。 要 注意 的 是 ， 二 html 放 标签 设置 了 
manifest 属 性 。 





例 20-6: permanote.html 


人 | 


过 !DOCTYPE HTML>> 

<html manifest="permanote.appcache"> 

<head> 

<title>PermaNote Editor</title> 

<script src="permanote.js"></script> 

<style> 

#editor{width:100%;height:250px;} 
#statusline{width:100%,;} 

</style> 

</head> 

<body> 

<div id="toolbar"> 

<button id="savebutton"onclick="save()"~>Save</button> 
<button onclick="sync()">Sync Note<=/button> 

<button onclick="applicationCache.update()">Update Application<=/button> 
</div> 

<textarea id="editor"></textarea> 

<div id="statusline">></div> 

</body> 

</html> 





最 后 ， 例 20-7 展 示 的 是 使 PermaNode Web 应 用 正常 工作 的 JavaScript 
代码 。 它 定义 了 一 个 status0) 函 数 在 状态 栏 上 展示 消息 ， 一 个 save0 函 数 
来 当前 版 本 的 笔记 保存 到 服务 器 上 ， 以 及 一 个 sync0) 方 法 来 确保 本 地 副 
本 和 服务 器 端的 副本 的 同步 。 其 中 ，save0 和 syncO 两 个 函数 使 用 了 第 18 
章 介 绍 的 脚本 化 的 HTTP 技 术 。 (有 趣 的 是 ，save() 函 数 使 用 了 HTTP 
的 "PUT" 方 法 而 不 是 第 见 的 "POST" 方 法 。) 


除了 这 三 个 基本 的 函数 外 ， 例 20-7 还 定义 了 一 些 事件 处 理 程序 。 为 
人 应 用 程序 需要 一 些 事 件 处 理 程 
了 : 





onload 


尝试 和 服务 器 同步 ， 一 旦 有 新 版 本 的 笔记 并 且 完 成 同步 后 ， 就 启用 
编辑 器 窗口 。 


saven() 和 sync() 函 数 发 出 HTTP 请 求 ， 并 在 XMLHttpRequest 对 象 上 注 
册 一 个 onload 事 件 处 理 程序 来 获取 上 传 或 者 下 载 完 成 的 提醒 。 


onbeforeunload 


在 未 上 传 前 ， 把 当前 版 本 的 笔记 数据 保存 到 服务 右上。 


oninput 


每 当天 textarea 之 元 素 内 容 发 生变 化 时 ， 都 将 其 内 容 保存 到 
localStorage 中 ， 并 局 动 一 个 计时 器 。 当 用 户 停止 编辑 超 过 5 秒 ， 就 自动 
把 笔记 数据 保存 到 服务 器 上 。 








onoffline 


当 浏 览 器 进入 离线 状态 时 ， 在 状态 栏 中 显示 离线 消 妃 。 





ononline 


当 浏 览 嚣 回 到 在 线 状 态 时 ， 同 步 服 务 器 ， 检 醋 是 否 有 新 版 本 的 数 
据 ， 并 且 保 存 当 前 版 本 的 数据 。 








onupdateready 


如 果 新 版 本 的 应 用 《已 缓存 ) 准备 就 绪 了 ， 就 在 状态 条 中 展示 消息 
来 告知 用 户 。 





onnoupdate 


人 则 通知 用 户 他 /她 仍 在 运行 当前 


例 20-7 展 示 了 PermaNote 应 用 的 事件 驱动 逻辑 的 概览 : 





例 20-7: permanote.js 





// 一 些 贯 穿 始终 的 变量 
var editor,statusline,savebutton,idletimer;// 首 次 载 入 应 用 
window.onload=function( ){// 第 一 次 载 入 时 ， 初 始 化 本 地 存储 
if(localStorage.note==null)localSstorage.note=""，; 
if(localStorage.lastModified==null)localStorage.1lastModified=0; 
if(localStorage.1lastSaved==null)localStorage.1lastSaved=0; // 查 找 编辑 器 UI 元 素 ， 并 初始 化 






























































全 局 变量 





editor=document .getElementById("editor"); 

statusline=document .getElementById("statusline"); 
savebutton=document .getElementById("savebutton"); 

editor .value=localStorage.note;// 初 始 化 编辑 器 ， 将 保存 的 笔记 数据 填充 为 其 内 容 
editor .disabled=true;// 同 步 前 禁 夫 止 编辑 
// 一 旦 文本 区 有 内 容 输 入 
editor.addEventListener("input", 
function(e){// 将 新 的 值 保存 到 locaStorage 中 












































localStorage.note=editor .value; 
localStorage.lastModified=Date.now();// 重 置 闲 置 计 时 器 
if(idletimer)clearTimeout(idletimer); 
idletimer=setTimeout(save,5000) ;// 启 用 保存 按钮 
savebutton.disabled=false; 
























































}, 

false);// 每 次 载 入 应 用 程序 时 ， 尝 试 同步 服务 器 
sync(); 
};// 离 开 页 面前 保存 数据 到 服务 器 
window.onbeforeunload=function(){ 
if(localStorage.lastModified>localStorage.1lastSaved) 
Save( ); 

};// 离 线 时 ， 通 知 用 户 






























































window.onoffline=function(){status("0ffline");}// 再 次 返回 在 线 状态 时 ，i 
户 











~ 


























window.ononline=function(){sync();};// 当 有 新 版 本 应 用 的 时 候 ， 提 醒 
// 这 里 我 们 也 可 以 采用 location .reload( ) 方 法 来 强制 重新 载 入 应 用 
window.applicationCache.onupdateready=function(){ 







































































一 人 
dl 
可 
NN 


status("A new version of this application is available.Reload to run it"); 















































};// 当 没有 新 版 本 的 时 候 也 通知 用 户 
window.applicationCache.onnoupdate=function(){ 

status("You are running the latest version of the application."); 
};// 用 于 在 状态 栏 中 显示 状态 消息 的 一 个 函数 









































function status(msg){statusline.innerHTML=msg;}// 每 当 笔记 内 容 更 新 后 ， 如 果 用 户 停止 编辑 超 
钟 ， 


// 就 会 自动 将 笔记 文本 上 传 到 服务 器 (在 线 状态 下 ) 
function Save(){ 
if(idletimer)clearTimeout(idletimer); 
idletimer=null; 

if(navigator.onLine)t{ 

var xhr=new XMLHttpRequest(); 
xhr.open("PUT","/note"); 
xhr.send(editor.value); 
xhr.onload=function(){ 
localStorage.1lastSaved=Date .now( ); 
savebutton.disabled=true; 

}; 

) 

// 检 查 服务 端 是 否 有 新 版 本 的 笔记 ， 
// 如 果 没 有 ， 则 将 当前 版 本 保存 到 服务 器 端 
function Sync(){ 

if(navigator .onLine){ 

var xhr=new XMLHttpRedquest( ) 
Xhr.open("GET"，" /note") ， 
xhr.send( ) ， 
xhr.onload=function(){ 

var remoteModTime=0; 
if(xhr.status==200){ 

var remoteModTime=xhr .getResponseHeader("Last-Modified"); 
remoteModTime=new Date(remoteModTime).getTime( ); 





















































if(remoteModTime>>]localSstorage.lastModified){ 
status("Newer note found on server."); 

var useit= 

confirm("There is a newer version of the note\n"+ 
"on the server.Click Ok to use that version\n"+ 
"or click Cancel to continue editing this\n"+ 
"version and overwrite the server"); 

var now=Date .now(); 

if(useit)f{ 
editor.value=localStorage.note=xhr.responseText; 














localStorage.1lastSaved=now; 

status("Newest version downloaded."); 

} 

else 

status("Ignoring newer version of the note."); 
localStorage.lastModified=now; 

} 

else 

status("You are editing the current version of the note. 
if(localStorage.lastModified>1localStorage.1lastSaved){ 
Save( ) ， 


'); 





} 

editor .disabled=false;// 再 次 启用 编辑 器 
editor .focus();// 将 光标 定位 到 编辑 器 中 

} 


} 

else{// 离 线 状 态 下 ， 不 能 同步 
status("Can't sync while offline"); 
editor.disabled=false; 
editor.focus(); 

} 

} 


[1 类似 DOM 事 件 机 制 。 

2] 完全 兼容 。 

[3] 第 三 方 cookie 指 的 是 来 自 于 当前 访问 站 点 以 为 的 站 点 设置 的 cookie。 
[4] 类 似 于 HTTP 头 。 

[5] 过 渡 画 面 类 似 loading 图 。 

[6] 宽 泛 地 讲 ， 该 示例 受到 Halfnote 和 Aaron Boodman 的 启发 。Halfnote 是 
其 中 一 个 离线 Web 应 用 。 

















第 21 革 多 媒体 和 图 形 编程 


本 章 将 介绍 如 何 使 用 JavaScript 来 操作 图 片 、 控 制 音频 和 视频 流 以 及 
画图 。21.1 节 会 介绍 如 何 用 传统 的 JavaScript 技 术 实 现 诸 如 图 片 翻转 〈 鼠 
标 指针 移动 到 一 张 静 态 图 片上 切换 成 另外 一 张 图 片 ) 这 样 的 视觉 效果 。 
紧 接 着 ，21.2 节 会 介绍 HTML5 的 <audio 之 和 二 video> 元 素 以 及 它们 的 
JavaScript API。 


在 前 两 节 对 图 片 、 音 频 和 视频 的 介绍 之 后 ， 接 下 来 会 介绍 两 项 非常 
强大 的 用 于 客户 端 绘图 的 技术 。 能 够 在 浏览 喜 中 动态 生成 复杂 图 形 是 非 
常 重要 的 ， 因 为 : 


用 于 在 客户 问 生 成 图 形 的 代码 大 小 要 比 图 片 本 号 小 很 多 ， 这 样 可 


以 减少 部 分 带宽 。 


通过 一 些 实时 数据 来 动态 生成 图 形 ， 需 要 消耗 大 量 的 CPU 周期 。 
而 如 果 把 这 个 任务 放 到 客户 端 做 ， 葡 可 以 有 效 地 减轻 服务 器 的 负担 ， 某 
种 程度 上 也 是 节约 了 硬件 开销 。 


在 客户 问 生 成 图 形 也 是 符合 现代 Web 应 用 的 架构 : 服务 器 提供 数 
据 ， 然 后 客户 站 负责 展现 这 些 数据 。 


21.3 ” 节 会 介绍 可 伸缩 的 矢量 网 形 (Scalable Vector Graphics, 
SVG) 。SVG 是 一 种 基于 XML 的 并 且 用 于 描述 图 形 的 语言 ，SVG 图 形 
可 以 通过 JavaScript 和 DOM 来 创建 和 操控 。 最 后 ，21.4 节 会 介绍 HTML5 
的 天 canvas 之 元 素 及 其 用 于 客户 端 画 图 的 、 功 能 齐全 的 JavaScript API。 
<canvas 之 元 素 是 一 项 革命 性 的 技术 ， 本 章 会 对 它 做 详细 的 介绍 。 


21.1 脚本 化 图 片 


Web 页 面 使 用 HTML 的 二 img 二 元 素来 姐 入 图 片 。 和 所 有 HTML 元 素 
一 样 ， 二 img 二 元 素 也 是 可 以 通过 脚本 来 操控 的 ， 设置 元 素 的 s rc 属性 ， 
将 其 指向 一 个 新 的 URL 会 导致 浏览 器 载 入 (如 果 需 要 的 话 ) 并 展示 一 张 
新 的 图 片 。〔 还 可 以 通过 脚本 来 控制 图 片 的 宽度 和 高 度 ， 这 会 使 得 浏览 
器 缩小 和 放大 图 片 ， 但 是 这 种 技术 这 里 不 会 做 介绍 。) 


在 HIML 文 档 中 动态 答 换 图 片 ， 这 样 一 种 能 力 ， 使 得 许多 特效 成 为 














可 能 。 其 中 最 常用 的 特效 就 是 图 片 翻转 ， 图 片 会 随 着 鼠标 指针 划 过 进行 
蔡 换 。 如 果 图 片 本 身 包 含 超 链接 ， 并 且 可 单 击 ， 那 么 图 片 翻转 这 种 特效 
是 一 种 引导 用 户 单 击 图 片 非常 有 效 的 方式 。【〔 实 现 同样 的 效果 也 可 以 不 
使 用 脚本 ， 而 是 使 用 CSS 中 的 :hover 伪 类 ， 蔡 换 元 素 的 背景 图 片 来 实 
现 。) 如 下 的 HTML 代 码 段 是 一 个 非常 简单 的 例子 ， 它 创 建 一 张 图 片 ， 
并 在 鼠标 指针 经 过 的 时 候 改 变 该 图 片 : 


<img src="images/help.gif" 
onmouseover="this,.src='images/help_rollover .gif"'" 
onmouseout="this.src="'images/help.gif'"> 


当 鼠 标 指针 经 过 或 者 离开 <img> 之 元 素 时 候 ， 事 件 处 理 程 序 会 重新 
设置 其 src 属 性 。 图 片 翻转 和 鼠标 单 击 紧密 联系 在 一 起 ， 因 此 <img 二 元 
系 应 当 包 含 在 一 个 <a 之 元 素 中 或 者 指定 一 个 onclick 事 件 处 理 程序 。 


为 了 有 用 起 见 ， 像 图 片 翻转 这 样 的 效果 需要 较 高 啊 应 上 度 。 这 也 意味 
大 需要 想 办 法 来 确保 一 些 必要 的 图 片 要 预 提 取 ， 让 浏览 器 缓存 起 来 。 客 
户 端 JavaScript 定 义 了 一 个 专用 的 API 来 达到 这 一 目的 : 为 了 强制 让 图 片 
绥 存 起 来 ， 首 先 利 用 Image() 构 造 沙 数 来 创建 一 个 屏 融 外 图 片 对 象 ， 之 
后 ， 将 该 对 象 的 src 属 性 设置 成 期 望 的 URL。 由 于 图 片 元 素 并 没有 添加 到 
文档 中 ， 因 此 ， 它 是 不 可 见 的 ， 但 是 浏览 器 还 是 会 加 载 图 片 并 将 其 缓存 
起 来 。 这 样 一 来 ， 之 后 当 设 置 成 同样 的 URL 来 显示 该 屏幕 内 图 片 的 时 
候 ， 它 束 能 很 快 从 浏览 器 缓存 中 加 载 ， 而 不 需要 再 通过 网 络 加 载 。 


前 面 展 示 的 图 片 翻转 的 代码 片段 并 没有 预 提取 它 使 用 的 翻转 图 片 ， 
这 样 ， 当 用 户 第 一 次 将 鼠标 指针 移 到 图 片上 的 时 候 会 明显 感到 翻转 效果 
有 延 时 。 要 解决 这 个 问题 ， 将 代码 修改 成 如 下 形式 : 





























<script>(new Image()).src="images/help_rollover.gif";</script> 
<img src="images/help.gif" 
onmouseover="this.src='images/help_rollover .gif'" 
onmouseout="this.src="'images/help.gif'"> 


优雅 的 图 片 翻转 实现 方式 


刚刚 展示 的 代码 需要 一 个 二 script 元 素 和 两 个 JavaScript 事 件 处 理 
程序 的 属性 来 实现 一 个 简单 的 图 厂 翻 转 效果 。 这 个 例子 的 代码 非常 不 优 
雅 : 大 量 的 JavaScript 和 HTML 代 码 混 在 一 起 。 例 21-1 展 示 了 一 种 更 为 优 





雅 的 实现 方式 ， 这 种 方式 允许 在 任意 的 <img> 元 素 上 ， 只 要 简单 地 指 
定 了 data-rollover 属 性 〈 参 见 15.4.3 节 ) ， 就 会 创建 一 个 图 片 翻转 效果 。 
要 注意 的 是 ， 该 例 使 用 了 例 13-5 中 介绍 的 onLoad0 函 数 。 同 时 它 还 用 到 
了 document.images[] 数 组 (参见 15.2.3 节 〉 从 文档 中 查找 所 有 的 二 img> 
大 本 


例 21-1: 优雅 的 图 片 翻转 实现 方式 





Vs 
*rollover .js: 优 雅 的 图 片 翻转 实现 方式 

















* 要 创建 图 片 翻转 效果 ， 将 此 模块 引入 到 HTML 文 件 中 
* 然 后 在 任意 二 ijmg 二 元 素 上 使 用 data-rollover 属 性 来 指定 翻转 图 片 的 URL 即 可 
* 如 下 所 示 : 






































*< img src="normal_ image.png"data-rollover="rollover_image.png"> 
* 





* 要 注意 的 是 ， 此 模块 依赖 于 onLoad .js 
*/ 


onLoad(function( ){// 所 有 处 理 逻 辑 都 在 一 个 匿名 函数 中 :不 定义 任何 符号 
// 遍 历 所 有 的 图 片 ， 查 找 data-rollover 属 性 

for(var i=0;i<document.images.]length;i++){ 

var img=document.images[i]; 

var rollover=img.getAttribute("data-rollover"); 
if(!rollover )continue;// 跳 过 没有 data-rollover 属 性 的 图 片 
// 确 保 将 翻转 的 图 片 缓存 起 来 

(new Image()).src=rollover;// 定 义 一 个 属性 来 标识 默认 的 图 片 URL 
img.setAttribute("data-rollout",img.src);// 注 册 事 件 处 理 函 数 来 创建 翻转 效果 
img.onmouseover=function( ){ 
this,.src=this.getAttribute("data-rollover"); 
img.onmouseout=function(){ 
this,src=this.getAttribute("data-rollout"); 

}; 

} 

}); 


21.2 ”脚本 化 音频 和 视频 


从 理论 上 说 ，HTML5 引 入 的 和 audio 之 和 妆 video 之 元 素 ， 使 用 起 来 
和 雪 img> 元 素 一 样 简单 。 对 于 支持 HIML5 的 浏览 器 ， 不 再 需要 使 用 插 
件 〈 像 Flash) 来 在 HTML 文 档 中 内 入 音频 和 视频 : 













































































<audio Src="background_music,mp3"/> 
<video Src="news ,mov"width=320 height=240/> 





实际 上 ， 使 用 这 些 元 素 的 时 候 要 更 加 巧妙 。 由 于 各 家 浏览 器 制造 丙 





未 能 在 对 标准 音频 和 视频 编 解 码 器 支持 上 达成 一 致 ， 因 此 ， 通 常 都 需要 
使 用 二 source 二 元 素来 为 指定 不 同 格 式 的 媒体 源 : 





<audio id="music"> 

<source src="music.mp3"type="audio/mpeg"> 

<source src="music.0gg"type="'audio/o0gg;codec="vorbis"'> 
</audio> 








要 注意 的 是 ， 雪 Source 过 元 系 没 有 任何 内 容 : 没有 闭合 的 过 /source 
> 标签 ， 也 不 需要 使 用 %>” 来 结束 它们 。 


文 持 居 audio 之 和 雪 video 之 元 素 的 浏览 右 不 会 泻 染 这 些 元 和 素 的 内 
容 。 而 不 文 持 它 们 的 浏览 器 则 会 将 它们 的 内 容 都 演 染 出 来 ， 因 此 ， 可 以 
在 这 些 元 素 中 放置 后 备 内 容 〈 比 如 ， 一 个 用 于 调用 Flash 插 件 的 过 object 
二 元 素 ) : 





<video id="news"width=640 height=480 controls preload> 

二 !--Firefox 和 Chrome 支 持 的 WebM 格 式 - - > 

<source src="news.webm"type='video/webm;codecs="vp8,vorbis"'> 

二 !--IE 和 Safari 支 持 的 H.264 格 式 - - > 

<source src="news.mp4"type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'> 
二 !--Flash 插 件 作为 后 备 方案 - - > 

<object width=640 height=480 type="application/x-shockwave-flash" 
data="flash_movie_player .swf"> 

二 1!-- 这 里 的 参数 元 素 用 于 配置 Flash 视 频 播放 器 - - > 

去 !- -文本 是 最 终 的 后 备 内 容 - - > 

<div>video element not supported and Flash plugin not installed.<=/div> 
</object> 

</video> 
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<audio 之 和 <<video 之 元 素 支 持 一 个 controls 属 性 。 如 果 设 置 了 该 属 
性 (或 者 对 应 的 JavaScript 属 性 设置 为 tue〉， 它 们 将 会 显示 一 系列 播放 
控件 ， 包 括 播放 、 暂 停 按 钮 、 音 量 控制 等 。 除 此 之 外 ，<audio 之 和 去 
video 之 元 素 还 提供 了 API 能 让 脚本 控制 媒体 ， 使 用 该 API 可 以 实现 在 
Web 应 用 中 添加 简单 的 声音 效果 或 者 创建 自 定义 首 频 和 视频 控制 面板 。 
尽管 ， 音 频 和 视频 控制 面板 在 外 观 上 有 很 大 差别 ， 但 是 两 个 元 素 基本 共 
享 相同 的 API〔 唯 一 不 同 的 是 ， 二 video 二 元 素 还 有 width 和 height 属 
性 ) ， 本 市 后 面 要 介绍 的 很 多 内 容 对 两 个 元 素 几 乎 都 有 效 。 


Audio() 构 造 函 数 
在 不 设置 controls 属 性 的 情况 下 ， 二 audio 二 元 素 没 有 任何 视觉 外 














观 。 正 如 可 以 使 用 Image0 构 造 冰 数 来 创建 一 张 屏 医 外 图 片 那 样 ， 
HTML5 中 的 媒体 API 同 样 也 允许 使 用 Audio() 构 造 函 数 ， 并 将 媒体 源 URL 
作为 参数 ， 来 创建 一 个 屏 磊 外 音频 元 系 : 





new Audio("chime.wav").play();// 载 入 并 播放 声音 效果 


Audio0 构 造 函 数 的 返回 值 和 通过 从 文档 中 得 询 生 audio 之 元 素 或 者 
使 用 document.createElement("audio") 来 创建 一 个 新 的 元 素 获 得 的 都 是 同 
一 类 对 象 。 这 里 要 注意 的 是 ，Audio0 是 音频 元 素 特有 的 API， 换 句 话 
说 ， 视 频 元 素 是 没有 类 似 Video0 这 样 的 构造 函数 的 。 


尽管 对 于 多 种 不 同 格式 的 文件 要 分 别 定义 媒体 比较 繁 玉 ， 但 是 ， 能 
够 不 借助 插件 在 浏览 器 中 原生 播放 音频 和 视频 是 HTML5 中 非常 强大 的 
新 特性 。 要 注意 的 是 ， 对 于 媒体 编 解码 器 的 问题 以 及 浏览 器 对 其 兼容 性 
的 问题 并 不 在 本 书 讨论 的 范畴 。 接 下 来 会 集中 讨论 如 何 利用 JavaScript 
API 来 操控 音频 和 视频 流 。 


21.2.1 ”类 型 选择 和 加 载 


想 要 测试 一 个 媒体 元 素 能 否 播 放 指 定 类 型 的 媒体 文件 ， 可 以 调用 
canPlayType() 方 法 并 将 媒体 的 MIME 类 型 (有 时 需要 包含 codec 参 数 ) 传 
递 进 去 。 如 果 它 不 能 播放 该 类 型 的 媒体 文件 ， 该 方法 会 返回 一 个 空 的 字 
符 串 (一 个 假 值 ); 反之 ， 它 会 返回 一 个 字符 串 : "maybe" 或 
者 "probably"。 之 所 以 返回 "probably" 这 样 不 确定 的 结果 ， 是 因为 音频 和 
视频 编 解码 器 本 身 就 非常 复杂 ， 在 没有 真正 下 载 并 壬 试播 放 指 定 类 型 的 
媒体 前 很 难 确定 是 否 真 的 可 以 文 持 播放 此 类 型 文件 : 











var a=new Audio(); 
if(a.canplayType("audio/wav"))t{ 
a.src="soundeffect .wav"; 
a.play(); 

} 


当 设 置 媒体 元 素 的 src 属 性 的 时 候 ， 加 载 媒体 的 过 程 就 开始 了 《除非 
将 preload 设 置 成 rauto"， 人 否则 ， 只 会 加 载 少 量 内 容 ， 因 此 该 过 程 不 会 持 
续 很 长 时 间 ) 。 当 设置 src 属 性 的 时 候 ， 如 果 有 其 他 的 媒体 文件 正在 加 载 
或 者 播放 ， 则 会 中 止 它们 的 加 载 或 者 播放 过 程 。 如 果 通 过 在 媒体 元 素 中 
添加 二 source 二 元 素 而 不 是 设置 src 属 性 的 方式 指定 媒体 源 ， 媒 体 元 素 无 


法 知道 是 否 已 经 将 一 系列 二 source 盖 元 素 都 添加 完毕 了 ， 因 此 它 也 不 会 
ee 除非 显 式 地 调用 
load0) 方 法 。 


21.2.2 ”控制 媒体 播放 


<audio 之 和 <video 之 元 素 最 重要 的 方法 是 play0 和 pause() 方 法 ， 它 
们 用 来 控制 媒体 开始 和 暂停 媒体 的 播放 : 




















// 文 档 载 入 完成 后 ， 开 始 播放 背景 音乐 
window.addEventListener("load",function() 

{document .getElementById("music").play(); 
},false); 











除了 开始 和 暂停 播放 首 频 和 视频 ， 还 可 以 通过 设置 currentTime 属 性 
来 进行 定点 播放 。 该 属性 指定 了 播放 器 应 该 跳 过 播放 的 时 间 (单位 为 
秒 ) ， 可 以 在 媒体 播放 或 者 暂停 的 时 候 设 置 该 属性 。 (initialTime 和 
duration 属 性 确定 了 currentTime 的 有 效 取 值 范 围 ， 后 面 会 对 这 些 属 性 做 
详细 介绍 。) 


volume 属 性 表示 播放 音量 ， 介 于 0 (静音 ) 一 1 (最 大 音量 ) 之 间 。 
将 muted 属 性 设置 为 true 则 会 进入 静 首 模式 ， 设 置 为 false 则 会 恢复 之 前 指 
定 的 音量 继续 播放 。 


playbackRate 属 性 用 于 指定 媒体 播放 的 速度 。 该 属性 值 为 1.0 表 示 正 
常 速度 ， 大 于 1 则 表示 “ 快 进 >，0 一 1 之 间 的 值 则 表示 “ 慢 放 ”。 负 值 则 表 
示 回 放 ， 但 是 直到 撰写 本 书 时 ， 浏 览 器 还 未 文 持 该 特性 。 和 <audio 之 和 
<video 之 元 系 还 有 一 个 defaultPlaybackRate 属 性 。 不 管 是 否 调用 play0) 方 
法 来 播放 媒体 ，playbackRate 属 性 默认 值 都 会 被 设置 成 
defaultPlaybackRate 的 值 。 





要 注意 的 是 ，currentTime、volume、muted 以 及 playbackRate 属 性 并 
不 只 是 用 于 控制 媒体 播放 。 如 果 一 个 二 audio> 或 者 二 video 二 元 素 有 
controls 属 性 ， 它 就 会 在 播放 器 上 显示 控件 ， 让 用 户 控制 媒体 的 播放 。 
不 仅 如 此 ， 脚 本 也 可 以 通过 得 询 诸如 muted 和 currentTime 这 样 的 属性 来 
得 知 当前 媒体 的 播放 情况 。 


controls、loop、Ppreload 以 及 autoplay 这 样 的 HTML 属 性 不 仅 影响 音 











频 和 视频 的 播放 ， 而 且 还 可 以 作为 JavaScript 属 性 来 设置 和 查询 。 
controls 属 性 指定 是 否 在 浏览 器 中 显示 播放 控件 。 设 置 该 属性 值 为 tue 表 
示 显 示 控 件 ， 反 之 表示 隐藏 控件 。loop 属 性 是 布尔 类 型 ， 它 指定 媒体 是 
否 需 要 循环 播放 ，true 表 示 需 要 循环 播放 ，false 则 表示 播放 到 最 后 就 售 
止 。preload 属 性 指定 在 用 户 开始 播放 媒体 前 ， 是 否 或 者 多 少 媒体 内 容 需 
要 预 加 载 。 该 属性 值 为 "none" 则 表示 不 需要 预 加 载 数据 。 为 "metadata" 则 
表示 诸如 时 长 、 比 特 率 、 帧 大 小 这 样 的 元 数据 而 不 是 媒体 内 容 需 要 加 

载 。 其 实 ， 在 不 设置 preload 属 性 的 情况 下 ， 浏 览 器 默认 也 会 加 载 这 些 元 
数据 的 。preload 属 性 值 如 果 为 "auto" 则 表示 浏览 器 应 当 预 加 载 它 认 为 适 
量 的 媒体 内 容 。 最 后 ，autoplay 属 性 指定 当 已 经 缓存 足够 多 的 媒体 内 容 
时 是 否 需要 自动 开始 播放 。 将 该 属性 设置 为 "true" 就 等 于 是 告诉 浏览 器 

需要 预 加 载 媒体 内 容 。 


21.2.3 查询 媒体 状态 


<audio 之 和 <video> 之 元 素 有 一 些 只 读 必 性， 描述 媒体 以 及 播放 器 
当前 的 状态 : 如 果 播 放 嚣 暂停， 那么 paused 属 性 的 值 束 为 "true"。 如 果 播 
放 右 正在 跳 到 一 个 新 的 播放 点 ， 那 么 seeking 属 性 的 值 束 为 "true"。 如 果 
播放 器 播放 完 媒 体 并 且 停 下 来 ， 那 么 ended 属 性 的 值 就 为 "true" (如 果 设 
置 loop 属 性 值 为 tue， 那 么 ended 属 性 值 永 远 不 为 "true"。) 


duration 属 性 指定 了 媒体 的 时 长 ， 单 位 是 秒 。 如 果 在 媒体 元 数据 还 
未 载 入 前 查询 该 属性 ， 它 会 返回 NaN。 对 于 像 Internet 广 播 这 样 有 无 限时 
长 的 流 媒体 而 言 ， 该 属性 会 返回 Infinity。 


initialTime 属 性 指定 了 媒体 的 开始 时 间 ， 单 位 也 是 秒 。 对 于 固定 时 
长 的 媒体 喜 辑 而 言 ， 该 属性 值 通常 是 0。 而 对 于 流 媒 体 而 言 ， 该 属性 表 
示 已 经 缓存 的 数据 的 最 早 时 间 以 及 能 够 回 退 到 的 最 早 时 间 。 当 设置 
currentTime 属 性 时 ， 其 值 不 能 小 于 initialTime 的 值 。 


其 他 三 个 属性 分 别 指定 包含 媒体 时 间 轴 、 播 放 和 缓冲 状态 的 较 细 粒 
度 视 图 。played 属 性 返回 已 经 播放 的 时 间 段 。buffered 属 性 返回 当前 已 经 
缓冲 的 时 间 段 ，seekable 属 性 则 返回 当前 播放 右 需 要 跳 到 的 时 间 段 。 

(可 以 使 用 这 些 属 性 来 实现 一 个 进度 条 ， 显 示 currentTime、duration 以 
及 媒体 的 播放 量 和 缓冲 量 。) 


played、buffered 和 seekable 都 是 TimeRanges 对 象 。 每 个 对 象 都 有 一 
个 length 属 性 以 及 start0 和 end() 方 法 ， 前 者 表示 当前 的 一 个 时 间 段 ， 后 者 






































分 别 返 回 当前 时 间 段 的 起 始 时 间 点 和 结束 时 间 点 《单位 都 是 秒 ) 。 对 于 
一 段 间 见 的 连续 时 间 段 来 说 ， 一 般 使 用 start(0) 和 end(0)。 例 如 ， 假 设 媒 
体 文 件 从 开始 缓存 起 中 间 没 有 定点 播放 发 生 《〈 跳 过 一 段 播放 ) ， 可 以 使 
用 如 下 代码 来 确定 当前 缓存 内 容 的 百分比 : 





var percent_loaded=Math.floor(song.buffered.end(0)/song.duration*100); 





最 后 ， 还 有 另外 三 个 属性 : readyState、networkState 和 error， 它 们 
包含 <audio 之 和 扫 video 之 元 素 更 加 底层 的 一 些 状态 细节 。 每 个 属性 都 
是 数字 类 型 的 ， 而 且 为 每 个 有 效 值 都 定义 了 对 应 的 第 量 。 不 过 要 注意 的 
是 ， 这 些 常量 是 定义 在 媒体 对 象 ( 或 者 错误 对 象 ) 上 的 。 可 以 按照 如 下 
方式 来 使 用 一 个 属性 : 

















if(song.readyState===song .HAVE_ ENOUGH_DATA)song.play(); 





readyState 属 性 指定 当前 已 经 加 载 7 多 少 媒 体内 容 ， 因 此 同时 也 了 暗 
己 经 准备 好 可 以 播放 了 。 如 下 表格 展示 了 该 属性 的 取 值 以 及 对 
以 由 意义 : 





常量 
HAVE NOTHING 
HAVE METADATA 


HAVE CURRENT_DATA 


贡 量 


HAVE _ FUTURE DATA 


HAVE ENOUGH DATA 


描述 

没有 加 载 任何 媒体 内 容 或 者 元 数据 

媒体 元 数据 已 经 加 载 完毕 ， 但 是 媒体 内 容 还 没有 加 载 。 也 
就 是 说 ， 这 个 时 候 可 以 获取 媒体 的 时 长 或 者 视频 文件 的 维 
度 ， 以 及 可 以 通过 设置 currentTime 来 定点 播放 ， 不 过 ， 
由 于 没有 加 载 任何 媒体 内 容 ， 因 此 浏览 如 还 是 无 法 从 设置 
的 currentTime 开 始 播放 
currentTime 的 媒体 内 容 已 经 加 载 完成 ， 但 是 还 没有 加 载 
完 足够 的 内 容 播放 媒体 。 对 于 视频 文件 而 言 ， 表 示 当 前 由 
的 数据 已 经 加 载 完成 ， 但 是 下 一 帧 的 数据 还 未 加 载 。 这 种 
状态 通常 发 生 在 到 达 一 个 音频 或 者 视频 文件 的 最 后 的 时 候 


描述 

已 经 加 载 一 些 的 媒体 内 容 ， 可 以 开始 播放 了 。 但 是 ， 还 没 
有 达到 足够 多 的 内 容 能 够 允许 流畅 地 播放 全 部 媒体 内 容 
所 有 媒体 内 容 都 已 经 加 载 完毕 ， 可 以 流畅 地 播放 《中 间 没 
有 任何 暂停 ) 


NetworkState 属 性 指定 媒体 元 素 是 否 使 用 网 络 或 者 为 什么 媒体 文件 


不 使 用 网 络 : 


前 量 什 
NETWORK_EMPTY 0 


NETWORK IDLE ] 


NETWORK LOADING 2 
NETWORK NO SOURCE 3 


描述 

媒体 元 素 还 没有 开始 使 用 网 络 。 比 如 ， 在 还 未 设置 媒体 元 
素 的 src 属 性 之 间 ， 就 是 这 种 状态 

媒体 元 素 当前 没有 通过 网 络 来 加 载 内 容 。 这 种 情况 有 可 能 
是 内 容 已 经 加 载 完毕 或 者 是 所 需 的 内 容 都 从 缓存 中 直接 读 
取 了 ， 又 或 者 是 prel0ad 属 性 设置 成 了 “none”， 还 没有 
要 求 加 载 或 者 播放 媒体 


媒体 元 素 当 前 通过 网 络 来 加 载 媒体 内 容 
风 休 元 素 无 法 获取 媒体 洒 


当 在 加 载 媒 体 或 者 播放 媒体 过 程 中 发 生 错 误 时 ， 浏 览 右 就 会 设置 二 
audio 之 或 者 天 video 之 元 素 的 error 属 性 。 在 没有 错误 发 生 的 情况 下 ， 


error 属 性 值 为 null。 反 之 ， 





error 的 属性 值 是 一 个 对 象 ， 包 含 了 摘 述 错误 


的 数值 code 属 性 。 同 时 ，error 对 象 也 定义 了 一 些 描述 可 能 的 错误 代码 的 


常量 : 


前 量 
MEDIA ERR ABORTED 
MEDIA ERR NETWORK 


MEDIA ERR DECODE 


MEDIA ERR SRC NOT SUPPORTED 


值 ”描述 

| ”用 户 要 求 浏览 器 停止 加 载 媒 体内 容 

2 ”媒体 类 型 正确 ， 但 是 发 生 了 网 络 错误 导致 无 
法 加 载 

3 媒体 类 型 正确 ， 但 是 由 于 编码 错误 导致 无 法 
正常 解码 和 播放 


4 ”通过 src 属 性 指定 的 媒体 文件 浏览 器 不 支持 ， 
无 法 播放 


可 以 以 如 下 方式 使 用 error 属 性 : 





if(song.error.code==song.error.MEDIA ERR_ DECODE) 
alert("Can't play song:corrupt audio data."); 


21.2.4 ”媒体 相关 事件 


<audio> 和 <<video> 都 是 相对 比较 复杂 的 元 素 一 一 它们 必须 不 仅 
要 对 用 户 与 播放 控件 的 交互 作出 咽 应 ， 还 要 对 网 络 活 动 做 出 啊 应 ， 甚 至 
在 播放 的 时 候 ， 对 播放 时 间 做 出 啊 应 。 与 此 同时 ， 正 如 之 前 介绍 过 的 ， 
它们 还 有 一 些 属 性 来 表示 它们 当前 的 状态 。 和 大 多 数 HTML 元 素 一 样 ， 
<audio 之 和 过 video 之 元素 在 它们 状态 发 生 改 变 的 时 候 ， 孝 会 触 友 一些 
由 于 筷 们 的 状态 比较 复杂 ， 因 此 触发 的 事件 种 类 也 比较 











下 表 根 据 它们 触发 的 先后 顺序 ， 总 结 了 22 个 媒体 相关 事件 。 这 些 事 
件 不 能 通过 属性 来 注册 事件 ， 只 能 通过 <<audio 之 和 过 video 之 元 素 的 
addEventListener() 方 法 来 注册 处 理 程 序 函 数 。 


事件 类 型 
loadstart 


progress 


loadedmetadata 


loadeddata 


canplay 


canplaythrough 


suspend 


stalled 


play 


waiting 


playing 
timeupdate 


描述 

当 媒体 元 素 开 始 请 求 媒体 数据 内 容 的 时 候 触发 。 相 应 的 networkState 属 
性 值 为 NETWORK_LOADING 

正在 通过 网 络 加载 媒 体内 容 ， 对 应 的 networkState 属 性 值 为 NETWORK_ 
LOADING。 此 事件 一 般 每 秒 触发 2~8 次 

媒体 元 数据 已 经 加 载 完成 ， 对 应 的 媒体 时 长 和 维度 数据 也 已 经 获取 。 
此 时 ，readyState 属 性 值 第 一 次 变 为 HAVE_METADATA 

当前 播放 位 置 的 媒体 内 容 首 次 加 载 完毕 ， 同 时 readyState 属 性 值 变 为 
HAVE_ CURRENT_DATA 

已 经 加 载 一 些 媒体 内 容 ， 可 以 开始 播放 ， 但 是 还 需要 继续 缓冲 更 多 数 
据 。 此 时 readyState 属 性 值 为 HAVE_FUTURE_DATA 

所 有 媒体 内 容 加 载 完毕 ， 可 以 流畅 播放 ， 无 须 暂 停 也 无 须 再 组 名 更 多 
数据 。 此 时 readyState 属 性 值 为 HAVE_ENOUGH_DATA 

已 经 绥 促 大 量 数据 ， 暂 时 停止 下 载 。 此 时 networkState 属 性 值 变 为 
NETWORK_IDLE 

尝试 加 载 数据 ， 但 是 无 法 获取 到 数据 。 此 时 metworkState 始 终 为 
NETWORK_LOADING 

调用 play( ) 方 法 或 者 设置 相应 的 autoplay 属 性 。 如 果 已 经 加 载 足够 多 的 
数据 ， 紧 接着 还 会 触发 playing 事 件 ， 否则， 紧 接 着 触发 waiting 事 件 
由 于 未 缓冲 足够 数据 导致 播放 未 能 开始 或 者 播放 停止 。 当 缓冲 足够 多 
数据 后 ， 接 着 会 触发 playing 事 件 

已 经 开始 播放 媒体 文件 

currentTime 属 性 发 生 改 变 了 。 在 一 般 播放 过 程 中 ， 此 事件 每 秒 会 触发 
4~60 次 ， 具 体 次 数 可 能 取决 于 系统 加 载 速度 以 及 事件 处 理 程序 处 理 完 
成 时 间 


事件 类 型 描述 
pause 调用 了 pause() 方 法 ， 暂 停 了 播放 


Seeking 通过 脚本 或 者 用 户 通过 播放 控件 将 当前 播放 时 间 调 至 一 个 还 未 缓冲 的 
时 间 点 ， 导 致 在 内 容 没有 加 载 完 时 ， 停 止 播放 。 此 时 ，seeking 属 性 值 


为 true 
seeked seeking 属 性 值 又 变 回 false 
ended 媒体 播放 完毕 ， 播 放 停止 


durationchange duration 属 性 值 发 生 改 变 
volumechange VOLume 或 者 muted 属 性 值 发 生 改 变 
ratechange playbackRate 或 者 defaultplaybackRate 发 生 改 变 


abort 通常 是 用 户 要 求 停止 加 载 媒 体内 容 。 对 应 的 error, code 值 为 MEDIA_ERR_ 
ABORTED 

error 由 于 发 生 网 络 错误 或 者 其 他 错误 阻止 媒体 内 容 的 加 载 。 此 时 ，eYrror， 
Co0de 值 不 会 是 MEDIA ERR_ABORTED 

emptied 发 生 了 错误 或 者 中 止 ， 导 致 networkState 属 性 值 又 变 回 NETMORK EMPTY 


21.3 SVG: 可 伸缩 的 天 量 图 形 


SVG 是 一 种 用 于 描述 图 形 的 XML 语法 。 顾 名 思 义 ， 其 中 "vector" 一 

词 表示 它 完全 不 同 于 光栅 图 像 格式 ， 诸 如 GIF、JPEG 和 PNG (用 像素 值 

来 描绘 的 和 矩阵) 。 一 个 "SVG" 图 形 是 对 画 该 图 形 时 的 必要 路 径 的 一 种 精 

上 分 辩 率 无 关 《〈 因 此 是 可 伸缩 的 ) 的 描述 。 一 个 简单 的 SVG 文件 如 下 
外: 








二 !--SVG 图 形 一 开始 声明 命名 空间 - - > 


<svg xmlns="http://www.w3.org/2000/svg" 

viewBox="0 , 14008 1060"><!- -图 Se -> 

defs 二 <1-- 设 置 后 下 要 | 到 的 一 些 定义 -- 

linearGradient id="fade" 二 二 !-- 将 一 “种 渐变 色 命名 为 'fade"--> 
<stop offset="0%"Sstop-color="#008"/> 扫 1!-- 深 蓝 - -> 
<stop offset="100%"stop-color='"#ccf"/ > 二 1- -渐变 到 浅 蓝 - -> 
</linearGradient> 

</defs> 

去 !-- 画 一 个 具有 宽 的 黑色 边框 并 且 渐 变色 为 填充 色 的 矩形 - - > 

<rect x="100"y="200"width="800"height="600" 
stroke="black"stroke-width="25"fill="url(#fade)"/> 
</svg> 
























































































































































图 21-1 展 示 了 上 述 代 码 以 图 形 方式 泻 染 时 SVG 文 件 的 样子 。 


SVG 这 种 语法 比较 庞大 并 且 有 一 定 的 复杂 度 。 它 不 仅 可 以 用 于 简单 
的 基本 图 形 的 绘制 以 外 ， 还 支持 任意 曲线 、 文 本 以 及 动画 的 绘制 。SVG 
图 形 其 至 还 和 整合 JavaScript 脚 本 和 CSS 样 式 表 来 添加 行为 和 展示 信息 。 
本 节 将 介绍 客户 端 JavaScript 代 码 ( 内 购 在 HTML 中 ， 而 不 是 SVG 中 ) 如 
何 利用 SVG 动态 绘制 图 形 。 会 有 一 些 SVG 例 子 展 示 ， 但 是 只 会 牵涉 SVG 
的 基本 知识 。 要 了 解 关 于 SVG 的 详细 内 容 ， 可 以 参阅 SVG 的 标准 文档 ， 
该 文档 比较 全 面 地 介绍 了 SVG。 这 份 文 档 由 W3C 负 责 维 护 ， 地 址 在 : 
http://www.w3.org/TR/SVG/。 要 注意 的 是 ， 文 档 包 含 了 完整 的 用 于 SVG 
| 但 是 本 节 使 用 标准 的 XML DOM 而 非 SVG DOM 
绘制 SVG 图 形 。 


截至 撰写 本 书 时 ， 除 了 下 以 外 的 所 有 主流 浏览 器 都 支持 SVG (IE9 
也 将 支持 ) 。 在 最 新 的 浏览 器 中 ， 可 以 使 用 普 ; 通 的 <img 盖 元 素来 展示 。 
SVG 图 片 。 而 相对 早期 的 浏览 器 (比如 : Firefox3.6) 还 不 支持 SVG， 需 
要 使 用 二 object 二 元 素 : 

















<object data="sample.svg"type="image/svg+xml"width="100"height="100"/> 
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图 21-1 一 个 简单 的 SVG 图 形 


当 使 用 <img> 或 者 二 object 二 元 素 展示 SVG 图 形 的 时 候 ，SVG 束 变 
成 了 另外 一 种 图 片 格式 了 ， 这 种 方式 对 于 JavaScript 程 序 员 来 说 是 不 友好 
的 。 更 好 的 方式 是 直接 将 SVG 图 片 谋 入 到 HIML 文 档 中 ， 这 样 这 些 图 片 














就 可 以 通过 脚本 的 方式 来 控制 。 由 于 SVG 惑 是 一 种 XML 语 法 ， 因 此 可 
以 将 它 以 如 下 的 方式 笠 入 到 XHTML 文 档 中 : 





<?xml version="1.0"?> 
<html xmins="http://www.w3.org/1999/xhtml, 
us :SVg= "http://www.w3. 07g/.20007 svg 2 

声明 HTML 作 为 默认 的 命名 空间 ， 以 "svg:" 前 级 的 为 SVG6 的 命名 空间 - - > 
so 
This is a red square:<Svg:Ssvg width="10"height="10"> 
<svg:rect x="QO"y="QO"width="10"height="10"fill="red"/> 
</svg:svg> 
This is a blue circle:<svg:svg width="10"height="10"> 
<svg:circle cx="5"cy="5"r="5"fill="blue"/> 
</svg:svg> 
</body> 
</html> 





这 种 展示 SVG 图 形 的 技术 除了 下 以 外 的 当前 浏览 器 都 支持 。 图 21-2 
展示 了 上 述 XHTML 文 档 经 过 Firefox 演 染 之 后 的 图 形 。 
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图 21-2 内 构 在 XHTML 文 档 中 的 SVG 图 形 


HTML5 将 XML 和 HTML 的 区 别 进一步 缩小 ， 人 允许 SVG (和 
MathML ) 标记 直接 在 HTML 文 件 中 使 用 ， 不 需要 命名 空间 的 声明 或 者 
标签 前 级 : 








<IDOCTYPE html> 

<html> 

<body> 

This is a red square:<=svg width="10"height="10"> 
<rect x="O"y="QO"width="10"height="10"fill="red"/> 


</svg> 

This is a blue circle:<Svg width="10"height="10"> 
<circle cx="5"cy="5"r="5"fill="blue"/> 

</svg> 

</body> 

</html> 





截至 撰写 本 书 时 ， 只 有 最 新 的 浏览 器 才 支 持 像 如 上 代码 那样 在 
HTML 中 直接 内 杉 SVG。 


SVG 就 是 一 种 XML 语法 ， 因 此 画 SVG 图 形 其 实 就 相当 于 是 在 使 用 
DOM 创 建 相 应 的 XML 元 素 。 例 21-2 是 一 个 pieChartO 函 数 ， 该 函数 用 来 
创建 SVG 元 素 ， 最 终 泻 染 成 图 21-3 所 示 的 饼 状 图 。 
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图 21-3 用 JavaScript 绘 制 而 成 的 SVG 饼 状 图 
例 21-2: 使 用 JavaScript 和 SVG 来 绘制 饼 状 图 





pA 
* 创建 一 个 < svg>> 元 素 ， 并 在 其 中 绘制 一 个 饼 状 图 
* 人 参数 : 









































*data: 用 于 绘制 的 数字 类 型 的 数组 ， 数 组 每 一 项 都 表示 饼 状 图 的 一 个 横 























*width, he ght : SVG 图形 的 大 小 ， 














单位 为 像素 





*CX, cyrr: 饼 状 图 的 圆心 以 及 半径 









































*CO1Lors: 一 个 外 包含 HTML 颜 色 信 息 
示人 














的 数组 ， 每 种 














pa 


颜色 代表 饼 状 




















*]abels :一 个 标签 数组 ， 该 信息 说 明 饼 状 图 中 每 个 攀 代 表 的 含义 

















*]x, ly: 饼 状 图 的 左上 角 
* 返 回 : 
* 一 个 保存 饼 状 图 的 二 svg 二 元 素 
* 调 用 者 必须 将 返回 的 元 素 插入 到 
WA 
























































素 的 XML 命 名 空间 
var svgns="http://www.w3.org/2000/svg"; 


的 大 小 


分 片 











文档 中 

















// 创 建 一 个 <svg> 元 素 ， 同 时 指定 像素 大 小 和 








j 户 坐标 








每 个 模 的 颜 


var chart=document.createElementNS(svgns,"svg:svg"); 
chart.setAttribute("width",width); 
chart.setAttribute("height",height); 


chart.setAttribute("viewBox","0 


Var total=0; 


for(var i=0;i<data.length;i++)total+=data[i];// 现 在 计算 
以 弧度 制 


计算 


var angles=[] 


for(var ii=0;I<<data.length;i++)angles[i]=data[i]/Xtotal*Math.PI*2;// 换 历 八 


startangle=0; 


for(var i=0;i<data.length;i++){// 这 里 表示 模 的 结束 位 


var endangle=startangletangles[i];// 计 算出 棉 和 圆 相 交 站 


// 这 些 计 算 公式 都 是 以 12 点 钟 方向 为 99 





// 顺 时 针 方 向 角度 递增 











Var X1=CXx+r*Math.Sin(Sstartangle)， 
var yl=cy-r*Math.cos(startangle); 
Var x2=cx+r*Math.sin(endangle); 


var y2=cy-r*Math.cos(endangle);// 这 个 标记 表示 角度 大 于 
// 此 标记 在 绘制 SVG 弧 形 组 件 的 时 候 需 




















Var big=0 





[Ey 

















0"+width+""+height);// 累 加 data 的 值 ， 以 便 避 











饼 状 图 每 个 分 片 的 大 
























































en 














烟 
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的 两 个 点 





if(endangle-startangle>Math.PI)big=1;// 使 用 < svg :path> 元 素来 描述 枫 
// 要 注意 的 是 ， 使 用 createElementNS( ) 来 创建 该 元 素 
var path=document.createElementNS(svgns, "path");// 下 面 的 






































Var d="M"+CX+", "+Cy+// 从 图 








心 开始 


"LL"+Xx1+", "+y1+// 男 一 条 到 (x1,y1) 的 线段 
"MA"+r+", "+r+// 再 画 一 条 半径 为 r 的 弧 



































"0"+big+"1"+// 弧 的 详细 信息 











Xx2+", "+y2+// 弧 到 (x2, y2) 结 束 


"Zz" ; // 当 前 路 径 到 (cx， cy ) 结束 
// 设 置 <svg :path> 元 素 的 属性 























path.setAttribute("d",d);// 设 置 路 径 


path.setAttribute("fill",colors[i]);// 设 置 横 的 颜色 
path.setAttribute("stroke", "black");// 株 的 外 边框 为 黑 

































































path.setAttribute("stroke-width", "2");// 两 个 单位 宽 


chart.appendchild(path);// 将 横 加 入 到 饼 状 图 中 





// 当 前 模 的 结束 就 是 下 一 个 模 的 开 





startangle=endangle;// 现 在 绘 





始 




















上 一 些 相应 





的 小 方块 来 表示 图 








var Icon=document ,createElementNS(Svgns， "rect"); 


icon,.setAttribute("x",1x) 


;// 定 位 小 方 甘 


icon,.setAttribute("y",1ly+30*1i); 
icon.setAttribute("width",20);// 设 置 小 方块 的 大 小 


icon.setAttribute("height’ 


icon.setAttribute("fill", colors[i]);// 填 充 小 方 甘 





',20); 





从 























icon.setAttribute("stroke", "black");// 子 外 边框 颜色 也 相同 
icon,.setAttribute("stroke-width", "2"); 


Pt Ar 


于 " 付 : 














2 





FF 知道 饼 状 


function piechart(data,width,height,cx,cy,r,colors,labels,1x,ly){// 这 个 是 表示 svg 元 





pa 

















中 









































串 包含 路 径 的 详 旨 








的 颜色 和 对 应 的 枢 的 颜色 相同 








信息 





[三 
x 


并 状 图 的 每 个 








chart.appendChild(icon);// 添 加 到 饼 状 图 中 
// 在 小 方块 的 右边 添加 标签 

var label=document.createElementNS(svgns, "text"); 
label.setAttribute("x",1x+30);// 定 位 标签 文本 
label.setAttribute("y", ly+30*i+18);// 文 本 样式 属性 还 可 以 通过 CSS 来 设 
label.setAttribute("font-family","sans-serif"); 
label.setAttribute("font-size", "16");// 在 svg:text 元 素 中 添加 一 个 DOM 文 本 节点 
label.appendCchild(document.createTextNode(labels[i])); 
chart.appendChild(label);// 将 文本 添加 到 人 饼 状 图 中 
















































































return chart ， 


} 





例 21-2 中 的 代码 相对 比较 易 履 。 其 中 有 个 小 的 数学 变换 将 数据 转换 
成 可 绘制 的 饼 模 角 。 但 是 ， 这 些 例子 都 是 使 用 DOM 代 码 来 创建 SVG 元 
素 并 设置 元 素 属 性 。 为 了 在 不 完全 文 持 HTML5 的 浏览 器 下 也 能 正常 工 
作 ， 该 例子 使 用 XML 语 法 来 处 理 SVG， 使 用 SVG 命 名 空间 以 及 
createElementNS() 这 样 的 DOM 方 法 而 不 是 createElement()。 


上 述 例子 中 最 难 懂 的 部 分 就 是 精确 绘制 饼 模 的 部 分 。 每 一 个 饼 模 都 
使 用 二 svg:path 二 元 素来 表示 。 该 SVG 元 素 可 以 描述 由 直线 和 曲线 组 成 
的 任意 形状 。 有 具体 形状 的 描述 是 通过 设置 svg:path> 之 元 素 的 d 属 性 来 实 
现 的 。 该 属性 值 使 用 简洁 的 语法 : 通过 字母 和 数字 来 指定 坐标 、 角 度 和 
其 他 的 值 。 比 如 : 字母 M 表 示 "move to"， 同 时 指定 要 移动 到 的 坐标 
(X、Y) 。 字 母 L 则 表示 "line to"， 并 绘制 一 条 从 当前 位 置 到 其 后 指定 
坐标 的 直线 。 上 述 例子 还 使 用 了 字母 A 来 绘制 弧 形 。 该 字母 之 后 需要 指 
定 7 个 数字 值 来 描述 要 绘制 的 弧 形 。 与 之 相关 的 详细 信息 在 这 里 不 重 
要 ， 想 要 了 解 可 以 去 参阅 它 的 标准 文档 ，http://www.w3.org/TR/SVG/。 


要 注意 的 是 ，pieChart(0) 返 回 一 个 包含 饼 状 图 描述 信息 的 二 svg 二 元 
素 ， 但 是 ， 它 并 没有 将 该 元 素 插 入 到 文档 中 。 因 此 ， 调 用 者 需要 手动 将 
其 插入 到 文档 中 。 使 用 如 下 代码 可 以 创建 出 如 图 21-3 所 示 的 饼 状 图 : 





<html> 

<head> 

<script src="PieChart.js"></script> 
</head> 

<body onload="document .body.appendChild( 
piechart([12,23,34,45],640,400,200,200,150, 
['red', 'blue', 'yellow', 'green'] 

['North', 'South', 'East', 'West'],400,100)); 
bbe 

</body> 

</html> 


ee | 


例 21-3 是 另外 一 个 用 脚本 绘制 SVG 图 形 的 例子 : 它 使 用 SVG 来 绘制 
一 个 模拟 时 钟 〈 参 见 图 21-4) 。 该 例 以 一 张 内 租 在 HIML 页面 中 的 静态 
SVG 时 钟 图 片 开 始 ， 而 不 是 从 零 开始 动态 构造 一 棵 SVG 元 素 树 来 实现 一 
个 动态 的 时 钟 。 那 张 静 态 的 时 钟 图 片 包含 两 个 SVG 二 line 汪 元 素来 分 别 
表示 时 针 和 分 针 。 两 条 线 都 紧 直 显示 ， 表 示 时 间 12:00。 随 后 ， 通 过 
JavaScript 设 置 每 个 <line> 之 元 素 的 transform 属 性 ， 让 它们 旋转 一 定 的 角 
度 以 显示 正确 的 时 间 ， 以 此 来 实现 一 个 动态 时 钟 。 














图 21-4 一 个 SVG 时 钟 


要 注意 的 是 ， 例 21- 3 直接 将 SVG 标记 内 艇 到 HTML5 文 件 中 ， 而 没有 
在 XHTML 文件 中 使 用 XML 命名 空间 。 这 就 意味 着 ， 它 只 有 在 支持 直接 
内 栋 SVG 的 浏览 器 中 才 反 正常 工作 ， 然而 ， 通 过 将 HTML 文 件 转换 成 
XHTMIL， 同 样 的 技术 也 能 够 在 早期 支持 SVG 的 浏览 占 中 生效 。 


例 21-3: 通过 控制 SVG 图 片 来 显示 时 间 








过 !DOCTYPE HTML>> 

<html> 

<head> 

<title>Analog Clock<=/title> 


<script> 
function updateTime(){// 更 新 SVG 时 钟 来 显示 当前 时 间 
var now=new Date();// 当 前 时 间 








var min=now.getMinutes();// 分 钟 





var hour=(now.getHours()%12)+min/60;// 转 换 成 可 以 在 时 钟 上 表示 的 时 间 


var minangle=min*6;// 每 60 表 示 一 分 钟 


var hourangle=hour*30;// 每 300 表 示 一 个 小 时 
// 获 取 表 示 时 钟 时 针 和 分 针 的 SVG 元 素 


var minhand=document .getElementById("minutehand" ) 
var hourhand=document.getElementById("hourhand");// 设 


钟 面 上 


minhand.setAttribute("transform","rotate("+minangle+",50,50)"); 
hourhand.setAttribute("transform 


钟 显示 时 间 





setTimeout(updateTime, 60000)，; 


} 


</script> 
<style>/* 下 面 定义 的 所 有 CSS 样 式 都 会 作用 在 SVG 元 素 上 */ 


#clock{/* 用 于 时 钟 
stroke:blac 
stroke-linecap:round;/* 
fill1:#eef;/* 以 浅 蓝 灰 


} 
#face{stroke-width:3px;}/* 时 钟 的 外 边框 */ 



































了 








于 时 钟 的 全 局 样式 */ 
k;/* 黑 线 */ 








出 角 */ 











色 为 背景 */ 


#ticks{stroke-width:2;}/* 标 记 每 个 小 时 的 线段 */ 
#hourhand{stroke-width:5px;}/* 相 对 较 粗 的 时 针 */ 
#minutehand{stroke-width:3px;}/* 相 对 较 细 的 分 针 


#numbers{/* 如 何 绘制 数字 */ 























*/ 











虹 














这 些 元 素 的 SVG 属性 ， 将 它们 移动 至 











rotate("+hourangle+", 50,50)");// 每 一 分 钟 更 新 下 时 


font-family:sans-serif;font-size:7pt;font-weight:bold; 
text-anchor:middle;stroke:none;fill:black; 


} 


</style> 
</head> 
<body onload="updateTime()"> 


二 !--vViewBox 是 4 





E 标 系 ，width 和 height 是 指 屏 幕 大 小 - -> 





<svg id="clock"viewBox="0 0 100 100"width="500"height="500"> 
defs<!-- 定 义 下 拉 阴 影 的 滤 镜 - - > 
<filter id="shadow"x="-50%"y="-50%"width="200%"height="200%"> 

<feGaussianBlur in="SourceAlpha"stdDeviation="1"result="blur"/> 
<feoffset in="blur"dx="1"dy="1i"result="shadow"/> 
<feMerge> 
<feMergeNode in="SourceGraphic"/>><feMergeNode in="shadow"/> 
</feMerge> 
</filter> 
</defs> 


<circle id="face"cx="50"cy="50"r="45"/><!-- 钟 面 - -> 





<g id="ticks" 之 <!1- -12 小 时 的 刻度 - - > 
x1='50'y1='5.000'x2='50.00'y2='10.00'/> 


<line 
<line 
<line 
<line 
<line 
<line 
<line 
<line 
<line 
<line 
<line 
<line 
</g> 


<g id="numbers" 之 <<!- -标记 寻 


X1= '72 ， 


x1="'88 


x1="'95. 


x1="'88 


X1= '72 ， 
X1= '50 


x1="'27 


x1="'11. 


x1="'11. 
x1="'27. 


50'y1='11. 
.97'y1='27. 
00'y1='50. 
.97'y1='72. 
50'y1='88. 
00'y1='95. 
.50'y1='88. 
03'y1='72. 
x1='5.000'y1='50. 
03'y1='27. 
50'y1='11. 


03'x2='70 
50'x2='84 
00 'X2= '90 
50 'X2= ' 84 
97 'X2= ' 790 
00'x2='50 
97'x2='30 


50 'X2= '15， 


00'x2='10 


50 'X2= '15， 
03 'X2= '30， 





.00'y2='15. 
.64'y2='30. 
.00'y2='50. 
.64'y2='70. 
.00'y2='84. 
.00'y2='90. 
.00'y2='84. 


36'y2='70. 


.00'y2='50. 


36'y2='30. 
00'y2='15. 


EE 要 的 几 个 刻度 值 - - > 


36'/> 
00 ' /> 
00 ' /> 
00 ' /> 
64 ' /> 
00 ' /> 
64 ' /> 
00 ' /> 
00 ' /> 
00 ' /> 
36 ' /> 


<text x="50"y="18">12</text><text x="85"y="53">3</text> 
<text x="50"y="88">6</text><text x="15"y="53">9</text> 


</g> 


去 !- -初始 绘制 





ES 








成 坚 直 的 指针 ， 




















之 后 通过 JavaScript 代 码 来 做 旋转 - - > 














| 


<g id="hands"filter="url(#shadow) "二 !-- 给 指针 添加 阴影 - - > 
<line id="hourhand"x1="50"y1="50"x2="50"y2="24"/> 
<line id="minutehand"x1="50"y1="50"x2="50"y2="20"/> 
</g> 

</svg> 

</body> 

</html> 











21.4 ”二 canvas 二 中 的 图 形 


二 canvas 之 元 素 自 身 是 没有 任何 外 观 的 ， 但 是 它 在 文档 中 创建 了 一 
个 画板 ， 同 时 还 提供 了 很 多 强大 的 绘制 客户 端 JavaScript 的 API。 尽 管 
canvas 元 素 在 HTML5 中 才 标 准 化 ， 但 实际 上 它 很 早 就 存在 了 。 二 canvas 
二 元 素 最 早 是 Apple 在 Safari 1.3 中 引入 的 ，Firefox 1.5 之 后 以 及 Opera 9 之 
后 的 浏览 器 都 已 经 支持 它 了 。Chrome 的 所 有 版 本 也 都 支持 它 。 不 过 IE9 
之 前 的 浏览 器 不 文 持 和 canvas 之 元 素 ， 但 是 可 以 使 用 开源 的 
ExplorerCanvas 项 目 (http://code.google.com/p/explorercanvas/) 在 IE6 一 8 
中 模拟 二 canvas 之 元 素 。 


<canvas 过 元素 和 SVG 之 间 一 个 重要 的 区 别 是 : 使 用 canvas 来 绘制 
图 形 是 通过 调用 它 提供 的 方法 而 使 用 SVG 绘制 图 形 是 通过 构建 一 村 
XML 元 素 树 来 实现 的 。 这 两 种 方式 都 很 强大 : 两 者 之 间 都 可 以 互相 模 
拟 。 但 是 ， 从 表面 上 看 ， 这 两 者 还 是 不 同 的 ， 并 且 各 有 优 劣 。 比 如 : 使 
用 SVG 来 绘制 图 形 ， 可 以 很 简单 地 通过 移 除 相应 的 元 素来 编辑 图 片 。 而 
使 用 <<canvas> 来 绘制 ， 要 移 除 图 片 中 的 元 又 就 不 得 不 把 当前 的 探 除 再 
重新 绘制 一 过。Canvas 的 绘制 API 是 基于 JavaScript 的 ， 并 且 相 对 比较 简 
洁 《〈 不 像 SVG 语 法 那么 复杂 ) ， 因 此 本 书 对 这 些 API 都 会 做 说 明 。 参 见 
第 四 部 分 中 关于 Canvas、CanvasRenderingContext2D 和 其 他 相关 项 的 章 
| 



































大 部 分 的 男 布 绘制 API 都 不 是 在 和 canvas 之 元 素 自 身上 定义 的 ， 而 
是 定义 在 一 个 “绘制 上 下 文 ? 对 象 上 ， 获 取 该 对 象 可 以 通过 调用 画布 的 
getContext() 方 法 。 调 用 getContext() 方 法 时 ， 传 递 一 个 "2d" 参 数 ， 会 获得 
一 个 CanvasRenderingContext2D 对 象 ， 使 用 该 对 象 可 以 在 画布 上 绘制 二 
维 图 形 。 这 里 很 重要 的 一 点 是 要 搞 清楚 ， 男 布 元 素 和 它 的 上 下 文 对 象 是 
两 个 完全 不 同 的 对 象 。 由 于 CanvasRenderingContext2D 名 字 太 长 了 ， 
此 这 里 做 个 约定 ， 统 一 简称 为 “上 下 文 对 象 *”。 同 样 地 ，“ 画 布 API” 指 的 
也 就 是 CanvasRenderingContext2D 对 象 的 方法 。 








画布 中 的 3D 图 形 


在 撰写 本 书 时 ， 浏 览 器 提供 商 正 在 开始 实现 二 canvas 二 元 素 用 于 给 
制 3D 图 形 的 API。 这 些 API 称 为 : "WebGL"， 它 是 绑 定 到 OpenGL 标 准 
API 的 一 个 JavaScript。 将 "webgl" 字 符 串 作为 参数 传递 给 画布 的 
getContext() 方 法 可 以 获得 用 于 绘制 3D 图 形 的 上 下 文 对 象 。 由 于 WebGL 
很 庞大 ， 而 且 也 非常 复杂 ， 本 书 将 不 会 介绍 它 的 一 些 底层 API: 其 实 
Web 开 发 者 也 更 倾向 于 使 用 封装 了 WebGL 底 层 API 的 工具 类 库 而 不 喜欢 
直接 使 用 WebGL API。 








如 下 代码 是 一 个 使 用 画布 API 的 简单 例子 ， 它 在 二 canvas 之 元 素 中 
绘制 一 个 红色 的 正方 形 和 一 个 赣 色 的 圆 ， 产 生 的 输出 和 图 21-2 所 示 的 
SVG 网 形 类 似 : 





<body> 

This is a red square:<canvas id="square"width=10 height=10></canvas> 
This is a blue circle:<canvas id="circle"width=10 height=10></canvas> 
<script> 

var canvas=document .getElementById("square");// 获 取 第 一 个 画布 元 素 

var context=canvas.getcontext("2d");// 获 取 2D 绘 制 上 下 文 

context .fillStyle="#f00";// 设 置 填充 色 为 红色 
context .fillRect(0, 0,10,10);// 填 充 一 个 正方 形 
canvas=document .getElementById("circle");// 第 二 个 画布 元 素 
context=canvas.getcontext("2d");// 获 取 它 的 绘制 上 下 文 
context .beginPath();// 开 始 一 条 新 的 路 径 
context.arc(5,5,5,0,2*Math.PI,true);// 将 
context .fillStyle="#00f";// 设 置 填充 色 为 蓝 色 
context .fill( );// 填 充 路 
</script> 

</body> 




































































en 





添加 到 该 路 径 中 



































HAN 





之 前 我 们 看 到 SVG 使 用 可 以 绘制 或 填充 的 线段 和 曲线 这 种 路 径 来 摘 
述 复杂 的 图 形 。 画 布 API 也 采用 “路 径 ” 的 思想 。 然 而 不 同 的 是 ， 相 比 
SVG 使 用 一 个 包含 了 字母 和 数字 的 字符 串 来 描述 路 径 ， 男 布 API 是 通过 
一 系列 方法 调用 来 定义 路 径 的 ， 如 上 述 代码 中 的 beginPath() 和 arc() 方 法 
调用 。 一 旦 定义 了 路 径 ， 其 他 的 诸如 flO 这 样 的 方法 就 可 以 在 该 路 径 上 
操作 了 。 而 像 fllStyle 这 样 的 上 下 文 对 象 的 属性 则 是 指定 了 如 何 进行 这 
些 操作 。 接 下 来 的 内 容 将 解释 : 


:如何 定 义 路 径 、 如 何 绘制 或 者 说 勾勒 路 径 的 外 边框 以 及 如 何 填 充 
路 径 的 内 部 。 


:如何 设置 和 获取 画布 上 下 文 对 象 的 属性 以 及 如 何 保存 和 恢复 这 些 








属性 的 当前 状态 。 
:画布 的 大 小 、 默 认 画 布 坐标 系 以 及 如 何 进行 坐标 变换 。 
:画布 API 定 义 的 大 量 的 绘制 曲线 的 方法 。 
:一些 用 于 绘制 长 方形 的 专用 工具 方法 。 
如何 指定 颜色 、 使 用 透明 度 以 及 如 何 绘制 渐变 色 和 重复 的 图 案 。 
-控制 线条 宽度 以 及 顶点 和 端点 外 观 的 属性 。 
:如 何在 <canvas 之 元 素 中 绘制 文本 。 
如何“ 裁剪 ”图形 以 保证 图 形 不 超过 指定 区 域 。 
如何 给 图 形 添加 下 拉 阴 影 效 果 。 


“如 何在 画布 中 绘制 (和 选择 性 地 伸缩 图 形 以 及 如 何 作为 图 片 从 
画布 中 提取 内 容 。 


:如 何 控 制 画 布 中 新 画 〈( 半 透明 ) 像素 和 原 有 像素 的 融合 过 程 。 


-在 画布 中 ， 如 何 设置 和 查询 像素 的 红 、 绿 、 蓝 色 值 以 及 alpha 值 
〈 透 明度 ) 。 


当 在 画布 中 绘制 图 形 的 时 候 ， 如 何 判 定 是 人 否 触 发 了 鼠标 事件 。 


本 节 最 后 会 展示 一 个 实际 示例 ， 其 使 用 <canvas 之 元 素 绘制 一 个 小 
的 内 联 图 表 ， 一 般 称 为 “迷你 图 ”(sparkline)〉。 


下 面 大 部 分 的 二 canvas 二 例子 都 使 用 到 了 变量 ec。 该 变量 保存 画布 的 
CanvasRenderingContext2D 对 象 ， 但 是 例子 中 并 没有 显示 c 是 如 何 初 始 化 
的 。 要 让 这 些 例子 能 够 正常 运行 ， 需 要 在 HIML 中 定义 个 适当 大 小 的 男 
布 ， 然 后 添加 下 面 这 段 用 于 初始 化 变量 c 的 代码 : 


























var canvas=document. getElementById( my_canvas_id"); 
var c=canvas.getContext('2d'); 





下 面 所 有 的 图 都 是 通过 JavaScript 代 码 在 二 canvas 之 元 素 上 绘制 的 
人 画布 中 绘制 高 分 辨 率 〈 达 到 印刷 质量 ) 的 
形 。 


21.4.1 绘制 线段 和 填充 多 边 形 


要 在 画布 上 绘制 线段 以 及 填充 这 些 线段 闭合 的 区 域 ， 从 定义 一 条 路 
径 开 始 。 路 径 有 许多 子路 径 组 成 ， 子 路 径 又 是 由 两 个 或 多 个 点 之 间 连 接 
而 成 的 线段 组 成 (或 者 后 面 将 介绍 的 曲线 段 )。 调 用 beginPath() 方 法 开 
人 定义 一 条 新 的 路 径 ， 而 调用 moveTo() 方 法 则 开始 定义 一 条 新 的 子路 
径 。 we 接 下 来 就 可 以 调用 
lineTo(0) 方 法 来 将 该 点 与 新 的 一 个 点 通过 直线 连接 起 来 。 如 下 代码 定义 
一 条 包含 了 两 条 线段 的 路 径 : 











c.beginPath() ;// 开 始 一 条 新 路 径 

c.moveTo(100,100);// 从 (190,100) 开 始 定义 一 条 新 的 子路 径 
c.1ineTo(200,200);// 从 (100,100) 到 (200, 200 ) 绘 制 一 条 线段 
c.lineTo(100,200);// 从 (290,200) 到 (100,200 ) 绘 制 一 条 线段 














上 述 代 码 只 是 简单 地 定义 一 条 路 径 ， 并 没有 在 画布 上 绘制 任何 图 
。 要 在 路 径路 eC Mh i 
由 要 填充 这 些 线段 闭合 的 区 域 可 以 通过 调用 fill0 方 法 : 





c.fil1( );// 填 充 一 个 三 角形 区 域 
Cc.stroke( );// 绘 制 三 角形 的 两 条 边 





上 述 代 码 《〈 再 加 上 一 些 设置 线段 宽度 和 填充 颜色 的 代码 ) 会 泻 染 出 
图 21-5 所 示 图 形 : 





图 21-5 一 条 绘制 并 填充 的 简单 路 径 


要 注意 的 是 上 述 定义 的 子路 径 是 “未 闭合 ”的 。 它 只 包含 两 条 线段 ， 
线段 的 终点 并 没有 和 起 点 汇合 。 也 就 是 ， 它 并 没有 闭合 一 个 区 域 。 对 于 
这 样 “ 未 闭合 ”的 子路 征 ， 调 用 纳 0 广 法 圳 充 的 时 候 ， 会 假设 了 了 路径 的 终 
点 和 子路 径 的 起 点 是 连接 起 来 。 这 就 是 为 什么 ， 上 述 代 码 填充 成 了 一 个 
三 角形， 但 是 只 4 勾勒 了 三 角形 的 两 条 边 。 


想 要 勾勒 出 上 述 三 角形 的 三 条 边 ， 可 以 调用 closePath0) 方 法 将 子路 
径 的 起 反 和 终点 其 正 连接 起 来 ; 还 可 以 调用 lineTo(100,100)， 但 是 ， 这 
样 的 话 ， 最 终 表 现 出 来 的 只 是 三 条 线段 共用 了 一 个 起 点 和 一 个 终点 ， 但 
并 未 真正 财 合 。 因 此 ， 当 绘制 比较 粗 的 线段 时 ， 如 果 使 用 closePath() 方 
法 ， 视 觉 效果 会 更 好 。 


关于 stoke0) 方 法 和 {fill(0) 方 法 还 有 男 外 非常 重要 的 两 点 。 第 一 点 是 : 
这 两 个 方法 都 是 作用 在 当前 路 径 上 的 所 有 子路 径 。 假 设 在 上 述 术 代码 中 再 
加 入 如 下 代码 : 























c.moveTo(300,100);// 在 (309,100) 上 开始 一 条 新 的 子路 径 
c.lineTo(300,200);// 以 (300, 200 ) 结 束 绘制 一 条 竖 直 线段 



































如 果 再 调用 stroke0) 方 法 ， 束 会 绘制 出 三 角形 的 两 条 相连 的 边 ， 以 及 
一 条 断 开 的 竖 直 线段 。 


第 二 点 是 : stroke0) 方 法 和 fl0 方 法 都 不 更 改 当 前 路 径 。 可 以 调用 
fill(0) 方 法 ， 但 是 之 后 调用 stroke0) 方 法 时 候 当 前 路 径 不 变 。 完 成 一 条 路 径 
后 要 再 重新 开始 另 一 条 路 径 ， 必 须要 记得 调用 beginPath(0) 方 法 。 如 果 没 








有 调用 beginPath() 方 法 ， 那 么 之 后 添加 的 所 有 子路 径 都 是 添加 在 己 有 路 
径 上 ， 并 且 有 可 能 重复 绘制 这 些 子 路 径 。 


例 21-4 定 义 了 一 个 函数 ， 用 于 绘制 规则 的 多 边 形 ， 同 时 展示 了 如 何 
使 用 moveTo0、1lineTo0 和 closePath(0) 方 法 来 定义 子路 径 以 及 如 何 使 用 
fill0 方 法 和 stoke(0) 方 法 来 绘制 这 些 路 径 。 最 终 绘 制 出 来 的 网 形 如 网 21-6 
所 示 。 


图 21-6 规则 多 边 形 
例 21-4: 使 用 moveTo0、1lineTo0 和 closePath() 方 法 绘制 规则 多 边 形 





// 定 义 一 个 以 (xy y ) 为 中 心 ， 半 径 为 r 的 规则 n 边 形 

// 每 个 顶点 都 是 均匀 分 布 在 圆周 上 

// 将 第 一 个 顶点 放置 在 最 上 面 ， 或 者 指定 一 定 角度 

// 除 非 最 后 一 个 参数 是 true， 否 则 顺 时 针 旋 转 

function polygon(c,nyvxyyrrvangle, counterclockwise){ 
angle=angle||9; 

counterclockwise=counterclockwise||false; 
c.moveTo(x+r*Math.sin(angle), /7 从 第 一 个 顶点 开始 一 条 新 的 子路 径 
y-rx*Math.cos(angle) );// 使 用 三 角 法 计算 位 置 
var delta=2*Math.PI/n; // 两 个 顶点 之 间 的 夹 角 
for(var i=1;i<n; i++){f// 循 环 剩余 的 每 个 顶点 
angle+= counterclockwise?- delta:delta;// 调 整 角度 
c.lineTo(x+r*Math.sin(angle), /7 以 下 个 项 点 为 端点 添加 线段 
y-r*Math.cos(angle)); 


} 
c.closePath( );// 将 最 后 一 个 顶点 和 起 点 连接 起 来 


} 

// 开 始 一 个 新 的 路 径 并 添加 一 条 多 边 形 子路 径 
c.beginPath() 
polygon(c,3,50,70,50);// 三 角形 
polygon(c,4,150,60,50,Math.PI/4);// 正 方形 
polygon(c,5,255,55,50);// 五 边 形 











































































































polygon(c,6,365,53,50,Math.PI/6);// 六 边 形 
polygon(c,4,365,53,20,Math.PI/4,true);// 六 边 形 中 的 小 正方 形 
// 设 置 属 属性 来 控制 图 形 外 观 
c.fillStyle="#ccc";// 内 部 使 用 浅 灰 色 
c.strokeStyle="#008";// 深 蓝 色 外 边框 
c.1Linewidth=5;//5 个 像素 宽 

// 调 用 如 下 函数 绘制 所 有 这 些 多 边 形 (每 个 分 别 定 义 在 自己 的 子路 径 中 ) 
c.fill( );// 填 充 图 形 
c.stroke( );// 勾 勒 外 边框 






































































































































要 注意 的 是 上 述 例 子 绘制 了 一 个 内 部 包含 正方 形 的 六 边 形 。 正 方形 
和 六 边 形 是 两 条 独立 的 子路 径 ， 但 它们 互相 重 登 。 当 出 现 该 情况 〈 或 当 
单条 子路 径 与 目 身 相交 ) 时 ， 画 布 需要 能 够 确定 哪些 区 域 在 路 径 里 面 ， 
哪些 在 外 面 。 画 布 会 采用 “ 非 零 绕 数 原则 ”测试 来 判断 它们 。 在 上 述 例 子 
中 ， 由 于 六 边 形 和 正方 形 绘制 的 方 回 不 同 : 六 边 形 的 项 点 是 沿 厦 顺 时 针 
方向 来 连接 的 ， 而 正方 形 项 点 则 是 沿 着 逆 时 针 连 接 的 ， 因 此 根据 “ 非 零 
绕 数 原则 ”， 对 内 部 的 正方 形 不 进行 填充 。 换 句 话说 ， 如 来 正方 形 也 沿 
大 顺 时 针 方向 连接 的 话 ， 调 用 fl0 方 法 的 时 候 就 会 对 正方 形 也 进行 填充 
Ts 











非 零 绕 数 原则 


要 检测 一 个 点 P 是 否 在 路 径 的 内 部 ， 使 用 非 零 绕 数 原 则 : 想象 一 条 
从 点 P 出 发 沿 着 任意 方向 无 限 延伸 (或 者 一 直 延 伸 到 路 径 所 在 的 区 域外 
某 点 ) 的 射线 。 现 在 从 0 开始 初始 化 一 个 计数 器 ， 然 后 对 所 有 穿 过 这 条 
射线 的 路 径 进 行 枚 举 。 每 当 一 条 路 径 顺 时 针 方 向 穿 过 射线 的 时 候 ， 计 数 
器 就 加 1; 反之 ， 就 减 1。 最 后 ， 枚 举 完 所 有 的 路 径 之 后 ， 如 果 计 数 器 的 
值 不 是 0， 那 么 就 认为 P 是 在 路 径 内 。 反 之 ， 如 果 计 数 器 的 值 是 0， 则 认 
为 P 在 路 径 外 。 


21.4.2 ”网 形 属性 


例 21-4 设 置 了 男 布 的 上 下 文 对 象 的 flStyle、strokeStyle 以 及 
lineWidth 属 性 。 这 些 属性 都 是 图 形 属性 ， 分 别 指定 了 调用 1 和 stroke() 
时 候 要 采用 的 颜色 以 及 调用 stroke() 方 法 绘制 线段 时 的 线段 宽度 。 要 注意 
的 是 ， 这 些 参数 不 是 传递 给 fil0 和 stroke() 方 法 的 ， 而 是 作为 画布 的 通用 
图 形状 态 。 如 果 定 义 一 个 绘制 形状 的 方法 ， 但 是 该 方法 没有 设置 这 些 属 
性 ， 那 么 调用 者 可 以 在 调用 该 方法 前 ， 设 置 strokeStyle、fillStyle 属 性 。 
这 种 将 从 将 图 形状 态 和 绘制 指令 分 离 的 细 想 是 画布 API 中 很 重要 的 概 
念 ， 同 时 也 和 通过 在 HTML 文档 中 应 用 CSS 样 式 来 实现 表现 和 内 容 分 离 











是 类 似 的 。 


画布 API 中 在 CanvasRenderingContext2D 对 象 上 定义 了 15 个 图 形 属 
性 。 表 21-1 中 列 出 了 这 些 属性 ， 并 对 它们 一 一 进行 了 说 明 。 


表 21.1， 画布 APl 中 定义 的 图 形 属性 


属性 含义 

fillstyle 填充 时 候 的 颜色 、 浙 变 或 图 案 等 样式 
font 绘制 文本 时 候 的 CSS 字 体 
globalAlpha 绘制 像素 时 候 要 添加 的 透明 度 
globalComposite0peration ”如何 合并 新 的 像素 点 和 下 面 的 像素 点 
lineCap 如 何 泻 染 线段 的 末端 

lineJoin 如 何 泻 染 顶 扣 


lineWidth 外 框 线 的 宽度 


属性 含义 


miterLimit 紧急 斜 接 顶点 的 最 大 长 度 

textAlign 文本 水 平 对 齐 方式 

textBaseline 文本 垂直 对 齐 方式 

shadowBlur 阴影 的 清晰 或 模糊 程度 

shadowColor 下 拉 阴 影 的 颜色 

shadowOffsetX 阴影 的 水 平 偶 移 量 

shadowOffsetY 阴影 的 垂直 偏 移 量 

strokeStyle 勾勒 线段 时 的 颜色 、 源 变 或 图 案 等 样式 


因为 画布 API 在 上 下 文 对 象 上 定义 图 形 属性 ， 所 以 你 也 许 试图 多 次 
调用 getContext() 方 法 来 获取 多 个 上 下 文 对 象 。 如 果 可 以 这 样 ， 能 够 在 每 
个 上 下 文中 定义 不 同 的 属性 : 在 每 个 上 下 文中 ， 就 好 像 拥有 了 不 同 的 男 
笔 ， 将 会 绘制 出 不 同 的 颜色 ， 或 者 不 同 宽 度 的 线段 。 遗 憾 的 是 ， 在 画布 
中 不 能 这 样 使 用 。 每 个 和 canvas 之 元 素 只 有 一 个 上 下 文 对 象 ， 因 此 每 次 
调用 getContext(0) 方 法 都 会 返回 相同 的 CanvasRenderingContext2D 对 象 。 


尽管 画布 API 只 人 允许 一 次 设置 单一 的 图 形 属性 集合 ， 但 是 它 人 允许 保 
存 当 前 图 形状 态 ， 这 样 就 可 以 在 多 个 状态 之 间 切 换 ， 之 后 也 可 以 很 方便 
地 恢复 。 调 用 save0 方 法 会 将 当前 图 形状 态 压 入 用 于 已 保存 状态 的 栈 
上 。 调 用 restore(0) 方 法 会 从 栈 中 弹出 并 恢复 最 近 一 次 保存 的 状态 。 表 21- 
1 中 列 出 的 所 有 属性 都 是 已 保存 状态 的 一 部 分 ， 包 括 当 前 的 转换 信息 以 
及 裁剪 区 域 等 信息 〈 两 者 都 会 在 后 面 做 介绍 ) 都 是 已 保存 状态 的 一 部 
分 。 但 是 ， 很 重要 的 一 点 是 : 当前 定义 的 路 径 以 及 不 属于 图 形状 态 的 当 
前 点 都 不 能 保存 和 恢复 。 


如 果 需 要 比 简 单 的 图 形状 态 栈 允许 的 方式 更 加 灵活 ， 可 以 像 例 21-5 
那样 定义 一 个 工具 方法 : 























例 21-5: 图 形状 态 管理 工具 








// 恢 复 最 后 一 次 保存 的 图 形状 态 ， 但 是 让 该 状态 从 栈 中 弹出 
CanvasRenderingContext2D.prototype.revert=function(){ 
this.restore();// 恢 复 最 后 一 次 保存 的 图 形状 态 
this.save( );// 再 次 保存 它 以 便 后 续 使 用 
return this;// 人 允许 方法 多 
}; // 通 过 oO 对象 的 属性 来 设 图 形 属 性 
// 或 者 ， 如 果 没 有 提供 参数 ， 就 以 对 象 的 方式 返回 当前 属性 
// 要 注意 的 是 ， 它 不 处 理 变换 和 裁剪 区 域 
CanvasRenderingContext2D,.prototype,.attrs=function(o){ 
if(0){ 
for(var a in o)// 遍 历 o 对 象 中 的 每 个 属性 
this[a]=o[a];// 将 它 设置 成 图 形 属性 
return this;// 启 用 方法 链 











































































































































































































else returnt 

fillSstyle:this.fillStyle, font:this.font, 
globalAlpha:this.globalAlpha, 
globalCompositeOperation:this.globalCompositeOperation, 
lineCap:this.1lineCap,1lineJoin:this.1lineJoin, 
lJinewidth:this.]linewidth,miterLimit:this.miterLimit, 
textAlign:this.textAlign, textBaseline:this.textBaseline, 
shadowBlur:this.shadowBlur, shadowColor:this,.shadowColor, 
shadowOoffsetX:this.shadowoffsetX,shadowOoffsetY:this.shadowoffsetyY, 
strokeSstyle:this.strokeStyle 

}; 

}; 





21.4.3 ”画布 的 尺寸 和 坐标 


<<canvas 之 元 素 的 width 以 及 height 属 性 和 对 应 的 了 画布 对 象 的 宽度 以 
及 高 度 属性 决定 了 画布 的 尺寸 。 画 布 的 默认 坐标 系 是 以 画布 最 左上 角 为 
RN 越 往 下 Y 轴 的 数值 越 大 。 画 布 
上 的 点 可 以 使 用 浮 点 数 来 指定 坐标 ， 但 是 它们 不 会 自动 转换 成 整 型 值 
一 一 画布 采用 有 反 锯 人 齿 的 方式 来 模拟 部 分 填充 的 像素 。 


画布 的 尺寸 是 不 能 随意 更 改 的 ， 除 非 完 全 重 置 画布 。 a 
width 属性 或 吉 hieht 必 性“ 哪 愉 量 宣 的 时 候 局 从 估 不 变 》， 者 人 
个 画布 ， 要 你 学生 的 路 径 并 且 全 重 轩 所 有 的 图 形 局 性 《 包 据 当 窗 的 这 
和 裁 甬 区 域 ) 为 初始 状态 。 


管 画 布 尺 寸 是 很 重要 的 概念 ， 但 是 设置 了 男 布 尺寸 的 大 小 ， 未 必 
能 够 保证 加 在 屏 荣 上 展 贡 的 大 涉 沽 者 组 成 本 布 维 图 图 面 的 所有 像素 点 
的 个 数 一 致 。 男 布 尺寸 《以 及 默认 的 坐标 系统 ) 都 是 以 CSS 像 妹 为 单位 
的 。CSS 像 素 和 常规 的 像素 是 一 样 的 。 然 而 ， 
要 求 将 多 设备 像 系 映射 到 单个 CSS 像 素 上 。 这 也 就 意味 着 ， 画 布 上 一 个 






































长 方形 的 像素 在 高 分 辨 率 显 示 环 境 下 可 能 要 比 它 实 际 的 大 小 要 大 。 当 使 

用 画布 的 像素 操作 特性 的 时 候 〈 参 见 21.4.14 节 ) ， 尤 其 要 深 知 这 一 点 。 

ee 
王 何 影 啊 。 


默认 情况 下 ， 扫 canvas 之 会 按照 它 设 置 的 HIML width 和 height 属 性 
值 来 显示 画布 大 小 (以 CSS 像 素 为 单位 )。 但 是 ， 和 其 他 HTML 元 系 一 
样 ，<canvas 之 元 系 还 可 以 通过 CSS 的 width 和 height 样 式 属 性 来 设置 它 
的 屏幕 显示 大 小 。 如 采 指 定 画 布 的 屏幕 显示 大 小 和 它 的 实际 尺寸 不 同 ， 
那么 画布 上 所 有 的 像素 都 会 自动 缩放 以 适合 通过 CSS 属 性 指定 的 屏幕 显 
示 尺 寸 。 画 布 的 屏幕 显示 大 小 不 会 影响 国 布 位 图 的 CSS 像 素 或 者 人 硬件 像 
素 的 个 数 ， 它 的 缩放 是 采用 图 片 缩放 方式 处 理 的。 如 果 屏 幕 显示 尺寸 要 
远 远大 于 画布 的 实际 尺寸 ， 那 么 会 导致 像素 化 图 形 。 这 个 问题 需要 网 形 
设计 师 去 考虑 ， 和 男 布 编程 无 关 。 


21.4.4 坐标 系 变换 


此 前 提 到 过 ， 黑 认 坐 标 系 是 以 画布 最 左上 角 为 坐标 原点 (0,0)。 越 往 
右 X 轴 的 数值 越 大 ， 越 往 FY 轴 的 数值 越 大 。 在 默认 坐标 系 中 ， 每 一 个 
扩 的 坐标 都 是 直接 映射 到 一 个 CSS 像 素 上 “(CSS 像素 之 后 再 映射 到 一 个 
或 者 多 个 设备 像素 ) 。 男 布 中 一 些 特定 的 操作 和 属性 的 设置 “诸如 抽取 
原始 像素 值 以 及 设置 阴影 侦 移 量 ) 都 使 用 默认 坐标 系 。 然 而 ， 除 了 默认 
的 坐标 系 之 外 ， 每 个 画布 还 有 一 个 “当前 变换 矩阵 ?， 作 为 图 形状 态 的 一 
部 分 。 该 窍 阵 定义 了 画布 的 当前 坐标 系 。 当 指定 了 一 个 点 的 坐标 后 ， 男 
布 的 大 部 分 操作 都 会 将 该 点 映射 到 当前 的 坐标 系 中 ， 而 不 是 默认 的 坐标 
ne 
小 。 




















尽管 通过 调用 setTransform() 方 法 能 够 直接 设置 男 布 的 变换 矩阵 ， 但 
是 通过 转换 、 旋 转 和 缩放 操作 更 容易 实现 坐标 系 变 换 。 图 21-7 展 示 了 这 
些 操作 以 及 操作 之 后 画布 坐标 系 的 样子 。 实 现 该 图 的 程序 其 实 只 是 将 同 
一 组 坐标 轴 在 一 行 中 绘制 了 7 遍 。 这 7 次 绘制 中 唯一 不 同 的 只 是 坐标 系 不 
同 而 已 。 这 里 要 注意 的 是 ， 坐 标的 变换 还 影响 了 文本 和 线段 的 绘制 。 


调用 translate() 方 法 只 是 简单 地 将 坐标 原点 进行 上 、 下 、 左 、 石 移 
动 。 调 用 rotate() 方 法 会 将 坐标 轴 根 据 指定 角度 〈( 男 布 API 总 是 以 弧度 制 
来 表示 角度 。 要 将 角度 制 转换 成 踊 度 制 ， 可 以 通过 Math.PI 来 对 180 进 行 
乘除 来 实现 ) 进行 顺 时 针 旋 转 。 调 用 scale() 方 法 实现 对 X 轴 或 者 Y 轴 上 的 




















距离 进行 延长 和 缩短 。 


调用 scale(0) 方 法 的 时 候 传递 负 值 会 实现 以 坐标 原点 做 参照 点 将 坐标 
轴 进 行 翻转 ， 就 好 像 是 镜子 中 的 镜像 。 图 21-7 中 最 左下 角 的 图 束 是 这 样 
实现 的 : translate() 方 法 用 来 将 坐标 原点 移动 到 画布 最 左下 角 ， 然 后 
scale() 方 法 用 于 实现 将 Y 轴 进行 翻转 ， 这 样 就 变 成 了 越 往 上 Y 轴 的 值 越 
大 。 一 个 翻转 过 的 坐标 系 和 代数 课 上 经 常 使 用 的 坐标 系 类 似 ， 它 有 助 于 
在 图 表 上 面 给 | 数据 点 。 但 是 要 注意 的 是 ， 它 同时 也 让 文本 变 的 难以 阅 
Ls 


1. 从 数学 角度 来 理解 坐标 系 变换 

我 发 现 从 几何 学 的 角度 很 容易 理解 坐标 变换 ， 把 translate() 方 法 、 
rotate() 方 法 以 及 scale0 方 法 想象 成 如 图 21-7 所 示 的 对 坐标 轴 的 变换 ， 束 
很 容易 理解 了 。 从 代数 角度 也 很 容易 理解 坐标 变换 ， 就 是 把 变换 想象 成 
一 个 在 变换 后 坐标 系 中 的 点 (x,y)， 到 了 原来 的 坐标 系统 就 变 成 了 (x',y')。 


调用 c.translate(dx,dy) 方 法 就 等 效 于 如 下 表达 式 .: 











x'=x+dx;// 新 系统 中 X 轴 的 0， 在 原 系 统 中 就 是 dx 
y'=y+dy; 





c,translate(s, 9) 


CcC.translate (zz29S3,120) 
Es 
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图 21-7 坐标 系 变换 
缩放 操作 也 可 以 类 似 地 作 等 效 。 调 用 c.scale(sx,sy) 就 等 效 于 如 下 表 


达 式 : 





Xx'=SXx*x; 
y'=SsSy*y; 


旋转 操作 则 相对 比较 复杂 。 调 用 c.rotate(a) 可 以 通过 三 角 法 则 等 效 于 
如 下 表达 式 : 


x'=x*cos(a)-y*sin(a); 
y'=y*cos(a)+x*sin(a); 











要 注意 的 是 ， 坐 标 系 变换 是 与 顺序 相关 的 。 假 设 从 画布 默认 的 坐标 
系 开 始 ， 然 后 进行 变换 ， 再 进行 伸缩 。 如 此 操作 之 后 ， 要 想 将 现 有 坐标 
系 中 的 点 (xy) 映 射 成 默认 坐标 系 中 的 点 (xy)， 必 须 首 先 应 用 等 效 的 缩 
放 等 式 把 该 点 映射 到 未 缩放 坐标 系 中 的 一 个 中 间 点 (xy)， 然 后 再 使 用 
等 效 的 变换 来 将 中 间 点 再 映射 到 原来 坐标 系 中 的 点 Cx,y)。 络 条 如 下 所 
pa 





x''=Ssx*x+dx; 
y''=sy*y+dy; 


如 果 先 调用 scal0 方 法 再 调用 translate() 的 话 ， 那 等 效 的 结果 就 不 同 
了 了 : 


X' =SX*(X+dx)， 
y''=sy* (y+dy); 





这 里 要 记 住 的 最 重要 的 一 点 是 : 从 代数 的 角度 去 思考 坐标 变换 的 时 
候 ， 必 须 是 进行 反 回 还 原 变 换 的 《以 相反 的 顺序 来 进行 等 效 的 变换 ) 。 
而 从 几何 角度 去 思考 坐标 变换 的 时 候 ， 是 顺序 去 做 变换 的 。 


画布 支持 的 这 种 变换 称 做 “ 仿 射 变换 ”(affine  _ transform ) 。 仿 射 变 
换 可 能 会 修改 点 之 间 的 距离 和 线段 间 的 夹 角 ， 但 是 对 于 平行 线 而 言 ， 经 








过 仿 射 变换 后 也 始终 保持 平行 不 可 能 通过 仿 射 变换 来 实现 鱼 
眼镜 头 变形 。 任 意 的 仿 射 变换 可 以 利用 a~f 6 个 参数 等 效 描述 成 如 下 形 


3 








Xx'=ax+cy+e 
y'=bx+dy+f 





通过 同 transform() 方 法 传递 上 述 6 个 参数 就 可 以 应 用 任意 仿 射 变换 到 
当前 的 坐标 系 。 图 21-7 展 示 的 是 两 
还 可 以 像 如 下 代码 那样 ， 使 用 transform() 来 实现 相同 的 变换 : 





已 x 























// 扭 曲 变 换 : 

//X'=x+kx*y; 

//y'=y+tky*x; 

function shear(c,kx,ky){c.transform(1,ky,Kkx,1,0,0);}// 沿 着 点 (Xx,y) 顺 时 针 旋转 theta 和 角度 
(弧度 制 ) 

// 这 也 可 以 通过 变换 、 旋 转 、 变 换 序列 操作 来 完成 

function rotateAbout(c, theta, x,y)t{ 

var ct=Math.cos(theta),st=Math. sin(theta); 

c.transform(ct, -st,st,ct,-x*ct-y*st+x,x*st-y*ct+y); 


























setTransform() 方 法 和 transform() 方 法 接受 同样 的 参数 ， 但 不 同 的 
是 ， 前 者 不 是 对 当前 坐标 系 进行 变换 ， 而 是 对 默认 坐标 系 进行 变换 ， 并 
将 结果 映射 到 新 的 坐标 系 中 。setTransform() 对 临时 将 画布 重 置 为 默认 举 
标 系 是 很 有 用 的 : 








c.save();// 保 存 当 前 坐标 系 
c.setTransform(1,09,0,1,0,0);// 恢 复 到 默认 坐标 系 
// 使 用 默认 的 CSS 像 素 坐 标 进 行 操作 

c.restore( );// 恢 复 保存 的 坐标 系 









































2. 坐 标 系 变换 例子 


例 21-6 证 明了 坐标 变换 的 威力 : 通过 递归 调用 translate0 方 法 、 
rotate() 方 法 以 及 scale0 方 法 来 实现 绘制 科 赫 雪花 分 形 。 例 21-6 的 结果 如 
图 21-8 所 示 ， 展 示 了 0 一 4 不 同 分 形 级 别 的 科 赫 雪花。 





图 。 21-8 科 赫 雪花 





实现 这 些 雪 人 花 的 代码 是 非常 简洁 优雅 的 ， 但 是 由 于 使 用 了 递归 坐标 
变换 ， 因 此 代码 会 比较 难 全 。 即 便 没 有 注意 到 所 有 这 些 细微 区 别 ， 这 里 
要 注意 的 是 ， 代 码 仅 包含 了 对 lineTo() 方 法 单 次 调用 。 图 21-8 中 的 每 一 条 
线段 都 是 通过 如 下 方式 来 绘制 的 : 





c.lineTo(len,o0); 





len 变 量 的 值 在 代码 执行 的 过 程 中 是 不 会 改变 的 ， 因 此 ， 线 段 的 位 
置 、 方 向 和 长 度 完 全 通过 变换 、 旋 转 以 及 缩放 等 操作 来 指定 。 


例 21-6: 通过 坐标 系 变 换 实 现 绘制 科 赫 雪 伦 














var deg=Math .PI/180;// 用 于 角度 制 到 弧度 制 的 转换 

// 在 画布 的 上 下 文 c 中 ， 以 左下 角 的 点 (Xx,y) 和 边 长 len， 绘 制 一 个 n 级 别 的 科 赫 雪花 分 形 
function snowflake(c,n,x,y,1len)t{ 

c.save();// 保 存 当前 变换 

c.translate(x,y);// 变 换 原点 为 起 始点 

c.moveTo(0,0);// 从 新 的 原点 开始 一 条 新 的 子路 径 

leg(n) ;// 绘 制 雪花 的 第 一 条 边 

c.rotate(-120x*deg) ;// 现 在 沿 着 道 时 针 方向 旋转 1209 

leg(n);// 绘 制 第 二 条 边 
c.rotate(-120*deg);// 再 次 旋转 
leg(n);// 画 最 后 一 条 边 

c.closePath( );// 闭 合子 路 径 
c.restore();// 恢 复 初始 的 变换 
// 绘 制 n 级 别 的 科 赫 雪花 的 一 条 边 

// 此 函数 在 画 完 一 条 边 的 时 候 就 离开 当前 点 ， 
// 然 后 通过 坐标 系 变换 将 当前 点 又 转换 成 (9, 0, ) 
// 这 意味 着 画 完 一 条 边 之 后 可 以 很 简单 地 调用 rotate( ) 进 行 旋转 
function leg(n)t{ 


Cc.Ssave( );// 保 存 当 前 坐标 系 变 换 





























































































































if(n==0){// 不 需要 递归 的 情况 下 : 
c.1lineTo(len,90);// 就 绘制 一 条 水 平 线段 
} 











else{// 递 归 情 况 下 : 绘制 4 条 子 边 ， 类 似 这 个 样子 : “\/- 
c.scale(1/3,1/3);// 子 边 长 度 为 原 边 长 的 1/3 
leg(n-1);// 递 归 第 一 条 子 边 


Ct. rotate(69° deg); // 顺 时 针 旋 转 699 
leg(n-1);// 第 二 条 子 边 
c.rotate(-120*deg);// 道 时针 旋 转 1200 
leg(n-1);// 第 三 条 子 边 
c.rotate(60*deg);// 通 过 旋转 回 到 初始 状态 
leg(n-1);// 最 后 一 条 边 




















} 

c.restore();// 恢 复 坐 标 系 变换 

c.translate(len,9);// 但 是 通过 转换 使 得 边 的 结束 点 为 (9, 9) 
} 























} 

snowflake(c,90,5,115,125);//9 级 别 的 雪花 就 是 一 个 三 角形 
snowflake(c,1,145,115,125);//1 级 别 的 雪花 就 是 一 个 六 角 星 
snowflake(c,2,285,115,125);// 依 次 类 推 
snowflake(c,3,425,115,125); 
snowflake(c,4,565,115,125);//4 级 别 的 雪花 看 起 来 真 的 像 一 条 雪花 了 
c.stroke(); // 义 勒 当前 复杂 的 路 径 

































































21.4.5 ”绘制 和 填充 曲线 


0 子路 径 又 由 连接 的 点 组 成 。 1 
的 路 径 中 ， 那 些 点 是 通过 直线 段 来 连接 的 ， 但 点 与 点 之 间 并 不 总 是 通 
直线 段 连接 的 。CanvasRenderingContext2D 对 象 定义 了 一 些 方法 ， © 
> 





arc() 


此 方法 实现 在 当前 子路 径 中 添加 一 条 弧 。 它 首先 将 当前 点 和 弧 形 的 
起 点 用 一 条 直线 连接 ， 然 后 用 圆 的 一 部 分 来 连接 弧 形 的 起 点 和 终点 ， 并 
把 弧 形 终点 作为 新 的 当前 点 。 要 绘制 一 个 弧 形 需 要 指定 6 个 参数 ， 圆 心 
的 X、YY 坐 标 、 圆 的 半径 、 弧 形 的 起 始 和 结束 的 角度 以 及 弧 形 的 方 癌 

〈 顺 时 针 还 是 逆 时 针 ) 。 


arcTo() 


此 方法 绘制 一 条 直线 和 一 段 圆 弧 〈 和 arc0) 方 法 一 样 ) ， 但 是 ， 不 同 
的 是 ， 绘 制 圆 浙 的 时 候 指定 的 参数 不 同 。arc() 方 法 参数 需要 指定 点 P1 和 
P2 以 及 半径 。 绘 制 的 圆 引 有 指定 的 半径 并 且 和 当前 点 到 P1 的 直线 以 及 经 














过 P1 和 P2 的 直线 都 相 切 。 此 种 绘制 圆 弧 的 方法 看 似 有 点 儿 奇 怪 ， 但 是 对 
于 绘制 带 有 圆 角 的 形状 是 非常 有 用 的 。 当 指定 的 半径 为 0 时 ， 此 方法 只 
会 绘制 一 条 从 当前 点 到 P1 的 直线 。 而 当 半 径 值 非 零 时 ， 此 方法 会 绘制 一 
然后 将 这 条 直线 按照 圆 形 形状 变 成 曲线 ， 一 直 
到 它 指 癌 P2 方 同 。 








bezierCurveTol() 


此 方法 实现 在 当前 子路 径 中 添加 一 个 新 的 点 ， 并 利用 三 次 贝 赛 尔 曲 
线 将 它 和 当前 点 相连 。 曲 线 的 形状 由 两 个 “控制 点 "C1 和 C2 确 定 。 曲 线 
从 当前 点 开始 ， 治 着 C1 点 的 方 癌 延伸 ， 再 治 痢 C2 的 方 癌 延 伸 一 直到 后 
P。 曲 线 在 这 些 点 之 间 的 过 小 都 是 很 平滑 的 。 最 后 点 P 会 成 为 当前 点 。 








quadraticCurveTo() 


此 方法 和 bezierCurveTo() 方 法 类 似 ， 不 同 的 是 它 使 用 的 是 二 次 贝 寨 
尔 曲 线 而 不 是 三 次 贝 塞 尔 曲线 并 且 只 有 一 个 控制 点 。 


可 以 使 用 这 些 方法 来 绘制 出 如 图 21-9 所 示 的 图 形 : 





图 21-9 画布 中 的 曲线 路 径 
例 21-7 展 示 了 用 于 绘制 图 21-9 所 示 图 形 的 代码 。 代 码 中 展示 的 一 些 





方法 是 画布 API 中 比较 复杂 的 方法 的 一 部 分 。 想 要 了 解 这 些 复杂 方法 的 
细节 以 及 它们 的 参数 可 以 参见 第 四 部 分 。 


例 21-7: 在 路 径 中 添加 曲线 
































// 一 个 工具 函数 ， 用 于 将 角度 从 角度 制 转化 成 弧度 制 

function rads(x){freturn Math.PI*x/180;}/7/ 绘 制 一 个 圆 形 ， 如 果 需 要 椭圆 的 话 则 
旋转 即 可 
// 由 于 没有 当前 点 ， 因 此 绘制 的 圆 形 不 需要 当前 点 到 圆 形 起 点 之 间 的 直线 
c.beginPath() 
c.arc(75,100,50,// 圆 心 位 于 (75,100)， 半 径 为 50 
90, rads(360),false);// 从 6? 到 3699 顺 时 针 旋 转 
// 绘 制 一 个 攀 ， 角 度 从 x 轴 正 向 顺 时 针 度 量 
// 要 注意 的 是 arc( ) 方 法 会 将 当前 点 和 弧 形 起 点 用 直线 相连 
c.moveTo(200,100);// 从 圆心 开始 
c.arc(200,109,59, // 圆 心 和 半径 


rads(-60),rads(0),// 从 -600 开 始 一 直到 8?0 









































进行 相应 的 缩放 和 













































































































































































false);//false 表 示 顺 时 针 
c.closePath();// 将 半径 添加 到 圆心 
// 同 样 的 棉 ， 但 是 方向 不 同 
.moveTo(325,100); 
.arc(325,100,50,rads(-60),rads(0),true);// 逆 时 针 

.ClosePath();// 使 用 arcTo( ) 方 法 来 绘制 贺 角 ， 绘 制 一 个 以 点 (409, 50 ) 为 左上 角 同 时 还 带 有 不 同 半径 角 




















































































































C 
Cc 
Cc 
的 正方 形 
c.moveTo(450,50);// 从 上 边 的 中 点 开始 
c.arcTo(500,50,500,150,30);// 添 加 部 分 上 边 和 右上 
c.arcTo(500,150,400,150, 20);// 添 加 右上 角 和 右 下 和 角 
c.arcTo(400,150, 400, 50, 10) > // 添 加 底 边 和 左下 
c.arcTo(400, 50,500,50,0)// 添 加 左边 和 左上 和 角 
c.closepath( ); /7 闭合 路 和 和 芋 来 添加 其 余 的 上 边 
// 二 次 贝 塞 绒 尔 昌 线 : 个 控制 点 
c.moveTo(75,250);// 从 点 (75, 250) 开 始 
c.quadraticCcurveTo(100,200,175,250) ;// 画 一 条 以 一 直到 点 (175, 259 ) 结 束 的 曲线 
c. fillRect(100-3, 200-3,6, 6);// 标 记 控制 点 (100, 200 ) 
7 三 次 贝 塞 绒 尔 线 
.moveTo(200,250);// 从 点 (200, 250 ) 开 始 
bezierCurveTo(220,220,280,280,300, 250);// 男 一 条 以 
fillRect (226-3, 220-3, 6, 6) ; /7 标记 控 人 点 
fillRect (280-3,280-3,6,6);// 定 义 一 些 图 形 属性 并 绘制 曲线 
fillStyle="#aaa";// 填 充 灰 
linewidth=5;//5 个 像素 宽 的 黑色 默认 颜色 〉 线段 
fill(); // 填 充 该 线 
.Stroke( );// 勾 勒 外 边框 
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到 点 (300, 250 ) 结 束 的 曲线 
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8 从 
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21.4.6 ”和 矩形 


CanvasRenderingContext2D 对 象 定义 了 4 个 用 于 绘制 矩形 的 方法 。 ， 
21-7 使 用 了 其 中 一 个 方法 : fjRectO0， 来 标记 贝 塞 尔 曲 线 的 控制 点 。 
个 绘制 矩形 的 方法 都 接受 两 个 参数 ， 其 中 一 个 指定 矩形 的 一 个 顶点 ， 男 
一 个 参数 指定 矩形 的 宽 和 高 。 一 般 都 是 指定 矩形 的 左上 和 角 顶点 ， 然 后 再 
传递 表示 一 个 宽度 和 高 度 的 正 值 ， 当 然 也 可 以 指定 其 他 的 顶点 然后 传递 
表示 宽度 和 高 度 的 负 值 。 


fillRect0) 方 法 使 用 当前 的 他 1Style 来 填充 指定 的 矩形 。strokeRect() 方 
法 使 用 当前 的 strokeStyle 和 其 他 线段 的 属性 来 勾勒 指定 矩形 的 外 边框 。 
clearRect() 方 法 和 fillRect0 方 法 类 似 ， 但 是 不 同 的 是 ， 它 会 急 略 当前 填充 
样式 ， 采 用 透明 的 黑色 像素 〈 所 以 空白 画布 的 默认 颜色 ) 来 填充 矩形 。 
这 里 重要 的 一 点 是 : 这 三 个 方法 都 不 影响 当前 路 径 以 及 路 径 中 的 当前 


Wyo 


























最 后 一 个 用 于 绘制 矩形 的 方法 是 rect()， 此 方法 会 对 当前 路 径 产 生 影 
啊 : 它 会 在 将 指定 的 矩形 添加 到 当前 路 径 的 子路 径 中 。 和 其 他 用 于 定义 
路 径 的 方法 一 样 ， 它 本 身 不 会 自动 做 任何 和 填充 以 及 勾勒 相关 的 事情 。 


21.4.7 ”颜色 、 透 明度 、 渐 变 以 及 图 案 


stokeStyle 和 fillStyle 属 性 指定 了 线条 勾勒 的 样式 和 区 域 填充 的 样 
式 。 大 部 分 情况 下 ， 这 些 属性 用 于 指定 不 透明 或 者 半 透 明 情 况 下 的 其 
色 ， 但 是 ， 也 可 以 将 它们 设置 成 CanvasPattern 或 者 CanvasGradient 对 
象 ， 以 实现 采用 重复 的 背景 图 片 或 线性 或 辐射 型 的 渐变 色 来 进行 勾勒 或 
者 填充 。 除 此 之 外 ， 还 可 以 通过 设置 globalAlpha 属 性 使 得 所 有 绘制 的 东 
西 都 变 成 半 透 明 。 


要 指定 一 种 纯色 ， 可 以 使 用 HTML4 标 准 山 定义 的 颜色 名 字 或 者 使 
用 CSS 颜 色 串 : 

















context.strokeStyle="blue";// 用 蓝 色 勾 勒 线段 
context .fillStyle="#aaa";// 用 浅 灰 色 填 充 区 域 
































strokeStyle 和 fillStyle 属 性 的 默认 值 都 是 "#000000": 不 透明 黑色 


目前 ， 文 持 CSS3 颜 色 的 浏览 器 除了 人 允许 标准 的 16 进 制 RGB 颜 色 之 
外 ， 还 允许 使 用 RGB、RGBA、HSL 和 HSLA 颜 色 空 间 。 如 下 是 一 些 例 


村 : 





var colors=[ 

"#f44",// 十 六 进 制 RGB 色 值 ， 红 色 
"#44ff44",// 十 六 进 制 RRGGBB 色 值 ， 绿 色 
"rgb(60,60,255)",// 用 0 一 255 之 间 的 整数 来 表示 的 RGB 色 值 : 蓝 色 
"rgb(1900%, 25%, 106%)",// 用 百分比 来 表示 的 RGB 色 值 ， 紫 色 
"rgba(100%, 25%, 100%, 0.5)",//RGB 加 上 0~1 的 alpha 值 ， 半 透明 紫色 
"rgba(0,9,0,0)" ，// 全 透明 黑色 

"transparent",// 和 上 述 类 似 
"hs1(60, 100%, 50%)", // 全 饱和 黄色 
"hs1(60,75%, 50%)" ，// 低 饱和 黄色 
"hs1(69,100%, 75%)",// 全 饱和 暗 黄 色 
"hs1(69,100%, 25%)",// 全 饱和 亮 黄 色 
"hsla(60,100%, 50%, 0.5)" , // 全 饱和 黄色 ，50% 不 透明 度 
]; 






































































































































HSL 颜 色 空间 采用 三 个 数字 来 指定 颜色 ， 这 个 三 个 数字 分 别 代 表 色 
调 、 饱 和 度 和 亮度 。 甚 中 色调 是 颜色 轮 周 围 的 度数 。 色 调 是 0? 表 示 红 
色 ，60? 表 示 黄 色 ，120?" 表 示 绿 色 ，180? 表 示 欧 色 ， 
表示 品 红 色 ，360?" 再 次 转 回 红色 。 饱 和 度 描述 的 是 颜色 的 强度 ， 它 
百分比 来 表示 的 。 饱 和 度 为 0 的 颜色 就 是 暗 灰 色 。 亮 度 描 述 的 是 一 
色 多 么 的 明亮 或 者 多 么 的 瞳 淡 ， 它 也 是 以 百分比 来 表示 的 。 任 何 HSL 颜 


色 ， 几 是 亮度 为 100% 的 都 是 纯 白 色 ， 同 样 ， 任 何 亮度 为 0 的 颜色 都 是 纯 
黑色 。HSLA 闫 色 空 间 和 HSL 类 似 ， 只 是 前 者 增加 了 一 个 alpha 值 ， 它 的 
取 值 范围 从 0.0 (透明 〉 一 1.0《〈 不 透明 ) 。 


如 果 又 想 要 半 透 明 的 颜色 ， 又 不 想 显 式 地 给 每 种 颜色 都 设置 一 个 透 
明 通 道 的话 ， 又 或 者 想 要 给 透明 的 图 片 或 者 图 案 添加 半 透 明 效 果 ( 比 方 
说 ) 的 话 ， 可 以 通过 设置 globalAlpha 属 性 。 这 样 ， 每 一 个 绘制 的 像素 都 
会 将 其 alpha 值 乘 以 设置 的 globaAlpha 值 。globalAlpha 属 性 默认 值 是 1， 
表示 不 透明 。 如 果 将 其 值 设 置 为 0 的 话 ， 那 么 所 有 绘制 的 图 形 都 会 变 成 
全 透明 ， 这 样 一 来 ， 看 上 去 画布 上 就 什么 也 没有 。 而 如 果 设 置 为 0.5 的 
话 ， 那 么 所 有 绘制 的 原本 不 透明 的 像素 都 会 变 成 50% 的 不 透明 度 。 而 如 
果 原 本 像素 是 50% 不 透明 度 的 话 就 变 成 25% 的 不 透明 度 。 如 果 设 置 了 
gobalAlpha， 上 所 有 的 像素 都 会 变 成 半 透 明 ， 这 个 时 候 不 得 不 去 考虑 ， 像 
素 的 重 登 问题 可 以 参见 21.4.13 节 来 了 解 关 于 画布 合成 模型 相关 的 细 
- 门 。 




















如 果 不 想 绘 制 纯 色 〈 也 许 是 半 透 明 的 ) ， 可 以 使 用 渐变 和 重复 图 片 
来 填充 和 勾勒 路 径 。 图 21-10 所 示 的 窍 形 ， 用 宽 线 条 来 勾勒 ， 上 面 采 用 
线性 渐变 填充 ， 下 面 则 使 用 半 透 明 的 辐射 状 渐 变 填 充 。 下 面 的 代码 片段 
展示 了 这 些 图 采 和 渐变 是 如 何 创 建 出 来 的 。 


要 使 用 背景 图 片 的 图 案 而 不 是 颜色 来 填充 或 者 勾勒 ， 可 以 将 
fillStyle 或 者 strokeStyle 属 性 设置 成 CanvasPattern 对 象 ， 访 对 象 可 以 通过 
调用 上 下 文 对 象 的 createPattern() 方 法 返回 。 

















var image=document .getElementById("myimage"); 
c.fillSstyle=c.createPpattern(image, "repeat"); 


createPattern() 方 法 的 第 一 个 参数 指定 了 用 做 图 案 的 图 片 。 它 必须 是 
文档 中 的 一 个 <<img> 元 素 、 雪 canvas 过 元素 或 者 video 之 元 素 〈 或 者 
是 通过 Image0 构 造 函 数 创建 出 来 的 图 片 对 象 ) 。 第 二 个 参数 通 芝 
是 "repeat"， 表 示 末 用 重复 的 图 片 填充 ， 这 和 图 片 大 小 是 无 关 的 。 除 此 
之 外 ， 还 可 以 使 用 "repeat-x"、"repeat-y" 或 者 "no-repeat"。 


要 注意 的 是 还 可 以 采用 一 个 二 canvas 之 元素 (甚至 是 一 个 从 未 添加 
到 文档 中 并 且 不 可 见 的 入 canvas 之 元 素 ) 作为 男 外 一 个 二 canvas 二 元 素 
的 图 案 : 


水， 





var offscreen=document.createElement("canvas");// 创 建 一 个 屏幕 外 画 











offscreen.width=offscreen.height=10;// 设 置 它 的 大 小 














offscreen.getContext("2d" ) .strokeRect(0,0,6,6);// 获 取 它 卓 









































var pattern=c.createPattern(offscreen, "repeat");// 将 它 | 


进行 绘制 
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90000000U00 








图 21-10 以 图 案 和 渐变 进行 填充 


要 使 用 渐变 色 来 进行 填充 或 勾勒 ， 可 以 将 如 1Style 属 性 〈 或 者 
strokeStyle 属 性 ) 设置 为 一 个 CanvasGradient 对 象 ， 该 对 象 可 以 通过 调用 
上 下 文 对 象 上 的 createLinearGradient() 或 createRadialGradient() 方 法 来 返 
Te 

[巧妙 。 


第 一 步 是 要 创建 一 个 CanvasGradient 对 象 。createLinearGradient() 方 
法 需要 的 参数 是 定义 一 条 线段 〈 不 一 定 要 水 平 或 者 垂直 ) 两 个 点 的 坐 
标 ， 这 条 线段 上 每 个 点 的 颜色 都 不 同 。createRadialGradient0) 方 法 需要 的 
参数 是 两 个 圆 〈 这 两 个 圆 不 一 定 要 同心 圆 ， 但 是 一 般 第 二 个 圆 完 全 包含 
第 一 个 圆 ) 的 圆心 和 半径 。 小 圆 内 的 区 域 和 大 圆 外 的 区 域 都 会 用 纯色 来 
填充 : 而 两 圆 之 间 的 区 域 会 用 渐变 色 来 填充 。 


在 创建 了 CanvasGradient 对 象 以 及 定义 了 画布 中 要 填充 的 区 域 之 
后 ， 必 须 通过 调用 CanvasGradient 对 象 的 addColorStop() 方 法 来 定义 渐变 
色 。 该 方法 的 第 一 个 参数 是 0.0 一 1.0 之 间 的 一 个 数字 ， 第 二 个 参数 是 一 
个 CSS 颜 色 值 。 必 须 至 少 调用 该 方法 两 次 来 定义 一 个 简单 的 颜色 渐变 ， 
但 是 可 以 调用 它 多 次 。 在 0.0 位 置 的 颜色 会 出 现在 渐变 的 起 始 ， 在 1.0 位 
置 的 颜色 会 出 现在 渐变 色 最 后 。 如 果 还 指定 其 他 的 颜色 ， 那 么 它们 会 出 
2 
一 些 例 于: 



































// 一 个 线性 渐变 ， 沿 着 画布 的 对 角 线 《假设 没有 进行 坐标 系 变换 ) 

var bgfade=c.createLinearGradient(0,0,canvas.width,canvas.height); 
bgfade.addColorStop(0.0,"#88f");// 以 左上 角 为 亮 蓝 色 开 始 
bgfade.addcolorstop(1.0,"#fff");// 一 直到 右 下 和 角 以 白色 结束 
// 两 个 同心 圆 之 间 的 一 种 渐变 ， 中 间 为 透明 色 ， 然 后 慢 慢 变 为 灰色 半 透 明 ， 最 后 再 回 到 透明 色 
var peekhole=c.createRadialGradient(300,300,100,300,300,300); 
peekhole.addColorStop(0.0,"transparent");// 透 明 
peekhole.addColorStop(0.7,"rgba(100,100,100, .9)");// 灰 色 半 透明 
peekhole.addColorStop(1.0,"rgba(0,0,0,0)");// 再 次 透明 







































































































































































关于 渐变 要 明白 的 很 重要 的 一 点 是 : 它们 并 不 是 与 位 置 相 关 的 。 当 
创建 一 种 渐变 的 时 候 ， 需 要 指定 渐变 的 范围 。 如 果 试 图 填充 渐变 指定 范 
围 外 的 区 域 ， 会 以 渐变 最 后 结束 的 纯色 或 者 另 一 个 渐变 色 来 填充 。 比 
如 ， 定 义 了 一 种 沿 着 点 (0,0) 到 (100,100) 的 渐变 ， 那 么 该 渐变 只 能 用 于 十 
充 在 矩形 (0,0,100,100) 范 围 内 的 对 象 。 


图 21-10 所 示 的 图 形 是 使 用 如 下 代码 创建 的 ， 该 代码 采用 了 pattern 模 
式 ， 同 时 使 用 到 了 之 前 定义 过 的 bgfade 和 peekhole 渐 变 : 








c.fillStyle=bgfade;// 以 线性 渐变 开始 
c.fillRect (90,09, 660,660);// 填 充 整 个 画布 








c.strokeStyle=pattern;// 使 用 图 案 来 勾勒 线段 
c.1Linewidth=100;// 使 用 非常 宽 的 线段 
c.strokeRect(100,100,400, 400);// 绘 制 一 个 大 的 正方 形 
c.fillStyle=peekhole;// 切 换 到 辐射 状 渐变 
c.fillRect(60,90,600,600);// 使 用 半 透 明 填 充 来 遮 置 画布 





















































21.4.8 ”线段 绘制 相关 的 属性 


前 面 已 经 介绍 过 了 lineWidth 属 性 ， 它 用 于 指定 通过 stroke() 方 法 和 
strokeRect() 方 法 绘制 时 线段 的 宽度 。 除 了 lineWidth (当然 还 有 
strokeStyle〉 属 性 之 外 ， 还 有 其 他 三 个 图 形 属性 影响 绘制 线段 。 


lineWidth 属 性 的 默认 值 是 1， 可 以 将 该 属性 设置 成 任意 正 数 ， 甚 至 
是 小 于 1 的 小 数 。〔 小 于 1 个 像素 宽 的 线段 会 绘制 成 半 透 明 色 的 ， 这 样 它 
们 就 看 起 来 比 一 个 像素 宽 的 线段 更 暗 ) 。 要 想 完 全 岳 清 楚 ]ineWidth 属 
性 ， 将 路 径 视 为 是 很 多 无 限 细 的 1 维 线条 是 很 重要 的 。 而 通过 调用 
stoke() 方 法 绘制 的 线段 或 者 曲线 是 处 于 路 径 的 中 间 ， 两 边 都 是 lineWidth 
宽度 的 一 半 。 如 果 人 勾勒 一 条 闭合 的 路 径 并 只 希望 线段 出 现在 路 径 之 外 ， 
那么 首先 勾勒 该 路 径 ， 然 后 用 不 透明 的 颜色 填充 闭合 区 域 来 将 出 现在 路 
径 内 的 勾勒 部 分 隐藏 。 又 或 者 如 果 只 和 希望 线段 出 现在 财 合 路 径 内 ， 那 么 
首先 调用 save(0) 方 法 和 clipO0 〈 人 参见 21.4.10 节 ) 方法 ， 然 后 调用 stroke() 方 
法 和 restore() 方 法 。 


线段 宽度 是 受 当前 坐标 系 变换 影响 的 ， 正 如 图 21-7 所 示 ， 可 以 通过 
坐标 系 变换 来 对 坐标 轴 进 行 缩放 。 如 果 调 用 了 scale(2,1) 方 法 就 会 对 X 轴 
进行 缩放 ， 但 是 对 Y 轴 不 产生 影响 ， 这 样 一 来 ， 垩 直 的 线段 要 比 原先 和 
它 一 样 宽 的 水 平 线段 冤 一 倍 。 这 里 很 重要 的 是 要 搞 清 楚 : 当 调 用 stroke0) 
方法 时 候 ， 线 段 宽度 是 由 lineWidth 属 性 以 及 当前 的 坐标 系 变换 决定 的 ， 
而 与 lineTo0) 方 法 或 者 其 他 用 于 创建 路 径 的 方法 无 关 。 


另外 三 个 与 线段 绘制 相关 的 属性 影响 路 径 中 未 连接 的 正点 的 外 观 以 
及 两 条 路 径 相 交 顶 点 的 外 观 。 它 们 对 于 很 罕 的 线段 的 影响 很 小 ， 相 比 而 
言 ， 对 于 相对 较 冤 的 线段 的 影响 很 大 。 如 图 21-11 所 示 ， 它 展示 了 一 条 
细 的 黑 线 路 径 并 在 周围 用 灰色 区 域 进 行 勾勒 。 该 图 展示 了 其 中 两 个 属 
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图 21-11 lineCap 属 性 和 lineJoin 属 性 


lineCap 属 性 指定 了 一 个 未 封 财 的 子路 径 段 的 端点 如 何 “ 封 项 *。 该 属 
性 的 默认 值 "butt" 表 示 线 段 端 点 直接 结束 。"square" 值 则 表示 在 端点 的 基 








而 上， 再 继续 延长 线段 宽度 一 半 的 长 度 。"round" 值 则 表示 在 端点 的 基础 
上 延长 一 个 半圆 〈 圆 的 半径 是 线段 宽度 的 一 半 ) 。 


lineJoin 属 性 指定 了 子路 径 顶点 之 间 如 何 连接 。 其 默认 值 是 "miter ， 
表示 一 直 延 伸 两 条 路 径 段 的 外 侧 边 缘 直 到 在 茶 一 点 汇合 。"round" 值 则 表 
示 将 汇合 的 项 点 变 得 圆润 ，"bevel" 值 则 表示 用 一 条 直线 将 汇合 的 项 点 切 
除 。 








最 后 一 个 与 线段 绘制 相关 的 属性 是 miterLimit， 它 只 有 当 lineJoin 属 
性 值 是 "miter" 才 会 起 作用 。 当 两 条 线段 相交 的 夹 角 是 锐角 的 时 候 ， 两 条 
线段 的 斜 接 部 分 可 以 变 得 很 长 纺 ， 并 且 这 些 锯齿 状 的 斜 接 部 分 在 视觉 上 
是 分 离 的 。miterLimit 属 性 指定 和 斜 接 部 分 长 度 的 上 限 。 如 果 指 定点 上 的 
斜 接 长 度 比 线段 宽度 乘 以 指定 的 miterLimit 值 的 一 半 还 要 长 的 话 ， 最 终 
绘制 出 来 的 顶点 束 会 是 斜 切 的 而 不 是 和 斜 接 的 。 


21.4.9 文本 
要 在 画布 上 绘制 文本 ， 通 常 使 用 flText0) 方 法 来 使 用 flStyle 属 性 指 


定 的 颜色 〈 渐 变 或 者 图 案 ) 绘制 文本 。 要 想 在 大 字号 文本 上 加 特效 ， 可 
以 使 用 strokeText() 方 法 ， 该 方法 会 在 每 个 字形 外 边 绘 制 轮 廊 (图 21-13 








束 是 一 个 带 轮 万 的 文本 的 例子 ) 。fillTextO0 方 法 和 strokeTextO 方 法 都 接 
受 要 绘制 的 文本 内 容 作 为 第 一 个 参数 ， 以 及 文本 绘制 位 置 的 X 轴 坐标 和 
Y 轴 坐标 作为 第 二 个 和 第 三 个 参数 。 但 是 这 两 个 方法 都 不 会 对 当前 路 径 
0 如 图 21-7 所 示 ， 文 本 是 会 受 当前 坐标 系 变 换 所 影响 





font 属 性 指定 了 绘制 文本 时 候 采 用 的 字体 。 该 属性 值 是 一 个 字符 
串 ， 语 法 和 CSS 的 font 属 性 一 致 。 下 面 是 一 些 例子 : 





"48pt sans-serif" 

"bold 18px Times Roman" 

"italic 12pt monospaced" 

"bolder smaller serif"// 比 <canvas> 的 字体 更 加 粗 或 者 更 加 4 





























textAlign 属 性 指定 了 文本 应 当 参 照 X 轴 坐标 〈 调 用 fl]Text0O 或 者 
strokeText() 方 法 时 候 传 入 的 参数 ) 如 何 进行 水 平 对 齐 。textBaseline 属 性 
则 指定 了 文本 应 当 参 照 Y 轴 坐标 如 何 进行 垂直 对 齐 。 图 21-12 展 示 了 这 两 
个 属性 的 可 能 值 ， 每 个 文本 字符 串 下 面 的 细 线 就 是 基线 〈baseline) ， 
那个 小 方 框 标记 了 传递 给 filText() 方 法 的 点 (X,y)。 
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top Abcefe Abcefe Abcefu Abcefe Abcefo 
hanging Abcefo Abcefo Abcefoe Abcefo Abcefo 
middle beefa heefe Abeefo Abcefe Abcefe 


alphabetic Abcefe Abcefe Abcefe Abcefs Abcefs 
ideographic Abcefs Abcefe Abcefs Abcefs Abcefs 
bottom Abcefg Abcefg Abcefg Abcefs Abcefo 


图 21-12 textAlign 属 性 和 textBaseline 属 性 
textAlign 属 性 的 默认 值 是 "start"。 要 注意 的 是 : 对 于 从 左 到 右 的 文 








本 而 言 ，"start" 方 式 的 对 齐 和 "left" 方 式 的 对 齐 是 一 样 的 ，"end" 方 式 的 对 
齐 和 "right" 方 式 的 对 齐 是 一 样 的 。 但 是 ， 如 果 设 置 二 canvas 之 元 素 的 dir 
属性 为 "rtl" (right-to-left) ， 那 么 "start" 方 式 的 对 齐 和 "right" 方 式 的 对 齐 
是 一 样 的 ， 同 样 "end" 方 式 的 对 齐 和 "left" 方 式 的 对 齐 是 一 样 的 。 


textBaseline 属 性 的 默认 值 是 "alphabetic"， 它 适合 用 于 拉丁 语系 和 其 
他 类 似 语系 的 字母 。"ideographic" 值 用 于 诸如 中 文 和 日 文 之 类 的 表意 文 
字 。"hanging" 值 则 是 用 于 焚 文 和 类 似 的 文字 《大 多 用 于 印度 
语 ) 。"top"、"middle" 以 及 "bottom" 这 样 的 基线 都 是 纯 几 何 基线 ， 它 们 
都 是 基于 设置 的 字体 的 "emsquare"。 


fillText() 方 法 和 strokeText() 方 法 同时 还 接受 第 4 个 可 选 的 参数 。 该 参 
数 指定 文本 展现 的 最 大 宽度 。 当 使 用 font 属 性 绘制 文本 的 时 候 ， 如 宁 文 
We 那么 国 布 会 通过 缩放 或 者 采用 更 罕 或 更 小 的 字 














如 有 果 想 要 在 绘制 文本 前 自己 先 度量 文本 的 宽度 ， 那 么 可 以 使 用 
measureText() 方 法 6 该 方法 返 回 一 个 TextMetrics 对 象 ， 已 它 指 定 在 使 用 当 
前 字体 绘制 文本 时 的 尺寸 。 截 止 撰写 本 书 时 ，TextMetrics 对 象 中 包含 的 
示 宽 度 : 





var width=c.measureText(text) .width; 





21.4.10 ”裁剪 


在 定义 一 条 路 往 之 后 ， 通 常会 调用 stroke0 方 法 或 者 10 方法 (或 者 
i ty 
一 旦 定义 了 一 个 裁剪 区 域 ， 在 该 区 域外 将 不 会 绘制 任何 内 容 。 图 21-3 展 
下 了 一 个 全 用 了 我 匀 区 域 来 绘制 的 图 形 ， 在 该 图 形 中 ， 勺 勒 中 间 的 竖 直 
条 带 以 及 下 面 的 文字 时 都 没有 使 用 裁 前 区域， 而 在 填充 三 角形 之 前 ， 定 
义 了 三 角形 裁剪 区 域 。 


图 21-13 是 使 用 了 例 21-4 中 的 polygon() 方 法 来 生成 的 ， 代 码 如 下 所 


如 





// 定 义 一 些 绘制 属性 

c.font="bold 60pt sans-serif";// 大 号 字体 
c .linewWidth=2;// 窜 线段 
c.strokeSstyle="#0600";// 黑 色 线 段 

// 人 勾勒 矩形 轮廓 和 文本 轮廓 
c.strokeRect(175, 25,50,325);// 中 间 竖 直 的 条 带 
c.strokeText("<canvas>"/15,330) ;// 注 意 使 用 的 是 strokeText( ) 方 法 而 不 是 fillText( ) 方 法 
/V 在 外 部 定义 一 条 包含 内 部 的 复杂 路 径 
polygon(c,3,200, 225, 200);// 大 三 角形 
polygon(c,3,200,225,100,0,true);// 在 内 部 再 绘制 一 个 小 三 角形 
// 将 该 路 径 定义 成 裁剪 区 域 
clip();// 用 5 个 像素 宽 的 线段 来 义 勒 路 径 ， 完 全 在 裁剪 区 域内 
linewidth=10;// 另 外 5 个 像素 的 线段 被 裁剪 了 

stroke( );// 填 充 在 裁剪 区 域内 的 矩形 部 分 和 文本 部 分 
fillStyle="#aaa"// 暗 灰色 
fillRect(175, 25, 50, 325);// 填 充 竖 直 的 条 带 
fillStyle="#888"// 深 灰色 
fil1Text("<canvas>",15,330) ;// 填 充 文 本 
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图 21-13 未 裁剪 的 勾勒 和 裁剪 的 填充 
要 注意 很 重要 的 一 点 是 : 当 调 用 clip(0) 方 法 时 ， 当 前 路 径 自身 就 会 裁 





前 到 当前 裁剪 区 域 中 ， 之 后 ， 被 裁剪 的 路 径 就 变 成 了 新 的 裁剪 区 域 。 这 
意味 着 ，clip(0) 方 法 只 会 缩小 裁剪 区 域 ， 永 远 不 会 0 由 于 没 
有 提供 重 置 裁 辫 区 域 的 方法 ， 因 此 在 调用 dip0 之 前 通常 要 调用 save() 方 
法 ， 以 便于 之 后 恢复 未 裁剪 区 域 。 


21.4.11 ”阴影 


CanvasRenderingContext2D 对 象 定义 了 4 个 图 形 属 性 用 于 控制 绘制 下 
拉 阴 影 。 如 果 正 确 设置 这 些 属性 ， 绘 制 的 任何 线段 、 区 域 、 文 本 以 及 图 








片 都 会 拥有 下 拉 阴 影 ， 这 样 外 观 上 看 起 来 就 像 它 浮 出 了 画布 表面 。 图 
勾勒 的 矩形 下 的 阴影 以 及 填充 的 文 
下 的 阴影 。 


shadowColor 属 性 指定 阴影 的 颜色 。 其 默认 值 是 完全 透明 的 黑色 ， 
因此 如 果 没 有 将 该 属性 设置 为 半 透 明 色 或 者 不 透明 色 ， 阴 影 都 是 不 可 见 
的 。 该 属性 只 能 设置 为 一 个 表示 颜色 的 字符 串 : 图 案 和 渐变 都 是 不 允许 
用 于 阴影 的 。 使 用 半 透 明 色 的 阴影 可 以 产生 很 通 真 的 阴影 效果 ， 因 为 透 


过 它 还 能 够 看 到 背景 。 


shadowOffsetXx 属 性 和 shadowOffsetY 属 性 指定 阴影 的 X 轴 和 Y 轴 的 偏 
移 量 。 这 两 个 属性 的 默认 值 都 是 0， 表 示 直 接 将 阴影 绘制 在 图 形 正 下 
方 ， 在 这 种 位 置 阴影 是 不 可 见 的 。 如 果 将 这 两 个 属性 都 设置 为 一 个 正 
值 ， 那 么 阴影 会 出 现在 图 形 的 右 下 角 位 置 ， 就 好 像 有 一 个 左上 角 的 光源 
从 计算 机 屏幕 外 面 照 射 到 画布 上 。 偶 移 量 越 大 ， 产 生 的 阴影 也 越 大 ， 同 
时 会 感觉 绘制 的 物体 在 画布 上 浮 得 也 越 高 。 


shadowBlur 属 性 指定 了 阴影 边缘 的 模糊 程度 。 其 默认 值 为 0， 表 示 
产生 一 个 清晰 明 腕 的 阴影 。 该 属性 值 越 大 表示 阴影 越 模糊 。 该 属性 是 高 
斯 模糊 函数 的 一 个 参数 ， 和 像素 的 大 小 以 及 长 度 无 关 。 


例 21-8 所 示 代 码 是 用 于 绘制 图 21-4 所 示 图 形 。 该 段 代 码 展示 了 如 何 
使 用 这 4 个 用 于 绘制 阴影 的 属性 。 























Hello World 


图 21-14 上 自动 生成 的 阴影 
例 21-8: 设置 阴影 属性 





// 定 义 一 种 不 明显 的 阴影 
c.shadowColor="rgba(100,100,100, ,4)";// 半 透明 灰色 
c.shadow0ffsetX=c.shadow0ffsetY=3;// 偏 移 阴影 到 右 下 角 部 分 
c .ShadowBlur=5;// 柔 化 阴影 的 边缘 

// 使 用 阴影 在 一 个 蓝 色 的 方 框 中 绘制 一 些 文本 

c.linewidth=10; 

.Strokestyle="blue",; 

.StrokeRect(100,100,300, 200);// 绘 制 一 个 矩形 
.font="Bold 36pt Helvetica",; 

.fillText ("Hello World",115, 225);// 绘 制 一 些 文本 
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// 定 义 一 个 模糊 点 的 阴影 。 较 大 的 偏 移 量 使 绘制 的 物体 浮 得 越 高 
// 要 注意 透明 的 阴影 是 如 何 和 蓝 色 的 方 框 重 琶 的 
c,.ShadowoffsetXx=c,SshadowoffsetY=20 
c.shadowBlur=10; 
c.fillstyle="' 'red" ;// 绘 制 一 个 纯 红色 的 矩形 

c.fillRect(50,25, 200, 65 ) ; // 该 红色 算 形 浮 在 蓝 色 方 框 上 面 



























































shadowOffsetX 属 性 和 shadowOffsetY 属 性 总 是 在 默认 的 坐标 空间 中 
度量 的 ， 它 不 受 rotate() 方 法 和 scale(0) 方 法 的 影响 。 比 如 ， 假 设 先 将 坐标 
系 旋转 90" 之 后 绘制 了 一 些 竖 直 的 文本 ， 之 后 再 恢复 到 原先 的 坐标 系统 
再 绘制 一 些 水 平 的 文本 。 这 样 ， 竖 直 的 文本 和 水 平 的 文本 的 阴影 都 是 天 
问 一 个 方 同 的 ， 这 或 许 也 正 是 想 要 的 效果 。 同 样 地 ， 通 过 不 同 的 缩放 变 
换 绘 制 的 图 形 拥 有 的 阴影 都 有 相同 的 “高 度 ”。 


21.4.12 ”图 片 


除了 矢量 图 形 〈 路 径 、 线 段 等 ) 之 外 ， 男 布 API 还 支持 位 图 图 片 。 
drawImage() 用 于 将 源 图 片 ( 或 者 源 图 片 中 的 矩形 区 域 中 ) 的 像素 内 容 复 
制 到 画布 上 ， 有 需要 的 时 候 可 以 对 图 厂 进 行 缩放 和 旋转 。 


调用 drawImage0) 方 法 的 时 候 可 以 传递 3 个 、5 个 或 者 9 个 参数 。 其 中 
第 一 个 参数 是 要 将 其 像素 复制 到 画布 上 的 源 图 片 。 这 个 图 片 参 数 通 常 是 
一 个 二 img 二 元 素 或 者 通过 Image() 构 造 函 数 创建 的 一 张 屏 幕 外 图 片 ， 但 
是 它 还 可 以 是 另 一 个 canvas 过 元 素 或 者 甚至 是 一 个 <video 之 元 素 。 如 
果 指 定 的 img 二 或 者 二 video 二 元 素 正在 加 载 数据 ， 那 么 调用 
drawImage() 方 法 什么 也 不 做 。 


如 果 传 递 3 个 参数 给 drawImage() 方 法 ， 那 么 第 二 个 和 第 三 个 参数 指 
定 和 绘制 图 片 的 左上 角 位 置 的 X 轴 和 Y 轴 坐标 。 以 这 种 方式 调用 的 话 ， 
源 图 片 的 所 有 内 容 都 会 复制 到 画布 上 。 指 定 的 X 轴 和 Y 轴 坐标 会 相应 地 
转换 到 当前 的 坐标 系 中 ， 如 果 有 需要 的 话 可 以 对 图 片 进行 缩放 和 旋转 。 


如 果 传 递 5 个 参数 给 drawImage0) 方 法 ， 那 么 另外 两 个 参数 分 别 是 
度 和 高 度 。X 轴 和 Y 轴 坐标 以 及 宽度 和 高 度 ， 0 
一 个 目标 矩形 局 域 。 图 片 的 左上 和 角 定 位 在 点 (x,y)， 而 其 右 下 角 则 定位 在 
点 (X+width,yt+height)。 同 样 ， 这 种 调用 方式 也 会 复制 整个 源 图 片 。 该 目 
标 矩 形 区 域 会 在 当 前 坐标 系 中 度量 ， 而 即使 不 指定 缩放 变换 源 图 片 也 会 
自动 伸缩 适应 目标 矩形 区 域 。 

















如 果 传 递 9 个 参数 给 drawImage() 方 法 ， 那 么 这 些 参数 还 同时 指定 了 
一 个 源 滤 形 区 域 和 一 个 目标 矩形 区 域 ， 并且 只 会 复制 源 和 矩形 区 域内 的 像 
素 。 其 中 第 2~5 个 参数 指定 了 源 和 矩形 区 域 。 它 们 是 以 CSS 像 素来 度量 
的 。 如 果 指 定 的 源 图 片 是 另 一 个 画布 ， 那 么 源 和 矩形 区 域 会 使 用 该 画布 的 
默认 坐标 系 ， 并 会 忽略 指定 的 任何 变换 。 第 6 一 9 个 参数 指定 了 图 片 要 绘 
该 区 域 是 在 画布 当前 的 坐标 系 而 不 是 默认 的 坐标 
系 中 绘制 的 。 


例 21-9 是 一 个 使 用 drawImage0 的 简单 例子 。 它 使 用 9 个 参数 来 调用 
drawImage() 方 法 ， 从 一 个 画布 部 分 区 域 中 复制 像素 并 将 它们 绘制 出 来 ， 
同时 在 同 相 同 画 布 上 进行 放大 和 旋转 。 正 如 图 21-15 所 示 的 那样 ， 为 了 
明显 看 出 像素 化 ， 己 经 将 图 片 放 到 了 足够 大 ， 这 时 候 可 以 看 出 其 中 使 用 
了 半 透 明 像 素来 使 得 线条 边缘 变 得 更 加 平滑 。 











图 21-15 使 用 drawImage() 将 像素 放大 


例 21-9: 使 用 drawImage0 方 法 








// 在 左上 角 绘 制 一 条 线段 

c.moveTo(5,5); 

c.lineTo(45,45); 

c.linewidth=8; 

c.lineCap="round",; 
c.stroke();// 定 义 一 个 变换 
c.translate(50,100); 
c.rotate(-45*Math.PI/180);// 让 线段 变 得 更 直 
c.scale(10,10);// 将 它 放 大 到 能 够 看 到 每 个 像素 
// 使 用 drawImage( ) 方 法 来 复制 该 线段 
c.drawImage(c.canvas， 
0,0,50,50,// 源 矩形 区 域 ， 未 变换 
0,0,50,50);// 目 标 和 矩形 区 域 ， 变换 过 








































































































除了 能 将 一 张 图 片 绘制 到 一 张 夯 布 中 之 外 ， 还 能 使 用 toDataURL() 
方法 将 画布 中 内 容 抽 取 成 一 张 图 片 。 和 这 里 介绍 的 其 他 方法 不 同 ， 
toDataURL() 方 法 是 画布 元 素 自 里 的 方法 ， 而 不 是 
CanvasRenderingContext2D 对 象 的 方法 。 通 常 调用 toDataURL() 方 法 的 时 
修 不 传递 任何 参数 ， 它 会 将 画布 内 容 以 PNG 图 片 的 形式 返回 ， 同 时 编码 
成 一 个 字符 串 数 据 ， 用 URL 表 示 。 返 回 的 URL 可 以 在 <img> 元 素 中 使 
用 ， 同 时 也 可 以 使 用 如 下 代码 来 实现 画布 静态 截图 功能 : 











var img=document.createElement ("img' ha j 建 一 个 <<img 之 元 素 
img.src=canvas .toDataURL( ) ;// 设 置 其 sr 
document .body.appendchild(img); /) 控 史 加 到 文档 后 面 

































































所 有 浏览 器 都 要 求 支持 PNG 图 片 格式 。 其 中 有 些 浏览 器 可 能 还 支持 
其 他 的 图 片 格式 ， 可 以 通过 利用 toDataURLO 方 法 的 第 一 个 可 选 参数 来 
指定 需要 图 片 格式 的 MIME 关 型 。 丰 上 要 了 解 详 细 内 容 ， 可 以 参见 第 四 部 
分 。 





当 使 用 toDataURL0 方 法 的 时 候 ， 必 须要 知道 它 有 一 个 很 重要 的 安 
全 限制 。 为 了 避免 路 域 的 信息 泄露 ，toDataURLO 方 法 无 法 在 非 "origin- 
clean" 的 <canvas 之 元 素 上 使 用 的 。 这 里 所 谓 的 非 "orign-clean" 指 的 是 : 
一 张 了 画布 上 绘制 的 图 片 〈 直 接 调 用 drawImage0) 方 法 绘制 或 者 间接 通过 
CanvasPattern 绘 制 ) 和 画布 所 在 的 文档 不 属于 同 源 。 


21.4.13 ”合成 


当 勺 勒 线段 、 填 充 区 域 或 者 复制 图 片 的 时 候 ， 会 想 要 让 新 绘制 的 像 
素 点 能 够 在 画布 中 原 有 像素 的 上 面 。 如 采 绘 制 一 个 不 透明 的 像素 ， 它 们 
会 符 换 同一 位 置 原 有 的 像素 。 如 果 绘 制 的 是 半 透 明 的 像 和 水， 那么 新 
(“ 源 ”) 像素 会 和 原 (“目标 ”) 像 系 进行 合并 ， 原 像素 可 以 透 过 新 像素 
看 到 ， 而 清晰 程度 取决 于 像素 的 透明 度 。 


合并 新 的 半 透 明 源 像 素 和 已 有 目标 像 妹 的 过 程 称 为 合成 >， 上面 描 
述 的 合成 过 程 也 是 画布 API 定 义 的 默认 像素 合并 方式 。 但 是 ， 有 的 时 候 
其 实 是 不 希望 进行 合成 的 。 比 如 ， 已 经 使 用 半 透 明 像素 在 画布 中 绘制 了 
一 些 内 容 ， 这 个 时 候 想 要 进行 临时 切换 ， 然 后 再 恢复 到 原先 的 状态 。 这 
个 时 候 最 简单 的 方法 就 古 : 将 使 用 drawImage0) 方 法 将 画布 内 容 或 者 画 
布 一 部 分 区 域内 容 ) 复制 到 一 张 屏 韶 外 画布 中 。 然 后 ， 在 需要 恢复 画布 
的 时 候 ， 再 从 屏幕 外 画布 中 将 内 容 复制 回 到 屏幕 上 的 男 布 中 。 但 是 ， 要 





























记 住 的 是 ， 保 存 的 像素 都 是 半 透 明 。 如 果 这 个 时 候 合成 是 开启 的 ， 它 们 
并 不 会 完全 抹 除 临 时 绘制 的 内 容 。 因 此 ， 在 上 述 情况 下 ， 束 需要 一 种 方 
式 将 合成 天 闭 : 不 论 源 像素 是 否 透 明 ， 都 绘制 源 像 素 并 忽略 目标 像素 。 


要 指定 合成 的 方式 ， 可 以 设置 globalCompositeOperation 属 性 。 该 属 
性 的 默认 值 是 "source-over"， 表 示 将 源 像 素 绘制 在 目标 像素 上 ， 对 于 半 
透明 的 源 像素 就 直接 合并 。 如 果 将 该 属性 设置 为 "copy"， 则 表示 关闭 合 
成 : 源 像素 将 原封 不 动 地 复制 到 画布 上 ， 直 接 忽 略 目 标 像 素 。 
和 obalCompositeOperation 属 性 还 有 男 一 个 有 时 相当 有 用 的 属性 值 
"destination-over"， 表 示 将 新 的 源 像素 绘制 在 已 有 目标 像素 的 下 
面 。 如 果 目 标 像素 是 半 透 明 或 者 透明 的 话 ， 所 有 或 者 部 分 源 像素 的 颜色 
在 最 终 颜 色 上 就 是 可 见 的 。 














"source-over"、"destination-over" 和 "copy" 是 三 种 最 常用 的 合成 类 
型 ， 而 事实 上 画布 API 支 持 globalCompositeOperation 属 性 的 11 个 值 。 直 
接 看 这 些 属性 值 的 名 字 就 大 概 知道 它们 是 怎样 的 合成 方式 了 ， 当 然 ， 也 
可 以 结合 一 些 实际 的 例子 来 理解 它们 的 工作 原理 ， 不 过 这 个 过 程 可 能 会 
比较 漫长 。 图 21-16 展 示 了 这 11 种 合成 方式 各 自 的 效果 ， 演 示 完 全 使 
用 “人 硬 ” 透 明度 : 所 有 这 些 绘 制 的 像素 要 么 是 完全 透明 要 么 是 完全 不 透 
明 。 在 这 11 个 方 框 中 ， 都 是 先 绘制 正方 形 ， 将 其 作为 目标 。 然 后 再 设置 
globalCompositeOperation 属 性 ， 最 后 绘制 圆 形 ， 将 其 作为 源 。 
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21-16 ”使 用 “人 硬 ” 透 明度 实现 合成 操作 
图 21-17 是 一 个 相似 的 例子 ， 不 同 的 是 使 用 的 是 “ 软 ” 透 明度 。 在 该 
例 中 ， 作 为 原始 图 形 的 圆 形 和 作为 目的 图 形 的 正方 形 都 是 采用 渐变 色 来 
绘制 的 ， 以 便 每 个 像素 的 透明 度 都 会 不 同 。 


如 图 21-17 所 示 ， 使 用 半 透 明 像 素 绘制 时 ， 可 能 就 会 发 现 要 搞 明 白 





合成 操作 不 是 那么 容易 的 。 如 有 果 想 要 更 深入 地 了 解 合成 操作 ， 在 第 四 部 
分 有 专门 对 CanvasRenderingContext2D 对 象 的 合成 操作 做 详细 讲解 的 ， 
9 11 种 合成 方式 中 每 个 单独 的 像素 值 是 如 何 从 源 像素 和 目的 像素 
TL Jo 
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图 21-17 使 用 “ 软 透 明度 ?进行 合成 操作 


截至 撰写 本 书 时 ， 浏 览 器 提供 商 在 实现 11 种 合成 方式 中 的 5 种 上 总 
见 不 统 一 : "copy"、"source-in"、"source-out"、"destination- 
atop" 和 "destination-in" 在 不 同 的 浏览 器 上 表现 不 同 ， 无 法 做 到 兼容 。 下 
面 会 具体 讲解 表现 如 何不 同 ， 但 是 ， 如 果 你 不 打算 使 用 这 些 合 成 操作 的 
话 ， 完 全 可 以 跳 过 下 一 节 的 内 容 。 


上 述 这 5 种 合成 模式 在 计算 合成 结果 的 时 候 ， 要 么 是 在 计算 结果 像 
素 值 的 时 候 直 接 忽 略 目 标 像素 值 ， 要 么 是 将 任何 源 像素 中 透明 的 地 方 全 
部 变 透 明 。 两 者 在 实现 上 的 区 别 就 在 于 源 像素 的 定义 上 。Safari 和 
Chrome 进 行 合成 的 时 候 ， 是 “局 部 ”操作 的 : 只 有 真正 通过 fil0 方 法 、 
stroke() 方 法 或 者 其 他 绘制 操作 绘制 出 来 的 像素 才能 算是 源 像素 。IE9 的 
实现 方式 似乎 也 是 类 似 的 。 而 Firefox 和 Opera 是 进行 “全 局 ”合并 的 : 对 
于 每 次 绘制 操作 ， 在 当前 裁剪 区 域 中 的 所 有 像素 都 会 进行 合成 。 如 采 源 
像素 没有 设置 该 像素 ， 默 认 会 按 透 明 黑 色 处 理 。 在 Firefox 和 Opera 中 ， 
这 了 就 意味 者 ， 上 述 5 种 合成 模式 实际 上 都 会 将 在 源 像 素 外 又 在 裁 盘 区 中 
的 像素 都 抹 除 。 图 21-16 和 图 21-17 就 是 在 Firefox 显 示 的 效果 。 这 也 就 是 
为 什么 采用 "copy"、"source-in"、"source-out"、"destination-atop" 以 
及 "destination-in" 方 式 合成 的 方 框 周围 都 要 比 其 他 的 方 框 要 细 : 每 个 例 
子 周 围 的 矩形 指 的 是 裁剪 区 域 ， 而 这 5 种 合并 操作 将 沙 在 裁剪 区 域内 的 
线段 〈lineWidth 宽 度 的 一 半 ) 给 抹 除 了 。 为 了 作 比 较 ， 图 21-18 显 示 了 
和 图 21-17 同 样 的 图 形 ， 不 同 的 是 它 是 显示 在 Chrome 中 的 。 
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图 21-18 采用 “局 部 ”合成 的 方式 而 不 是 “全 局 ”合成 的 方式 


截至 撰写 本 书 时 ，HTML5 标 准 的 草案 中 定义 的 是 由 Firefox 和 Opera 
实现 的 全 局 合成 。 浏 览 器 提供 厂商 也 意识 到 了 不 兼容 性 ， 同 时 对 当前 的 
标准 也 表示 不 满 。 而 之 后 标准 很 有 可 能 采纳 局 部 合成 的 方式 ， 而 不 是 全 
局 合成 的 方式 。 

















最 后 ， 要 注意 的 是 ， 在 像 Safari 和 Chrome 这 样 实现 本 地 合成 方式 的 
浏览 器 中 也 可 以 使 用 全 局 合成 方式 。 首 先 ， 创 建 一 个 和 屏幕 显示 的 画布 
同样 尺寸 的 屏幕 外 画布 。 然 后 在 该 屏幕 外 画布 中 绘制 一 些 源 像素 ， 并 使 
用 drawImage0) 方 法 将 这 些 屏幕 外 像 辫 复制 到 屏幕 显示 的 画布 中 ， 这 样 就 
能 在 裁剪 区 域 中 实现 全 局 合成 了 。 但 是 没有 一 个 通用 的 方法 在 像 Firefox 
这 样 实现 全 局 合成 的 浏览 器 中 执行 本 地 合成 模式 ， 但 是 通常 也 能 够 通过 
在 要 进行 的 本 地 合成 方式 的 绘制 操作 之 前 先 定义 一 个 适当 的 裁剪 区 域 来 
近似 的 模拟 。 


21.4.14 ”像素 操作 


调用 getImageData() 方 法 会 返回 一 个 ImageData 对 象 ， 该 对 象 表示 男 
布 矩 形 区 域 中 的 原始 (没有 预先 进行 像素 增加 处 理 的 ) 像素 信息 (由 
R、G、B 和 A 分 量 组 成 ) 。 使 用 createImageData() 方 法 可 以 创建 一 个 空 
的 ImageData 对 象 。ImageData 对 象 中 的 像素 是 可 写 的 ， 因 此 可 以 对 它们 
bd 欲 的 设置 ， 然 后 再 通过 putImageData() 方 法 将 这 些 像素 复制 
回 男 


这 些 像素 操作 方法 提供 了 对 画布 的 底层 访问 。 传 递 给 
getImageData() 方 法 的 矩形 是 在 默认 的 坐标 系 中 的 : 它 的 尺寸 以 CSS 像 素 
为 单位 来 度量 并 且 不 受 当 前 坐标 系 变换 的 影响 。 当 调用 putImageData0) 
方法 时 ， 指 定 的 位 置 也 是 按照 默认 的 坐标 系 来 处 理 的 。 而 且 ， 
putImageData() 方 法 会 忽略 所 有 的 图 形 属性 。 它 不 会 进行 任何 合成 操 
作 ， 也 不 会 用 globalAlpha 乘 以 像素 来 显示 ， 更 不 会 绘制 阴影 。 


像素 操作 方法 对 于 实现 图 片 处 理 来 说 是 很 有 用 的 。 例 21-10 展 示 了 
如 何在 一 张 画 布 中 的 图 形 上 创建 一 种 简单 的 动态 模糊 或 者 “涂抹 ”效果 。 
该 例 展 示 了 如 何 使 用 getImageData() 方 法 和 putImageData() 方 法 以 及 如 何 
在 一 个 ImageData 对 象 中 欠 代 和 修改 像素 色 值 ， 但 是 它 没 有 对 这 些 进 行 
详细 的 解释 。 想 要 了 人 解 getImageData() 方 法 和 putImageData() 方 法 的 全 部 
细节 可 以 参考 第 四 部 分 中 对 CanvasRenderingContext2D 对 象 解 释 的 内 
容 ， 也 可 以 参考 其 中 对 ImageData 对 象 的 详细 解释 。 


例 21-10: 使 用 ImageData 实 现 动态 模糊 









































// 将 矩形 区 域 的 像素 向 右 进行 涂抹 ， 

// 来 产生 动态 模糊 效果 ， 就 好 像 物 体 正 在 从 右 到 左 移动 
//n 必 须要 大 于 或 等 于 2， 该 值 越 大 ， 涂 抹 区 域 就 越 大 
// 算 形 是 在 默认 坐标 系 中 指定 的 
























































function smear(c,n,x,y,w,h){// 获 取 表示 矩形 区 域内 像素 的 ImageData 对 象 来 实现 涂抹 效果 

var pixels=c.getImageData(x,y,w,h);// 就 地 实现 涂抹 效果 并 且 只 需要 ImageData 对 象 数 据 

// 一 些 图 片 处 理 算法 要 求 额 外 的 ImageData 对 象 来 存储 变换 后 的 像素 值 

// 如 果 需 要 输出 缓冲 区 ， 可 以 以 如 下 方式 创建 一 个 新 的 同样 尺寸 的 ImageData 对 象 

//var output_ pe LS c.createImageData(pixels); 

// 这 些 尺 寸 可 能 和 w 和 h 之 类 的 参数 不 同 : 有 可 能 是 每 个 CSS 像 素 要 表示 多 个 设备 像素 

Var width=pixels.width,height=pixels.height;//data 变 量 包含 所 有 原始 的 像素 信息 : 从 左 到 
右 ， 从 上 到 下 

// 每 个 像素 按照 R、G、B、A 的 顺序 共 占 据 4 个 字 节 

var data=pixels,.data;// 每 一 行 第 一 个 像素 之 后 的 像素 都 通过 将 其 色 值 蔡 换 成 

// 其 色素 值 的 1/n+ 原 色素 值 的 m/n 

Var m=n-1; 

for(var row=0;row<height;row++){f// 循 环 每 一 行 

Var i=row xwidthx4+4; // 每 行 第 二 个 元 素 的 偏 移 量 

for(var col=1; col <width; colL++， LI+=4){V// 循 环 每 一 列 

data[i]=(data[i]+data[i-4]*m)/n;// 像 素 中 红 色 分 量 

data[i+1]=(data[i+1]+data[i-3]*m)/n;// 绿 色 

data[i+2]=(data[i+2]+data[i-2]*m)/n;// 蓝 色 

data[i+3]=(data[i+3]+data[i-1]*m)/n;//Alpha 分 量 

} 


} 

// 现 在 将 涂抹 过 的 图 片 数 据 复制 回 画 布 相同 的 位 置 
c.putIimageData(pixels, x,y); 

} 
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要 注意 的 是 ，getImageData() 方 法 和 toDataURL() 方 法 一 样 ， 同 样 收 
同 源 安全 策略 的 限制 : 它 对 于 绘制 的 图 片 〈( 通 过 drawImage() 方 法 直接 绘 
0 过 CanvasPattern 间 接 绘制 ) 和 画布 所 在 文档 不 属于 同 源 的 画布 
是 无 效 的 。 


21.4.15 ”命中 检测 


isPointInPath() 方 法 确定 一 个 指定 的 点 是 否 沙 在 (或 者 在 边界 上 ) 当 
前 路 径 中 ， 如 果 该 方法 返回 true 则 表示 落 在 当前 路 径 中 ， 反 之 则 返回 
false。 传 递 给 该 方法 的 点 是 在 默认 坐标 系 中 的 而 不 是 在 变换 过 的 坐标 系 
中 。 这 对 于 该 方法 用 于 命中 检测 (hit detection ) 是 很 有 帮助 的 : 检测 鼠 
标 单 击 事件 是 否 发 生 在 特定 的 形状 上 。 


但 是 ， 不 能 将 MouseEvent 对 象 的 clientX 字 段 和 clientY 字 段 直接 传递 
给 isPointInPath() 方 法 。 首 先 ， 必 须要 将 鼠标 事件 的 坐标 转换 成 相应 的 画 
布 元 素 ， 而 不 是 Window 对 象 。 如 果 画 布 在 屏幕 上 显示 的 尺寸 和 
实际 尺寸 不 同 ， 鼠 标 事件 坐标 必须 要 进行 适当 的 缩放 。 例 21-11 显 示 了 
/| 用 它 可 以 检测 一 个 给 定 的 MouseEvent 是 否 发生 在 当前 路 
径 上 。 


例 21-11: 检测 一 个 鼠标 事件 是 否 有 发 生 在 当前 路 径 上 



































// 如 果 鼠 标 事件 发 生 指 定 的 CanvasRenderingContext2D 对 象 的 当前 路 径 上 则 返回 true 
function hitpath(context,event){// 从 <canvas> 之 对 象 中 获取 <<canvas> 之 元 素 
var canvas=context.canvas;// 获 取 画 布 尺 寸 和 位 置 
var bb=canvas ,getBoundingClientRect();// 将 鼠标 事件 坐标 通过 转换 和 缩放 变换 成 画布 坐标 
var x=(event.clientX-bb.left)*(canvas.width/bb ,width ) ; 

Var y=(event.clientY-bb.top)*(canvas.height/bb.height);// 用 这 些 变 换 后 的 坐标 来 调用 

isPointInPath( ) 方 法 
return context.isPointInpath(x,y); 





































































































可 能 还 会 使 用 如 下 所 示 的 hitpathO 函 数 作为 事件 处 理 程序 : 





canvas.onclick=function(event){ 
if(hitpath(this.getContext("2d"),event)t{ 
alert("Hit!");// 单 击 在 当前 路 径 上 

} 

}; 











除了 进行 基于 路 径 的 命中 检测 之 外 ， 还 可 以 使 用 getImageData() 方 
法 来 检测 鼠标 点 下 的 像素 是 否 已 经 绘制 过 了 。 如 果 返 回 的 像素 〈 单 个 或 
多 个 ) 是 完全 透明 的 ， 则 表示 该 像素 上 没有 绘制 任何 内 容 ， 并 且 鼠 标 事 
件 点 空 了 。 例 21-12 展 示 了 如 何 做 此 类 命中 检测 。 


例 21-12: 检测 鼠标 事件 触及 点 的 元 素 是 否 绘制 过 了 











// 如 果 指 定 的 鼠标 事件 点 下 的 像素 不 是 透明 的 则 返回 true 

function hitpaint(context,event){// 通 过 转换 和 缩放 将 鼠标 事件 坐标 转换 成 画布 坐标 

Var canvas=context.canvas; 

var bb=canvas.getBoundingClientRect(); 

var x=(event.clientX-bb.left)*(canvas.width/bb ,width ) ; 

var y=(event.clientY-bb.top)*(canvas.height/bb.height);// 获 取 像 素 (或 者 多 个 设备 像素 映 
射 到 一 个 CSS 像 素 的 像素 ) 

var pixels=c.getImageData(x,y,1,1);// 如 果 任 何 像素 的 alpha 值 非 9， 则 返回 true (命中 ) 

for(var i=3;i<pixels.data.length;i+=4){ 

if(pixels.data[i]!==0)return true; 


















































} 
// 否 则 ， 表 示 不 命中 
return false; 





21.4.16 ”画布 例子 : 迷你 图 


本 章 将 以 一 个 实际 的 绘制 迷你 图 的 例子 结束 。 迷 你 图 (sparkline) 
是 指 用 于 显示 少量 数据 的 图 形 ， 通 常会 和 骸 入 在 文本 流 中 ， 如 下 所 示 : 


Server load: Eee2 8 “迷你 图 ”这 个 词 是 由 作者 Edward Tufte 





杜 把 的 ， 他 将 该 词 用 于 描述 “内 舱 在 文字 、 数 字 、 图 片 中 的 小 且 高 分 辩 
率 的 图 形 ”。 迷 你 图 是 数据 密集 、 设 计 简 单 、 单 词 大 小 的 图 形 。 (要 了 
解 更 多 关于 迷你 图 的 知识 可 以 阅读 Tufte 的 市 ， Beautiful 
Evidence[Graphics Press]。 ) 


例 21-13 展 示 了 在 Web 页 面 中 用 于 实现 迷你 图 的 JavaScript 代 码 ， 相 
对 而 言 ， 该 JavaScript 是 一 个 比较 简单 的 常见 JavaScript 代 人 码 模 块 。 代 码 
0 要 注意 是 的 ， 它 使 用 了 例 13-5 中 的 onLoad() 


例 21-13: 使 用 二 canvas 二 元 素 绘制 迷你 图 





/* 
* 找 到 所 有 有 "sparkline"CSS 类 的 元 素 ， 将 它们 的 内 容 解 析 成 一 系列 数字 
* 最 后 蔡 换 成 图 形 化 的 表示 方式 


* 将 使 用 标记 将 迷你 图 定义 成 如 下 形式 : 
*<Span class="sparkline">3 5766 9 11 15</span> 














































































































* 使 用 CSS 对 迷你 图 进行 样式 设置 ， 如 下 所 示 : 
*.sparkline{background-color:#ddd;color:red;} 
* -迷你 图 的 颜色 是 根据 CSS 的 coLor 属 性 计算 出 来 的 
* -迷你 图 是 透明 的 ,因此 可 以 显示 正常 的 背景 色 

* -如 果 设置 了 data - height 属 性 ， 迷 你 图 的 高 度 则 由 该 属性 指定 ， 
* 如 果 没 有 设置 ， 则 根据 font -size 属 性 计算 得 出 
*- 如 果 设 置 了 data-width 属 性 ， 迷你 图 的 宽度 则 由 该 属性 指定 

* 如 果 没 有 设置 该 属性 ， 而 设置 了 data- dx 属性 ， 则 迷你 图 的 宽度 等 于 数据 点 的 个 数 乘 以 
的 四， 否则 ， 图 表 的 宽度 等 于 数据 点 的 个 数 乘 以 图 表 的 高 度 再 除 以 6 

* -如 果 设 置 了 data-ymin 属 性 和 data-ymax 属 性 ， 则 最 小 值 和 最 大 值 由 这 两 个 属性 值 指定 
* 否则 ， 最 小 值 和 最 大 值 等 于 数据 的 最 小 值 和 最 大 值 

yh 
onLoad(function( ){// 当 文档 第 一 次 载 入 时 
// 找 到 所 有 有 "sparkline" 类 的 元 素 
var elts=document .getElementsByClassName("sparkline"); 
main:for(var e=0;e<elts.length;e++){// 循 环 每 个 元 素 
var elt=elts[e];// 获 取 元 素 内 容 并 转换 成 一 个 包含 数字 的 数组 

// 如 果 转 换 失 败 ， 则 跳 过 该 元 素 

var content=elt.textcontent ||elt.innerText;// 元 素 内 容 
var content=content.replace(/^\s+|\s+$/g, 0 // 去 除 空格 
Var text=content.replace(/#.*$/gm,""); // 去 除 注释 
text=text.replace(/[\n\r\t\v\f]/g,"");// 将 \n 特 Bt 
var data=text.split(/\s+|\s*,\s*/); /7 以 空格 或 者 逗号 进行 分 隔 
for(var i=0;i<data.length;i++){// 循 环 每 个 数据 块 
data[i]=Number (data[i] ) ;// 转 换 成 一 个 数字 
if(isNaN(data[i]))continue main;// 转 换 失 败 则 中 止 









































































































































































































































































































































































































































} 

// 现 在 根据 数据 和 元 素 的 data- 属 性 以 及 元 素 的 计算 样式 ， 来 计算 
// 迷 你 图 的 颜色 、 宽 度 、 高 度 和 Y 轴 的 范围 
var style=getComputedSty1e( elt, null); 

Var color=style.color; 

var height=parseIint(elt.getAttribute("data-height"))|| 
parseInt(style.fontSize)||20; 









































var width=parseInt(elt.getAttribute("data-width"))|| 
data.length*(parseInt(elt.getAttribute("data-dx"))||height/6); 
var ymin=parseInt(elt.getAttribute("data-ymin"))|| 
Math.min.apply(Math, data); 

var ymax=parseInt(elt.getAttribute("data-ymax"))|| 
Math.max.apply(Math, data); 

if(ymin 之 =ymax)ymax=ymin+1;/V 创 建 一 个 画布 元 素 

var canvas=document ,createElement("canvas" ) ; 

canvas .width=width;// 设 置 画 布 尺寸 

canvas.height=height,; 

canvas .title=content;// 将 元 素 内 容 作 为 工具 提示 

elt .innerHTML="";// 将 现 有 的 元 素 内 容 抹 除 
elt .appendChild(canvas);// 将 该 元 素 插 入 到 画布 中 
// 现 在 绘制 点 (i, data[i]), 转换 成 画布 坐标 

Var context=canvas.getContext('2d'); 
for(var i=0;i<data.length;i++){// 循 环 每 个 数据 点 

var x=width*i/data.length;// 缩 放 i 倍 

var y=(ymax-data[i])*height/(ymax-ymin);// 缩 放 data[i] 
context .lineTo(x,y);// 首 先 调 用 lineTo( ) 方 法 而 不 是 moveTo( ) 方 法 
} 
context .strokeStyle=color;// 设 置 迷你 图 的 颜色 
context,.stroke();// 并 将 它 绘制 出 来 

} 

}); 


1] 浅 绿 色 、 黑 色 、 蓝 色 、 紫 红色 、 灰 色 、 绿 色 、 石 灰色 、 褐 红色、 着 青 
色 、 橄 槛 色 、 紫 色 、 红 色 、 银 色 、 深 青色 、 白 色 和 黄色 。 

D] 严 有 角 越 小 ， 斜 接 部 分 越 长 。 

DB] 在 撰写 本 书 时 ，Google 的 Chrome 浏 览 器 《版 本 5) 把 这 弄 错 了 并 变换 
了 阴影 的 偏 移 量 。 









































































































































第 22 音 ”HTML5 API 


HTML5 不 仅仅 指 的 是 最 新 版 的 HTML 标 准 ， 它 还 指 代目 前 一 整套 的 
Web 应 用 技术 ， 其 中 包括 HTML 相 关 技 术 。 这 里 所 谓 的 Web 应 用 技术 更 
正规 的 术语 其 实 是 开放 的 Web 平 台 。 然 而 ， 在 实际 开发 过 程 
中 ，"HTML5" 更 像 一 个 方便 的 简写 ， 本 章 就 是 以 这 种 方式 使 用 它 的 。 一 
些 新 的 HTML5 API 在 本 书 的 如 下 其 他 章节 做 了 介绍 : 


.第 15 章 介绍 了 g ”etElementsByClassName() 方 法 和 guerySelectorAll() 
方法 以 及 文档 元 素 的 dataset 属 性 。 


:第 16 章 介绍 了 元 素 的 classList 属 性 。 





:第 18 章 介绍 了 了 XMLHttpRequest Level 2、 跨 域 HTTP 请 求 ,以 及 在 服 
务 端 发 送 事件 标准 中 定义 的 EventSource API。 


.第 20 章 介绍 了 Web 存 储 API 和 用 于 离线 Web 应 用 的 应 用 缓存 。 


.第 21 章 介绍 了 <audio 之 、<video 之 和 <canvas 二 元素 以 及 SVG 图 
形 。 


本 章 将 介绍 其 他 的 一 些 HTML5 API， 如 下 所 示 : 


“22.1 市 将 介绍 地 理 位 置 APL 它 能 够 允许 浏览 絮 ( 用 户 允 许 的 情况 ) 
检测 用 户 的 物理 位 置 。 


22.2 节 将 介绍 历史 管理 API， 它 允许 Web 应 用 保存 和 更 新 它们 的 状 
态 ， 以 便当 用 户 蛙 击 浏览 器 的 后退” 和“ 前进” 按钮 的 时 候 ， 无 须 刷 新 并 
即 做 出 啊 应 。 


.22.3 节 将 介绍 在 非 同 源 文 档 间 传递 消息 的 一 个 简单 的 API。 该 API 
提供 了 同 源 安全 策略 下 (参见 13.6.2 节 ) 解决 跨 域 问题 安全 性 的 方案 。 


.22.4 节 将 介绍 HITML5 中 一 个 主要 的 新 特性 : 能 在 一 个 独立 的 后 台 
线程 中 运行 JavaScript 代 码 ， 并 且 能 够 让 这 些 worker 线 程 册 之 间 能 够 进行 
安全 的 通信 。 





，“22.5 节 将 介绍 一 些 与 字 节 数组 和 数字 数组 相关 的 专用 高 效 内 存 类 
型 5 


.22.6 节 将 介绍 Blob: 不 透明 的 数据 块 ， 作 为 中 心 数据 交换 格式 ， 用 
于 一 些 新 的 二 进 制 数据 API。 该 节 还 将 介绍 一 些 与 Blob 相 关 的 类 型 和 
API: File 和 FileReader 对 象 、BlobBuilder 类 型 以 及 Blob URL。 


22.7 市 将 介绍 文件 系统 API， 它 允许 Web 应 用 对 一 个 私有 沙 箱 文件 
系统 中 的 文件 进行 读 / 写 操作 。 该 API 还 不 稳定 ， 因 此 在 第 四 部 分 中 也 没 
有 对 其 做 介绍 。 


.22.8 节 将 介绍 IndexedDB API， 它 用 于 在 一 个 简单 的 数据 库 中 存储 
和 获取 对 象 。 和 Filesytem ” API 一 样 ， 该 API 也 还 不 稳定 ， 因 此 在 第 四 部 
分 中 也 没有 对 其 做 介绍 。 


.最 后 22.9 节 将 介绍 Web 套 接 字 API: 它 允 许 Web 应 用 使 用 基于 流 的 
双向 通信 网 络 连接 到 服务 器 ， 而 不 是 利用 XMLHttpRequest 支 持 的 无 状 
态 的 请 求 /响应 的 网 络 模型 。 


本 章 要 介绍 的 这 些 特性 要 么 是 不 适合 将 它们 放 在 前 面 章 节 中 介绍 ， 
要 么 就 是 由 于 它们 还 不 够 稳定 和 成 熟 ， 无 法 将 它们 放 在 本 书 主要 的 章节 
中 介绍 。 其 中 有 些 API 看 似 已 经 足够 稳定 可 以 在 第 四 部 分 中 介绍 ， 然 而 
它们 在 其 他 一 些 场景 下 ， 还 是 会 出 问题 ， 因 此 没有 在 本 书 第 四 部 分 中 介 
绍 。 此 外 ， 这 里 要 说 明 的 是 ， 在 本 书 出 版 之 时 ， 本 章 中 除了 例 22-9 外 ， 
其 他 的 例子 都 至 少 可 以 在 一 个 浏览 器 中 运行 。 因 为 这 里 介绍 到 的 
HTML5 标 准 一 直 都 在 不 断 完 善 中 ， 也 就 是 说 ， 当 你 正在 阅读 本 章 的 时 
候 ， 其 中 有 些 例子 可 能 都 已 经 根本 无 法 运行 了 。 


22.1 地 理 位 置 


地 理 位 置 API (http://www.w3.org/TR/geolocation-API/〉 人 允许 
JavaScript 程 序 同 浏览 器 询问 用 户 真实 的 地 理 位 置 。 识 别 地 理 位 置 的 一 些 
应 用 就 可 以 使 用 它 来 显示 地 图 、 导 航 和 其 他 一 些 和 用 户 当 前 位 置 相关 的 
信息 。 当 然 ， 考 虑 到 这 些 信 息 窑 涉 用 户 的 隐私 ， 文 持 地 理 位 置 API 的 浏 
览 器 在 JavaScript 程 序 获取 用 户 物理 位 置 前 总 是 会 询问 用 户 是 否 人 允许 。 


文 持 地 理 位 置 API 的 浏览 器 会 定义 navigator.geolocation。 此 属性 指 
代 一 个 拥有 如 下 这 三 个 方法 的 对 象 : 


























navigator.geolocation.getCurrentPosition() 


获取 用 户 当 前 位 置 。 





navigator.geolocation.watchPosition() 


获取 当前 位 置 ， 同 时 不 断 地 监视 当前 位 置 ， 一 旦 用 户 位 置 发 生 更 


改 ， 束 会 调用 指定 的 回调 函数 。 


-> 


navigator.geolocation.clearWatch() 


停止 监视 用 户 位 置 。 传 递 给 此 方法 的 参数 应 当 是 调用 
watchPosition() 方 法 获得 的 返回 值 。 


在 包含 GPS 硬件 的 设备 上 ， 通过 GPS 由 元 本 以 获取 粮 确 的 位 置信 
上 息 。 不 过 ， 绝 大 多 数 情 况 下 ， 位 置信 息 都 是 通过 Web 获 取 的 。 当 浏览 器 
提交 Intemet 下 地 址 给 一 个 Web 服 务 的 时 候 ， 该 服务 通常 能 够 知道 (基于 
ISP 记 录 ) 该 IP 属 于 哪个 城市 (通常 广告 商会 在 服务 器 端 这 么 做 ) 。 浏 
览 器 还 可 以 通过 请 求 操作 系统 获取 附近 无 线 网 络 的 列表 和 它们 的 信号 强 
度 ， 来 得 到 更 加 精确 的 位 置信 息 。 当 将 这 些 信息 提交 给 高 级 的 Web 服 务 
的 时 候 ， 允许 非常 精确 地 计算 位 置 ( 通 常 在 一 个 城市 范围 中 ) 。 


这 些 地 理 位 置 相关 的 技术 都 包含 通过 网 络 的 数据 交换 或 者 和 多 个 卫 
星之 间 的 通信 ， 因 此 地 理 位 置 API 是 异步 的 : getCurrentPosition() 方 法 和 
| 回调 函数 作为 参数 ， 在 判断 用 户 的 位 
置信 息 ( 或 者 当 位 置 改变 信息 ) 时 ， 浏 览 器 会 调用 该 函数 。 如 下 代码 展 
示 了 一 个 获取 位 置 的 简单 例子 ; 














navigator .geolocation.getCurrentPosition(function(pos)t 
var latitude=pos.coords.1latitude; 

var longitude=pos.coords.1longitude; 

alert("Your position:"+]latitude+","+longitude); 


}); 





除了 经 度 和 纬度 外 ， 凡 是 成 功 获取 到 的 地 理 位 置信 息 还 包括 一 个 精 
度 值 〈 米 为 单位 ) ， 该 值 表 示 获 取 到 的 位 置信 息 精度 是 多 少 。 如 例 22-1 
所 示 : 它 调 用 getCurrentPosition0) 力 法 来 获取 当前 位 置 ， 并 用 获取 到 的 
位 置信 息 ， 在 一 a 显示 当前 位 置 ， 并 且 当 
前 位 置 是 根据 位 置 精度 进行 过 适当 的 缩放 。 























例 22-1: 通过 获取 地 理 位 置信 息 在 地 图 上 显示 当前 位 置 






































// 返 回 一 个 新 创建 的 <img 之 元 素 ， 该 元 素 用 于 在 获取 到 地 理 位 置信 息 后 ， 显 示 一 张 600gle 地 图 ， 
// 该 地 图 上 显示 了 当前 的 位 置 。 要 注意 的 是 ， 此 函数 的 调用 者 必须 要 将 返回 的 元 素 
// 插 入 到 文档 中 ， 以 使 它 可 见 
// 如 果 当 前 浏览 器 不 支持 地 理 位 置 API， 则 抛 出 一 个 错误 
function getmap( ){// 检 查 是 否 支持 地 理 位 置 API 
if(!navigator.geolocation)throw"Geolocation not supported";// 创 建 一 个 新 的 <img> 元 
素 ， 并 开始 请 求 地理 位 置信 息 ， 
//img 元 素 显 示 包 含 当 前 位 置 的 地 图 ， 然 后 再 将 返回 该 图 片 
var image=document.createElement("img"); 
navigator .geolocation.getCurrentPosition(setMapURL); 
return image;// 当 (如 果 ) 成 功 获取 到 地 理 位 置信 息 后 ， 会 在 返回 jmage 对 象 后 调用 此 方法 
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function setMapURL(pos){// 从 参数 对 象 (pos) 中 获取 位 置信 息 
var latitude=pos.coords.1latitude;// 经 度 

var longitude=pos.coords.longitude;// 纬 度 

var accuracy=pos.coords.accuracy;// 米 

// 构 造 一 个 URL， 用 于 请 求 一 张 显 示 当 前 位 置 的 静态 600gle 地 医 
var url="http://maps.google.com/maps/api/staticmap"+ 

"?center="+latitude+", "+longitude+"&size=640x640&sensor=true";// 设 置 一 个 大 笃 的 缩放 













































































var zoomlevel=20;// 以 各 种 方式 开始 缩放 
if(accuracy>80)// 在 低 精 度 情况 下 进行 放大 
zoomlevel-=Math.round(Math.1log(accuracy/50)/Math.LN2); 
Url+="&zoom="+Zzo0mlevel;// 将 缩放 级 别 添加 到 URL 中 

// 现 在 在 image 对 象 中 显示 该 地 图 。 昨 感谢 Google 

image.src=url; 

} 

} 















































地 理 位 置 API 还 有 如 下 一 些 特性 ， 例 子 22-1 中 没有 体现 : 


-除了 第 一 个 回调 函数 的 参数 之 外 ，getCurrentPosition() 方 法 和 
nj 方法 还 院 呈 和 一 二 个 可 选 的 回调 函数 ， 当 获取 地 理 位 置信 
恩 失 败 的 时 候 ， 会 调用 该 回调 函数 。 


-除了 成 功 和 失败 情况 下 的 回调 函数 这 两 个 参数 之 外 ， 这 两 个 万 法 _ 
还 接受 一 个 配置 对 象 作 为 可 选 的 第 三 个 参数 。 该 对 象 的 属性 指定 了 是 
需要 高 精度 的 位 置信 息 ， 该 位 置信 息 的 过 期 时 间 ， 
时 间 内 获取 位 置信 息 。 


作为 参数 传递 给 成 功 情况 下 的 回调 函数 的 对 象 ， 还 包含 一 个 时 间 
戳 ， 也 有 可 能 《在 茶 些 设备 上 ) 包含 诸如 海拔 、 速 度 和 航向 之 类 的 额外 


和 
言 息 。 


例 22-2 展 示 了 如 何 使 用 这 些 额外 的 特性 








例 22-2: 展示 如 何 使 用 所 有 地 理 位 置 特性 











异步 的 获取 我 的 位 置 ， 并 在 指定 的 元 素 中 展示 出 来 

os whereami(elt ){// 将 此 对 象 作为 第 三 个 参数 传递 给 getCurrentPosition( ) 方 法 

var options={// 设 置 为 true， 表 示 如 果 可 以 的 话 

/7 获取 高 精度 的 位 置信 息 《 例 如 ， 通 过 GPS 获取 ) 

// 但 是 ， 要 注意 的 是 ， 这 会 影响 电池 寿命 

enableHighAccuracy:false, // 可 以 近似 : 这 是 默认 值 

// 如 果 获 取 缓 存 过 的 位 置信 息 就 足够 的 话 ， 可 以 设置 此 属性 

// 默 认 值 为 9, 表示 强制 检查 新 的 位 置信 息 

maximumAge :300000, //5 分 钟 左 后 

// 愿 意 等 待 多 长 时 间 来 获取 位 置信 息 ? 

// 默 认 值 为 无 限 长 2， getCurrentPosition( ) 方 法 水 不 超时 

timeout:15000// 不 要 超过 15 秒 

}; 

if(navigator .geolocation)// 如 果 支 持 的 话 ， 就 获取 位 置信 息 

navigator .geolocation.getCurrentPosition(success,error,options); 

else 

elt.innerHTM1L="Geolocation not supported in this browser";// 当 获取 位 置信 息 失败 的 时 
候 ， 会 调用 此 函数 

function error (e){//error 对 象 包含 些 数字 编码 和 文本 消息 ， 如 下 所 示 : 

//1: 用 户 不 允许 分 享 他 /她 的 位 信息 

//2 :浏览 器 无 法 确定 位 

//3 :发 生 超时 


elt.innerHTML="Geolocation error"+e.code+":"+e.message,; 
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} 

// 当 获取 位 置信 息 成 功 的 时 候 ， 会 调用 此 函数 

function success(pos){// 总 是 可 以 获取 如 下 这 些 字 段 

// 但 是 要 注意 的 是 时 间 戳 信息 在 outer 对 象 中 ， 而 不 在 inner、coords 对 象 中 
Var msg="At"+ 

new Date(pos.timestamp ) .toLocaleString()+"you were within"+ 
pos.coords.accuracy+"meters of latitude"+ 
pos.coords.latitude+"]longitude"+ 

pos.coords .longitude+".";// 如 果 设 备 还 返回 了 海拔 信息 ， 则 将 其 添加 进去 
if(pos.coords.altitude)t{ 

msg+="You are"+pos.coords.altitude+"+"+ 
pos.coords.altitudeAccuracy+"meters above sea level."; 













































































} 

// 如 果 设 备 还 返回 了 速度 和 航向 信息 ， 也 将 它们 添加 进去 
If(pos,.coords,Sspeed){ 

msg+="You are travelling at"+ 
pos.coords.speed+"m/s on heading"+ 
pos.coords.heading+"."; 












































全 
ll 
[ell 


elt .innerHTML=msg;// 显 示 所 有 的 位 
} 
} 


222 


Web 浏 览 器 会 记录 在 一 个 窗口 中 载 入 的 所 有 文档 ， 同 时 提供 了 “后 
退 "? 和 “前 进 ” 按 钮 ， 允 许 用 户 在 这 些 文档 之 间 切 换 浏览 。 这 种 浏览 器 历 
史记 录 横 型 最 早 在 "文档 都 是 被 动 的 ， 所 有 的 计算 都 在 服务 器 上 完成 ? 那 














个 时 期 就 已 经 存在 了 。 如 今 ，Web 应 用 通常 都 是 动态 地 生成 或 载 入 页 面 
内 容 ， 并 在 无 须 刷 新 页 面 的 情况 下 就 显示 新 的 应 用 状态 。 如 果 想 要 提供 
Ln 能 够 通过 浏览 占 的 “后 退 " 和 “前 进 ” 按 钮 ， 直 观 地 切换 应 用 状态 ， 像 

类 应 用 就 必须 目 己 处 理应 用 的 历史 记录 管理 。HIML5 定 义 了 两 种 用 
于 万 史记 录 管 理 的 机 制 。 


其 中 比较 简单 的 历史 记录 管理 技术 就 是 利用 location.hash 和 和 
hashchange 事 件 。 截 至 撰写 本 书 时 ， 这 种 技术 一 直 也 是 比较 广泛 实现 
的 : 浏览 器 甚至 在 HTML5 标 准 化 之 前 就 已 经 开始 实现 该 拉 术 了 。 在 绝 
大 多 数 浏览 器 中 (IE 早期 版 本 除外 ) ， 设 置 location.hash 属 性 会 更 新 显 
示 在 地 址 栏 中 的 URL， 同 时 会 在 浏 览 器 的 历史 记录 中 添加 一 条 记录 。 
hash 属 性 设置 URL 的 片段 标识 符 ， 通 常 是 用 于 指定 要 深 动 到 的 文档 中 某 
一 部 分 的 ID 。 但 是 location.hash 不 一 定 非 要 设置 为 一 个 元 素 的 ID: 它 可 
以 设置 成 任何 的 字符 串 。 如 果 能 够 将 应 用 状态 编码 成 一 个 字符 串 ， 就 可 
以 使 用 该 字符 串 作 为 请 段 标识 符 。 


设置 了 location.hash 属 性 后 ， 接 下 来 要 实现 允许 用 户 通过 “后 

退 ” 和 “前 进 ” 按 钮 来 切换 不 同 的 文档 状态 。 这 个 时 候 ， 应 用 必须 要 想 办 
法 检测 状态 变化 ， 以 便 它 能 够 恋 取出 存储 在 上 段 标识 符 中 的 状态 并 相应 
地 更 新 自己 的 状态 。 文 持 HIML5 的 浏览 器 一 旦 友 现 片段 标识 符 发 生 了 
改变 ， 就 会 在 Window 对 象 上 触发 一 个 hashchange 事 件 。 这 样 ， 在 文 持 
hashchange 事 件 的 浏览 器 中 ， 束 可 以 通过 设置 window.onhashchange 为 一 
个 处 理 程序 函数 ， 使 得 每 次 由 于 切换 历史 记录 导致 片段 标识 符 变 化 的 时 
候 ， 都 会 调用 该 处 理 程序 函数 。 当 调用 该 处 理 程序 函数 的 时 候 ， 就 可 以 
0 的 值 进 行 解析 ， 然 后 使 用 该 值 包含 的 状态 信息 来 重新 显 
不 信用。 


HTML5 还 定义 了 一 个 相对 更 加 复杂 和 强健 的 历史 记录 管理 方法 ， 

该 方法 包含 history.pushState0) 方 法 和 popstate 事 件 。 当 一 个 Web 应 用 进入 
一 个 新 的 状态 的 时 候 ， 它 会 调用 history.pushState() 方 法 将 该 状态 添加 到 

浏览 器 的 浏览 历史 记录 中 。 访 方法 的 第 一 个 参数 是 一 个 对 象 ， 该 对 象 包 
含 用 于 恢复 当前 文档 状态 所 需 的 所 有 信息 。 该 对 象 可 以 是 任何 能 够 通过 
JSON.stringify0) 方 法 转换 成 相应 字符 串 形式 的 对 象 ， 也 可 以 是 其 他 类 似 
Date 和 RegExp 这 样 特 定 的 本 地 类 型 (参见 下 面 的 补充 内 容 ) 。 访 方法 的 
第 二 个 可 选 参数 是 一 个 可 选 的 标题 〈 普 通 的 文本 字符 串 ) ， 浏览 器 可 以 
使 用 它 〈 比 如 ， 在 一 个 和 Back> 沫 单 中 ) 来 标识 浏 览 历史 记录 中 保存 的 
状态 。 访 方法 的 第 三 个 参数 是 一 个 可 选 的 URL， 表 示 当 前 状态 的 位 置 。 





















































相对 的 URL 都 是 以 文档 的 当前 位 置 为 参照 ， 通常 该 URL 只 是 简 单 地 指定 
URL (诸如 #state ) 这样 的 hash (或 者 “片段 标识 符 ”) 部 分 。 将 一 个 URL 
和 状态 关联 ， 可 以 允许 用 户 将 应 用 的 内 部 状态 作为 书签 添加 到 浏览 器 

中 ， 并 当 在 UREL 中 包含 足够 信息 的 时 候 ， 应 用 可 以 在 从 书签 中 载 入 的 时 
候 就 恢复 它 的 状态 。 





结构 性 复制 


正如 上 面 所 提 到 的 ，pushState() 方 法 接受 一 个 状态 对 象 并 为 该 对 象 
创建 一 份 私有 副本 。 这 是 对 一 个 对 象 进 行 深 堵 贝 或 者 深 复 制 : 它 会 递归 
地 复制 所 有 网 套 对 象 或 者 数组 的 内 容 。HTML5 标 准将 这 类 复制 称 为 “ 结 
构 性 复制 ”(structured clone)〉。 创 建 一 个 结构 性 复制 的 过 程 就 好比 是 将 
一 个 对 象 传 递 给 JSON.stringify0 方 法 ， 然 后 再 将 结果 字符 串 传递 给 
JSON.parse() 方 法 (参见 6.9 节 ) 。 但 是 JSON 只 支持 JavaScript 的 基础 类 
型 和 对 象 以 及 数组 。 在 HTML5 标 准 中 提 到 ， 结 构 性 复制 算法 必须 还 能 
够 复制 Date 对 象 、RegExp 对 象 、ImageData 对 象 〈 来 和 目 过 canvas 之 元 
素 : 参见 21.4.14 季 ) 、 FileList 对 象 、File 对 象 以 及 Blob 对 象 ( 在 22.6 市 

介绍 ) 。 但 是 在 结构 性 复制 算法 中 会 显 式 排除 JavaScript 中 的 函数 和 错误 
以 及 绝 大 部 分 i 文 相 5 来生 这 类 宿主 对 象 。 或 许 还 不 会 存储 
文件 或 者 图 片 数 据 作 为 历史 状态 的 一 部 分 ， 但 是 结构 性 复制 还 被 其 他 一 
So 在 本 章 其 他 地 方 ， 还 会 对 其 做 相应 的 介 














除了 pushState() 方 法 之 外 ，History 对 象 还 定义 了 replaceState() 方 法 ， 
该 方法 和 pushState() 方 法 接受 同样 的 参数 ， 但 是 不 同 的 是 ， 它 不 是 将 新 
的 状态 添加 到 浏览 历史 记录 中 ， 而 是 用 新 的 状态 代 葵 当前 的 历史 状态 。 


当 用 户 通过 “后 退 ” 和 “前 进 ” 按 钮 浏览 保存 的 历史 状态 时 ， 浏 览 絮 
在 Window 对 象 上 触发 一 个 popstate 事 件 。 
和 到 state 属 性 ， ， pushState() 方 法 的 状态 对 象 的 副本 
另 一 个 结构 性 复制 ) 


例 22-3 是 一 个 简 E 未 的 一 个 猜 数 字 的 游 
戏 一 一 它 使 用 这 些 HTML5 技 术 来 保存 应 用 记录 ， 人 允许 用 户 通 过 “后 
退 ” 来 回顾 或 者 撤销 对 数字 的 猜测 。 
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图 22-1 一 个 猜 数 字 游 戏 


在 本 书 出 版 时 ，Firefox 4 对 历史 记录 AP 做 了 两 点 修改 ， 其 他 的 浏览 
器 可 能 也 会 跟着 进行 这 两 点 修改 。 第 一 ，Firefox 4 使 得 History 对 象 自 身 
可 以 通过 state 属 性 获取 当前 状态 ， 这 就 意 味 着 新 载 入 的 页 面 无 须 等 待 
个 popstate 事 件 。 第 二 ， 对 于 没有 任何 保存 状态 的 新 载 入 的 页 面 ， 
Firefox 4 不 再 出 发 popstate 事 件 。 第 二 点 修改 意味 着 下 面 这 个 例子 在 
Firefox 4 将 无 法 工作 。 


例 22-3: 使 用 pushState() 方 法 进行 历史 记录 管理 














<IDOCTYPE html>> 
<html>><head><title>I'm thinking of a number...<=/title> 
<script> 
window.onload=newgame;// 页 面 载 入 的 时 候 就 开始 一 个 新 的 游戏 
window,onpopstate=popState;// 处 理 历史 记录 相关 事件 
var state,ui;// 全 局 变量 ， 在 newgame( ) 方 法 中 会 对 其 初始 化 
function newgame (playagain){// 开 始 一 个 新 的 猪 数 字 游 戏 
// 初 始 化 一 个 包含 需要 的 文档 元 素 的 对 象 

Ui={ 

heading:null,// 文 档 最 上 面 的 <h1i 二 元 素 

prompt :null, // 要 求 用 户 输入 一 个 猜测 数字 

input :null, // 用 户 输入 猜测 数字 的 地 方 

low:null, // 可 视 化 的 三 个 表格 单元 格 
mid:null, // 猜 测 的 数字 范 再 



























































区 


high:null 
};// 查 询 这 些 元 素 中 每 个 元 素 的 id 





for(var id in ui)ui[id]=document.getElementById(id);// 给 input 字 上段 定 义 一 个 





ui.input.onchange=handleGuess;// 生 成 一 个 随机 的 数字 并 初始 化 游戏 状态 


state={ 


n:Math.floor(99*Math.random() )+1,// 整 数 : 9<n<<100 





low:0, // 可 猜测 数字 范围 的 下 限 
high:100, // 可 猜测 数字 范围 的 
guessnum: 9, // 猜 测 的 次 数 
guess : undefined// 最 后 一 次 猜测 
};// 修 改 文档 内 容 来 显示 该 初始 状态 














上 限 
































display(state);// 此 函数 会 作为 onload 事 件 处 理 














程序 调 | 














// 同 时 当 单 击 显示 在 游戏 最 后 的 "再 玩 一 次 "按钮 时 候 ， 也 会 
// 在 第 二 种 调用 情况 下 ， playagain 参 数值 为 true 

// 如 果 playagain 为 true， 则 保存 新 的 游戏 状态 

// 但 是 如 果 是 作为 onL1oad 事 件 处 到 

























































































调用 它 








E 程 序 调用 的 情况 下 ， 则 不 保存 状态 





// 这 是 因为 ， 当 通过 浏览 器 历史 记录 从 其 他 文档 状态 回 退 到 当前 的 游戏 状态 时 ， 














// 也 会 触发 Joad 事 件 。 如 果 这 种 情况 下， 也 保存 ; 
// 会 将 真正 的 游戏 历史 状态 记录 覆盖 掉 


























大 态 的话 ， 














// 在 支持 pushState( ) 方 法 的 浏览 器 中 ， 


事件 之 后 总 是 有 


中 ol 
站 

















个 popstate 习 















































// 因 此 ， 这 里 的 处 理 


// 如 果 该 

// 如 果 该 于 件 没有 状态 对 象 ， 就 表示 这 实际 J 
// 则 使 用 replaceState 来 保存 最 新 的 游戏 状态 
if(playagain===true)savel(state); 











该 对 象 即 可 


















































习 
习 





上 是 一 个 新 
























































} 
// 如 果 支 持 的 话 ， 就 使 


function Save(State){ 




















ne 等 待 popstate 事 件 而 不 是 直接 进行 状态 保存 


的 游戏 ， 





jpushstate( ) 方 法 将 游戏 状态 保存 到 浏览 器 历史 记录 中 








if(!history.pushstate)return;// 如 果 pushstate( ) 方 法 没有 定义 的 话 ， 则 什么 也 不 做 

















// 这 里 会 将 ls 

// 该 URL 显 示 猜 测 的 数字 ， 但 是 不 对 游戏 状态 进行 编码 ， 
// 因 此 ， 这 对 于 书签 是 没有 用 的 
// 不 外 







































































简单 地 将 游戏 状态 写 到 URL 中 ， 因 为 这 会 将 游戏 一 些 机 密 数 字 暴露 在 地 址 栏 中 




















var Url="#guess"+state.guessnum;// 保 存 状 态 对 象 和 URL 


history.pushState(state, // 要 保存 的 状态 对 象 
""7 V/ 状 态 标题 : 当前 浏览 器 会 忽略 它 
ur1);// 状 态 URL: 对 书签 是 没有 用 的 


程序 ， 用 于 恢复 历史 状态 
































} 
// 这 是 onpopstate 的 事件 处 理 
function popState(event ){ 














if(event .state){// 如 果 事 


件 有 


个 状态 对 象 ， 则 恢复 该 状态 














// 要 注意 的 是 ，event .state 是 对 已 保存 状态 对 象 的 一 





// 因 此 无 须 改变 保存 的 值 就 可 以 





个 深 堵 贝 
侈 改 该 对 象 





state=event ,state;// 恢 复 历史 状态 


display(state);// 显 示 恢 复 
} 














下 时， 会 触发 一 





的 状态 





else{// 当 第 一 次 载 入 页 
// 用 真实 的 ; 























个 没有 状态 的 popstate 事 件 





居 态 将 nu11 状 态 蔡 换 掉 : 参见 newgame( ) 方 法 中 的 注释 























// 这 里 不 需要 调用 display( ) 方 法 


history.replaceState(state,"","#guess"+state.guessnum); 
































此 事件 处 











个 数字 的 时 候 ， 都 会 调 
新 游戏 的 状态 


} 
};// 每 次 用 户 猜测 
// 此 处 理 程 序 用 于 更 



































里 程序 
、 保 存 游戏 状态 并 显示 游戏 状态 


function handleGuess( ){Z/ 从 input 字 段 中 获取 用 户 猎 测 的 数字 

















围 中 的 一 个 数字 








var g=parseInt(this.value);// 如 果 该 值 是 限定 范 
if((g>state.low)&  &(g<=state.high)){// 对 应 地 
if(g<=state.n)state.1low=g; 

else if(g>state.n)state.high=g,; 
state.guess=g; 














hb 更 新 状态 对 象 


state.guessnumt++;// 在 浏览 器 历史 记录 中 保存 新 的 状态 





件 处 理 程 





























save(state);// 根 据 用 户 猜 测 情 况 来 修改 文档 
display(state); 








} 

else{f// 无 效 的 猜测 : 不 保存 状态 

alert("Please enter a number greater than"+state,.1low+ 
"and less than"+state.high); 


} 


} 

// 修 改 文档 来 显示 游戏 当前 状态 

function display(state){// 显 示 文 档 的 导航 和 标题 

ui.heading.innerHTML=document .title= 

"I'm thinking of a number between"+ 

state.lowt"and"+state.high+".";// 使 用 一 个 表格 来 显示 数字 的 取 值 范围 

ui.low.style.width=state.1low+"%"; 

ui.mid.style.width=(state.high-state.1ow)+"%",; 

ui,high.style.width=(100-state.high)+"%";// 确 保 jnput 字 上段 是 可 见 的 、 空 的 并 且 是 聚焦 的 

ui,.input.style.visibility="visible",; 

ui,.input.value="",; 

ui ,input.focus();// 根 据 用 户 最 近 的 猜测 ， 设 置 提示 

if(state.guess===undefined) 

ui.prompt.innerHTML="Type your guess and hit Enter:",; 

else if(state.guess=state.n) 

ui.prompt.innerHTML=state.guess+"is too low.Guess again:"; 

else if(state.guess>state.n) 

ui.prompt.innerHTML=state.guess+"is too high.Guess again:"; 

else{// 当 猜 对 了 的 时 候 ， 就 隐藏 jnput 字 段 并 显示 "再 玩 一 次 "按钮 

ui.input.style.visibility="hidden";// 不 需要 再 猿 了 

ui,.heading.innerHTML=document.title=state.guess+"is correct!"; 

ui.prompt.innerHTML= 

"You Win!<button onclick='newgame(true)'>Play Again<=/button>"; 

} 

} 

</script> 

二 style 二 /* 通 过 CSS 样 式 美化 游戏 界面 */ 

#prompt{font-size:16pt,;} 

table{width:90%;margin:10px;margin-left:5%;} 

#low,#high{background-color:lightgray;height:1em;} 

#mid{background-color:green;} 

</style> 

</head> 

<body> 雪 !-- 下 面 的 HTML 元 素 是 游戏 的 UI- - > 

二 1!- -游戏 标题 和 数字 猜测 范围 的 文本 表示 - -> 

<h1 id="heading">I'm thinking of a number.,..<=/hi> 

二 !-- 用 于 确保 猜测 的 数字 在 有 效 范围 内 - - > 

<table><tr><td id="low"></td><td id="mid"></td><td id="high"></td> 
</tr></table> 

二 !-- 用 户 输入 猜测 数字 的 地 方 - -> 

<label id="prompt">></label><=input id="input"type="text"> 

</body><=/html> 


22.3” 跟 域 消 恩 传递 


正如 14.8 节 提 到 的 ， 浏览 器 窗口 和 标签 之 间 都 是 完全 相互 独立 
的 ， 中 运 云 行 的 代码 在 其 他 窗口 或 标签 中 完全 无 
法 识别 。 但 是 ， 在 其 他 的 一 些 场景 下 ， 当 脚本 显 式 打开 一 个 新 窗口 或 者 




























































































































































































Kann 












































在 巷 套 的 窗 体 中 运行 的 时 候 ， 多 个 窗口 或 者 窗 体 之 间 是 互相 可 识别 的 。 
如 果 它 们 包含 的 文档 是 来 自 同一 台 Web 服 务 器 ， 则 再 这 些 窗口 和 窗 体 中 
的 脚本 可 以 互相 之 间 进 行 交互 和 操作 对 方 的 文档 。 


然而 ， 有 的 时 候 ， 尽 管 脚 本 可 以 引用 其 他 的 Window 对 象 ， 但 是 由 
于 那个 窗口 中 的 内 容 是 来 自 于 不 同 的 源 ，Web 浏 览 嚣 (遵循 同 源 策略 ) 
不 会 允许 访问 其 他 窗口 中 的 文档 内 容 。 大 部 分 情况 下 ， 浏 览 器 还 不 允许 
脚本 读 取 其 他 窗口 的 属性 或 调用 其 他 窗口 方法 。 不 过 有 个 window 方 
法 ， 是 允许 来 自 非 同 源 脚本 调用 的 :postMessage() 方 法 ， 该 方法 允许 有 
限 的 通信 通过 异步 消息 传递 的 方式 一 一 在 来 自 不 同 源 的 脚本 之 间 。 
这 类 通信 机 制 是 在 HIML5 标 准 中 定义 的 ， 所 有 主流 的 浏览 器 《包括 IE8 
和 更 新 版 本 ) 都 已 经 实现 了 该 通信 机 制 。 这 项 技术 称 为 “路 文档 消息 传 
递 ”， 而 由 于 该 API 是 定义 在 Window 对 象 上 的 ， 而 不 是 文档 对 象 上 的 ， 
因此 ， 它 又 称 为 “窗口 间 消 息 传 递 ” 或 者 “ 跨 域 消息 传递 ”。 


postMessage() 方 法 接受 两 个 参数 。 其 中 第 一 个 参数 是 要 传递 的 消 
县。HTML5 标 准 提 到 ， 该 参数 可 以 是 任意 基本 类 型 值 或 者 可 以 复制 的 
对 象 〈 参 见 22.2 节 的 “结构 性 复制 >) ， 但 是 ， 有 些 当 前 浏览 器 (包括 
Firefox 4 beta 版 本 ) 的 实现 只 文 持 字符 串 ， 因 此 ， 如 果 想 要 作为 消息 传 
i 自 先 应 当 使 用 JSON.stringify() 方 法 (参见 6.9 节 ) 对 其 
予 列 化 。 


其 中 第 二 个 参数 是 一 个 字符 串 ， 指 定 目 标 窗 口 的 源 。 其 中 包括 协 
议 、 主 机 名 以 及 URL (可 选 的 ) 端口 部 分 (可 以 传递 一 个 完整 的 URL， 
但 是 除了 协议 、 主 机 名 和 端口 号 之 外 的 任何 信息 都 会 忽略 ) 。 这 是 一 个 
安全 特性 : 由 于 恶意 代码 或 普通 用 户 都 可 以 在 窗口 中 浏览 新 的 未 知 文 
档 ， 因 此 postMessageO 只 会 将 消息 传递 给 指定 的 窗口 ， 而 不 会 传递 给 包 
含 非 同 源 文档 的 窗口 。 当 然 ， 如 果 传 递 的 消 恩 不 包含 任何 敏感 信息 的 
话 ， 并 且 愿 意 将 其 传递 给 任何 窗口 ， 就 可 以 直接 将 该 参数 设置 成 “*” 通 
a 如 果 要 指定 和 当前 窗口 同 源 的 话 ， 那 么 也 可 以 简单 地 使 

国生 


如 果 指 定 的 源 匹 配 的 话 ， 那 么 当 调 用 postMessage() 方 法 的 时 候 ， 在 
目标 窗口 的 Window 对 象 上 就 会 触发 一 个 message 事 件 。 在 目标 窗口 中 的 
脚本 则 可 以 定义 通知 message 事 件 的 处 理 程序 函数 。 调 用 该 事件 处 理 程 
序 的 时 候 会 传递 给 它 一 个 拥有 如 下 属性 的 事件 对 象 : 


data 









































作为 第 一 个 参数 传递 给 postMessage() 方 法 的 消息 内 容 副本 。 
source 

消息 源 目的 Window 对 象 。 

origin 

一 个 字符 串 ， 指 定 消息 来 源 URL 形式) 。 


通常 ，onmessage() 事 件 处 理 程序 应 当 首 先 检测 其 中 的 origin 属 性 ， 
忽略 来 自 未 知 源 的 消息 。 


当 想 要 在 We b 页 面 中 移入 一 个 来 自 其 他 站 点 的 模块 或 者 "gadget" 的 
时 候 ， 利 用 postMessage() 和 message 捉 件 实现 的 跨 域 消 恩 传递 是 很 有 用 
的 。 当 然 ， 如 果 gadget 本 和 丑 束 很 简单 并 且 叉 是 自 包 含 的 ， 束 可 以 直接 简 
单 地 将 它 放 在 <iframe 二 中 实现 隔离 即 可 。 然 而 ， 假 设 gadget 本 映 比较 
复杂 ， 它 自身 还 定义 了 一 些 API， 同 时 Web 页 面 需 要 利用 这 些 API 和 它 进 
行 交 互 。 这 个 时 候 ， 用 二 iframe 二 束 不 行 了 ， 而 如 果 将 它 租 入 在 二 script 
二 元 素 中 ， 它 可 以 提供 一 个 正常 的 JavaScript API， 但 是 同时 它 也 可 以 完 
全 操控 页 面 和 页 面 内 容 了 。 目 前 在 Web 上 通常 不 会 这 样 去 做 (尤其 是 
Web 广 告 ，》， 哪 怕 信 任 第 三 方 站 点 ， 这 也 不 是 个 好 的 方案 。 


跨 域 消息 传递 提供 了 另外 一 种 实现 方案 : 首先 gadget 的 开发 者 可 以 
将 gadget 内 容 定 义 在 一 个 HTML 页 面 中 ， 它 负责 监听 message 事 件 ， 并 将 
它们 分 发 给 对 应 的 JavaScript 函 数 去 处 理 。 然 后 ， 般 入 gadget 的 Web 页 面 
就 可 以 通过 postMessage() 方 法 传递 消 恩 来 和 gadget 进 行 交 互 了 。 例 22-4 
和 例 22-5 展 示 了 如 何 使 用 该 方案 。 例 22-4 是 一 个 简单 的 gadget， 放 置 在 
<iframe> 中 ， 它 搜索 Twitter 并 将 匹配 指定 搜索 项 的 tweet 显 示 出 来 。 要 
让 它 实现 真正 的 搜索 功能 ， 包 含 的 页 面 只 需要 简单 地 作为 消息 传递 搜索 
项 给 它 即 可 。 








例 22-4: Twitter 搜 索 gadget， 由 postMessage() 来 控制 





<IDOCTYPE html> 











这 是 一 个 Twitter 搜 索 gadget。 将 它 通过 iframe 的 形式 内 内在 任何 Web 页 面 中 ， 
通过 postMessage( ) 方 法 将 查询 字符 串 传 递 给 它 来 搜索 tweet 。 由 于 它 是 内 崔 在 
< 二 iframe 盖 中 而 不 是 <script> 中 ， 因 此 它 无 法 对 内 和 骸 它 的 页 面 造成 破坏 
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<html> 

<head> 

<style>body{font:9pt sans-serif;}</style> 

二 !-- 使 用 jQuery 的 jQuery. getJSON( ) 工 具 函 数 - -之 

<script src="http://code.jquery.com/jquery-1.4.4. 人 js" /> 过 /Script> 

<script 之 /7 原本 只 要 能 够 使 用 window， onmessage 就 可 以 了 ， 但 是 考虑 到 早期 的 浏览 器 〈 比 如 : Firefox 
3) 不 支持 它 ， 因 此 ， 采 用 如 下 兼容 方式 实现 

Row ande wertl eloner) 

window.addEventListener("message",handleMessage,false); 

else 

window.attachEvent("onmessage",handleMessage);//For IE8 

function handleMessage(e){// 不 在 意 消息 来 源 : 愿意 接受 任何 来 源 的 Twitter 搜 索 请 求 

// 但 是 ， 希 望 消息 源 自 内 嵌 gadget 的 窗 

if(e.source!==window.parent)return; 

var searchterm=e.data;// 获 取 搜 索 内 容 

// 使 用 jQuery Ajax 工具 函数 以 及 Twitter 的 搜索 API 来 查找 匹配 消息 的 tweet 

jQuery.getJSON("http://search.twitter.com/search.json?callback=?", 

{q:searchterm}, 

function(data){// 使 用 请 求 结果 调用 

var tweets=data,results;// 构 造 一 个 HTML 文 档 来 显示 搜索 结果 

var escaped=searchterm， replace( "<", 下 下 本 

var html="<h2>>"+tescaped+"<=/h2>>"; 

if(tweets.1length==0){ 

html+="No tweets found"; 

} 

else{ 

html+=" 二 dl 二 ";// 以 <d1 二 列表 形式 呈现 结果 

for(var A ie 

Var tweet=tweets[i]; 

Var text=tweet. text; 

Var from=tweet.from user; 

Var tweeturl="http://twitter.com/#!/"+ 

from+"/status/"+tweet.id_ str; 

html+="<dt><a target='_blank'href="'"+ 

tweeturl+"'>>"+tweet .from user+ 

"</a></dt><dd>"+tweet .text+"</dd>"， 




















































































































































































































过 


























html+="</d1l>"; 


// 设 置 <iframe 作 文档 
document .body.innerHTML=html; 
}); 

} 








$(function( ){// 通 知 内 内 gadget 的 页 面 [31， 
// 我 们 (gadget) 已 经 准备 就 绪 

// 容 器 在 没有 收 到 这 条 消息 前 ， 它 不 能 发 送 任何 消息 
// 因 为 我 们 还 没有 准备 好 接收 消息 
// 通 常 ， on gad 事件 的 触发 ， 以 此 来 得 知 所 有 的 <iframe 二 都 已 载 入 完毕 
// 我 们 发 送 消 息 告 诉 容 器 已 经 准备 就 绪 ， 甚 至 有 可 能 在 容器 获得 on1oad 事 件 之 前 

// 我 们 并 不 知道 容器 的 源 ， 所 以 采 j"*" 来 让 浏览 器 把 消息 发 送 给 任何 窗口 
window.parent.postMessage("Twitter Search voO.1","*"),; 
}); 

</script> 

</head> 

<body> 

</body> 

</html> 




















































































































例 22-5 是 一 个 简单 的 JavaScript 文 件 ， 可 以 将 它 引 入 到 任何 想 要 使 用 


Twitter 搜索 gadget 的 Web 页 面 中 。 它 将 gadget 插 入 到 文档 中 ， 0 
中 所 有 的 链接 都 添加 一 个 事件 处 理 程序 ， 以 便当 鼠标 指针 划 过 一 个 链接 
的 时 候 ， 就 会 调用 postMessage() 方 法 ， 让 gadget 去 搜索 链接 上 的 URL 指 
定 的 内 容 。 这 可 以 允许 用 户 在 发 一 条 包含 网 站 内 容 的 tweet 时 ， 在 未 访问 
该 站 点 前 就 能 够 先 看 到 网 站 内 容 。 


例 22-5: 通过 postMessage0) 来 使 用 Twitter 搜索 gadget 





// 如 下 JS 代码 实现 将 Twitter 搜索 gadget 添 加 到 文档 中 

// 然 后 为 文档 中 所 有 的 链接 都 添加 一 个 事件 处 理 程序 

// 实 现 当 鼠 标 指针 划 过 一 个 链接 的 时 候 ， 就 会 调用 postMessage( ) 方 法 

// 让 gadget 去 搜索 链接 上 的 URL 指 定 的 内 容 。 这 可 以 允许 用 户 要 发 一 条 包含 网 站 内 容 的 tweet 时 

// 在 未 访问 该 站 点 前 就 能 够 先 看 到 网 站 内 容 

window.addEventListener("load",function(){// 在 IE9 以 下 的 版 本 无 效 

var origin="http://davidflanagan.com";//gadget 源 

var gadget="/demos/TwitterSearch.html";//gadget 路 径 

var iframe=document.createElement("iframe");// 创 建 1frame 

iframe.src=origin+gadget;// 设 置 它 的 URL 

iframe .width="250";//250 个 像素 宽 

iframe .height="100%";// 整 个 文档 高 度 

iframe.style.cssFloat="right";// 右 浮动 

// 将 该 iframe 插 入 到 文档 的 最 开始 

document .body,.insertBefore(iframe,document .body,.firstCchild);// 查 找 所 有 的 链接 ， 并 # 
们 绑 定 到 gadget 上 

var links=document.getElementsByTagName("a"); 

for(var i=0;i<links.length;i++){//addEventListener 在 IE8 及 其 早期 版 本 无 效 

links[i].addEventListener("mouseover",function(){// 作 为 查询 内 容 传 递 url 

// 只 当 iframe 仍 然 显示 来 自 davidflanagan .com 文 档 的 时 候 传递 它 

iframe.contentwindow.postMessage(this.href, origin); 

},false); 
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} 
},false); 





22.4 Web Worker 


客户 端 JavaScript 其 中 一 个 基本 的 特性 就 是 单线 程 : 比如， 浏览 器 无 
法 同时 运行 两 个 事件 处 理 程序 ， 它 也 无 法 在 一 个 事件 处 理 程序 运行 的 时 
候 触 发 一 个 计时 器 。 并 行 更 新 应 用 状态 和 文档 状态 根本 是 不 可 能 的 ， 客 
户 端的 程序 员 也 不 需要 理解 或 者 关心 并 行 编程 。 之 所 以 设计 成 单线 程 的 
理论 就 是 ， 客 户 端 的 JavaScript 函 数 必 须 不 能 运行 太 长 时 间 : 否则 会 导致 
循环 事件 ， Web 浏 览 器 无 法 对 用 户 竹 入 作出 啊 应 。 这 世 是 为 什么 Ajax 的 
API 都 是 异步 的 ， 以 及 为 什么 客户 端 JavaScript 不 能 使 用 一 个 简单 的 异步 
l0ad(0) 函 数 或 者 require() 函 数 来 加 载 JavaScript 库 。 


在 Web Workers 标 准 蚀 中， 定义 了 解决 客户 端 JavaScript 无 法 多 线程 











的 问题 。 其 中 定义 的 "Worker" 是 指 执行 代码 的 并 行 线程 。 不 过 ，Web 
Workers 处 在 一 个 上 自 包 含 的 执行 环境 中 ， 无 法 访问 Window 对 象 和 
Document 对 象 ， 和 主线 程 之 间 的 通信 也 只 能 通过 异步 消息 传递 机 制 来 实 
现 。 这 就 意味 着 ， 并 行 地 修改 DOM 是 不 可 能 的 ， 不 过 ， 它 提供 了 一 种 
使 用 异步 API 的 方式 ， 同 时 允许 书写 需要 长 时 间 运 行 的 函数 而 不 会 带 来 
循环 事件 和 导致 浏览 器 月 尝 的 问题 。 创 建 一 个 新 的 Worker 并 不 像 打 开 一 
个 新 的 浏览 器 窗口 那样 属于 重量 级 的 操作 ， 不 过 ，Worker 本 身 也 不 是 轻 
量 级 的 线程 ， 因 此 创建 一 些 新 的 Worker 去 处 理 次 要 的 操作 是 不 划算 的 。 
这 里 不 建议 创建 太 多 的 Worker〈 比 如 成 百 上 于 个 ) ， 一 个 复杂 的 Web 应 
用 一 般 包含 几 十 个 Worker。 


和 任何 线程 API 一 样 ，Web Workers 标 准 包 含 两 部 分 。 第 一 部 分 是 
Worker 对 象 : 该 对 象 是 暴露 给 创建 该 线程 的 线程 的 。 第 二 部 分 是 
WorkerGlobalScope: 这 是 一 个 用 来 表示 新 创建 的 Worker 的 全 局 对 象 ， 

也 是 Worker 线 程 内 部 使 用 的 对 象 。 下 面 几 节 会 结合 例子 对 这 两 者 一 一 做 


介绍 。 

















22.4.1 Worker 对 象 


要 创建 一 个 新 的 Worker， 只 须 使 用 Worker0 构 造 函 数 ， 并 将 指定 在 
Worker 中 运行 的 JavaScript 脚 本 的 URL 传 递 给 该 构造 函数 即 可 ， 如 下 所 
外: 





var loader=new Worker("utils/loader.js"); 





如 果 UREL 采 用 的 是 相对 路 径 ， 那 么 是 以 包含 调用 Worker0O 构 造 函数 
脚本 的 文档 的 UREL 为 参照 的 。 而 如 果 指 定 的 URE 采 用 的 是 绝对 路 径 ， 那 
么 必须 和 包含 该 脚本 的 文档 是 同 源 的 《同样 的 协议 、 主 机 名 和 端口 ) 。 


一 旦 获取 到 Worker 对 象 后 ， 就 可 以 通过 postMessage() 方 法 来 传递 参 
数 了 。 传 递 给 postMessage() 方 法 的 值 会 复制 (参见 22.2 节 的 “结构 性 复 
制 ?) ， 最 终 的 副本 会 通过 message 事 件 传递 给 Worker。 








loader .postMessage("file.txt"); 





要 注意 的 是 ，Worker 的 postMessage0 方 法 是 没有 参数 的 ， 而 


Window 对 象 的 postMessage() 方 法 是 有 的 《参见 22.3 节 ) 。 还 有 ，Worker 
的 postMessage() 方 法 在 主流 浏览 右 中 都 会 正确 地 复制 消息 ， 不 像 
Window.postMessage()， 在 一 些 重 要 的 浏览 圳 中 ， 对 字符 串 消 息 仍 然 是 
有 限制 的 。 


可 以 通过 监听 Worker 对 象 上 的 message 事 件 来 接收 来 自 wWorker 的 消 








息 
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worker .onmessage=function(e)t{ 
var message=e.data;// 从 事件 对 象 中 获取 消息 
console.1og("URL contents:"+message);// 用 它 进行 一 些 操作 


} 
























































如 果 Worker 抛 出 了 异 第 ， 并 且 它 自己 没有 对 其 进行 捕获 和 处理 ， 可 
以 作为 监听 的 一 个 error 事 件 来 传递 该 异常 : 

















worker .onerror=function(e){// 记 录 错 误 消 息 日 志 : 包括 Worker 的 文件 名 和 行 数 
console.log("Error at"+e.filename+":"+e.1lineno+t+":"+ 
e.message); 


} 

















和 所 有 的 事件 目标 一 样 ，Worker 对 象 也 定义 了 标准 的 
addEventListener() 方 法 和 removeEventListener() 方 法 ， 如 果 想 要 管理 多 个 
事件 处 理 程序 ， 可 以 使 用 这 些 方法 来 代替 onmessage 和 onerror 属 性 。 


Worker 对 象 还 有 另 一 个 方法 :， terminate()。 该 方法 强制 一 个 Worker 
线程 结束 运行 。 


22.4.2 Worker 作 用 域 





在 通过 Worker() 构 造 函 数 创建 一 个 新 Worker 的 时 候 ， 指 定 了 包含 
JavaScript 代 码 文件 的 UREL。 该 代码 会 运行 在 一 个 全 新 的 JavaScript 运 行 
环境 中 ， 完 全 和 创建 Worker 的 脚本 隔离 开 来 。WorkerGlobalScope 全 局 
对 象 表示 了 该 新 的 运行 环境 。WorkerGlobalScope 对 象 在 某 种 程度 上 来 
说 是 大 于 核心 的 JavaScript 全 局 对 象 ， 但 又 小 于 整个 客户 端的 Window 对 
象 。 


和 Worker 对 象 一 样 ，WorkerGlobalScope 对 象 也 有 一 个 postMessage() 
方法 和 一 个 onmessage 事 件 处 理 程序 的 属性 ， 不 过 使 用 方法 恰好 相反 : 


在 Worker 中 调用 postMessage() 方 法 会 触发 Worker 外 部 的 一 个 message 事 
件 ， 而 Worker 外 部 传递 的 消息 会 转换 成 一 个 事件 ， 并 传递 给 onmessage 
事件 处 理 程序 。 要 注意 的 是 ，WorkerGlobalScope 是 一 个 供 Worker 使 用 
的 全 局 对 象 ， 因 此 该 对 象 上 的 postMessage() 方 法 和 onmessage 属 性 在 
Worker 代 人 码 中 使 用 的 时 候 ， 看 起 来 就 像 是 全 局 函数 和 全 局 变量 。 


close() 函 数 允 许 Worker 将 自己 终止 ， 它 从 效果 上 来 说 和 Worker 对 象 
的 terminate() 方 法 类 似 。 但 是 ， 要 注意 的 是 ， 在 Worker 对 象 上 没有 定义 
任何 API 用 于 检测 是 否 Worker 已 经 将 自己 关闭 了 ， 也 没有 类 似 onclose 这 
样 的 事件 处 理 程序 属性 。 如 果 在 一 个 已 经 关闭 的 Worker 上 调用 
postMessage() 方 法 ， 那 么 消息 会 被 无 声 无 肯 地 丢弃 ， 而 且 也 不 会 有 任何 
错误 抛 出 。 因 此 ， 如 果 一 个 Worker 想 要 使 用 close(0) 方 法 将 自己 关闭 ， 那 
么 最 好 是 先 传递 诸如 “关闭 "这样 的 消息 。 


WorkerGlobalScope 对 象 上 定义 的 最 有 意思 的 全 局 函数 是 
importScripts(): Worker 使 用 此 方法 来 加 载 任何 需要 的 库 代 码 。 如 下 所 
小 : 












































// 在 开始 工作 前 ， 先 载 入 需要 的 类 、 工 具 函 数 
importSscripts("collections/Set.js","collections/Map.js","utils/base64.]js"); 


























importScripts(0) 方 法 接受 一 个 或 者 多 个 URL 参 数 ， 每 个 URL 都 需 指 回 
一 个 JavaScript 代 码 文件 。 相 对 地 址 的 URL 以 传递 给 Worker(0) 构 造 函 数 的 
URL 为 参照 。 它 会 按照 指定 的 顺序 依次 载 入 并 运行 这 些 JavaScript 文 件 。 
如 果 载 入 脚本 的 时 候 抛 出 了 网 络 错误 ， 或 者 在 执行 的 时 候 抛 出 了 错误 ， 
那么 剩 下 的 脚本 都 不 会 载 入 和 运行 。 通 过 importScripts0) 方 法 载 入 的 脚本 
上 自身 还 可 以 调用 importScripts() 方 法 载 入 它 需 要 的 文件 。 但 是 ， 要 注意 的 
是 ，importScripts(0 方 法 不 会 试图 去 跟踪 哪些 脚本 已 经 载 入 了 ， 也 不 会 去 
防止 循环 依赖 的 问题 。 


importScriptsO 是 一 个 同步 的 方法 : 它 直 到 所 有 的 脚本 都 已 经 载 入 并 
运行 完成 才 会 返回 。 一 旦 importScripts() 方 法 返回 就 可 以 开始 使 用 载 入 的 
脚本 了 : 这 里 不 需要 回调 函数 或 者 事件 处 理 程序 。 一 旦 对 客户 端 
JavaScript 异 步 的 特性 根深 带 固 之 后 ， 再 回 到 简单 的 同步 编程 方式 会 感觉 
很 不 适应 。 但 是 ， 这 就 是 线程 之 美 : 可 以 在 一 个 Worker 中 使 用 阻 寨 式 函 
， 300 0 0 也 不 会 阻塞 在 其 他 Worker 中 并 行 

行 的 计算 。 














Worker 执 行 模型 


Worker 线 程 从 上 到 下 同步 运行 它们 的 代码 (以 及 所 有 导入 的 肢 
本 ) ， 然 后 进入 一 个 异步 阶段 ， 来 对 事件 以 及 计时 器 做 出 啊 应 。 如 果 
Worker 注 册 了 onmessage 事 件 处 理 程序 ， 那 么 只 要 message 事 件 有 可 能 触 
发 ， 那 么 它 将 永远 不 会 退出 。 但 是 ， 如 果 Worker 没 有 监 昕 消息 ， 那 么 一 
直到 所 有 任务 相关 的 回调 函数 都 调用 以 及 再 也 没有 挂 起 的 任务 (比如 下 
载 和 计时 器 ) 之 后 ， 它 就 会 退出 。 一 旦 所 有 注册 的 回调 函数 都 已 经 调用 
之 后 ，Worker 也 不 再 创建 新 任务 了 ， 这 个 时 候 线程 就 可 以 安全 退出 了 。 
想象 这 样 一 个 Worker， 它 通过 XMLHttpRequest 下 载 一 个 文件 ， 但 是 没 
有 任何 onmessage 事 件 处 理 程序 。 如 果 该 下 载 任务 的 onload 处 理 程序 开始 
一 个 新 的 下 载 任务 或 者 通过 setTimeout0) 方 法 注册 一 个 超时 的 程序 ， 那 么 
线程 有 了 新 的 任务 并 保持 运行 状态 ， 人 否则， 线程 就 会 退出 。 


为 WorkerGlobalScope 是 Worker 的 全 局 对 象 ， 所 以 它 有 所 有 核心 
JavaScript 全 局 对 象 拥有 的 那些 属性 ， 诸 如 JSON 对 象 、isNaN() 函 数 和 
Date0 构 造 函 数 。“【〈 请 通过 在 第 三 部 分 中 查询 Global 来 获得 完整 的 列 
表 。) 然而 ， 除 此 之 外 ，WorkerGlobalScope 对 象 还 有 客户 端 Window 对 
象 拥有 的 一 些 如 下 属性 : 


self 是 对 全 局 对 象 自身 的 引用 。 但 是 ， 要 注意 的 是 ， 
WorkerGlobalScope 对 象 的 self 和 Window 对 象 的 self 意 义 不 同 。 














:计时 器 方法 : setTimeout()、clearTimeout()、setInterval() 以 及 
clearInterval()。 


:location 属 性 ， 描 述 传递 给 Worker(0 构 造 函 数 的 URL。 和 Window 对 
象 的 location 属 性 一 样 ， 此 属性 指 癌 一 个 Location 对 象 。 访 对象 有 href、 
protocol、host、hostname、port、pathname、search 以 及 hash 属 性 。 在 
Worker 中 ， 这 些 属性 都 是 只 读 的 。 


:navigator 属 性 ， 指 同一 个 对 象 ， 该 对 象 拥 有 的 属性 和 Window 的 
Navigator 对 象 拥有 的 那些 属性 类 似 。Worker 的 navigator 对 象 有 
appName、appVersion、platform、userAgent 以 及 onLine 属 性 。 


:常用 的 事件 目标 方法 : addEventListener() 和 


removeEventListener()。 


:onerror 属 性 ， 可 以 将 它 设 置 为 一 个 错误 事件 处 理 程 序 ， 天 像 在 14.6 
节 中 介绍 的 Window.onerror 处 理 程 序 那样 。 如 果 注 册 了 错误 处 理 程 序 ， 
那么 错误 的 消息 、URL 以 及 行 号 会 作为 三 个 字符 串 参 数 传递 给 该 处 理 程 
序 。 如 果 该 处 理 程序 返回 false， 则 表示 错误 已 经 处 理 ， 不 应 该 再 将 其 当 
成 一 个 Worker 对 象 上 的 error 事 件 传播 了 。 不 过 ， 截 至 撰写 本 书 时 ， 不 
是 所 有 的 浏览 器 都 实现 了 在 Worker 中 的 错误 处 理 。) 


最 后 ，WorkerGlobalScope 对 象 还 包含 客户 端 JavaScript 一 些 重 要 的 
构造 函数 对 象 。 其 中 包括 XMLHttpRequest()， 以 便 Worker 可 以 通过 它 进 
行 脚本 化 的 HTTP 请 求 ( 参 见 第 18 章 ) ， 以 及 Worker0 构 造 函 数 ， 
Worker 可 以 通过 它 创建 它们 自己 的 Worker 线 程 。〈 然 而， 截至 撰写 本 书 
时 ，Chrome 和 Safari 还 不 支持 在 Worker 中 使 用 Worker0O 构 造 函 数 。) 








本 章 后 续 将 要 介绍 的 一 些 HIML 5 API， 在 普通 的 Window 对 象 和 
Worker 的 WorkerGlobalScope 对 象 上 都 定义 了 一 些 新 特性 。 通 第， 
Window 对 象 会 定义 一 个 异步 的 API， 同 时 ，WorkerGlobalScope 会 添加 
一 个 相同 基本 API 的 异步 版 本 。 这 些 “ 司 用 Worker 的 ”API 会 在 本 章 后 续 部 
分 做 相应 介绍 。 





Worker 高 级 特性 


本 节 介 绍 的 Worker 线 程 都 是 专用 Worker 线 程 : 它们 和 单独 的 父 线程 
相关 联 。Web Workers 标 准 还 定义 了 另外 一 类 Worker 线 程 : 共享 Worker 
线程 。 截 至 撰写 本 书 时 ， 浏 览 器 还 未 实现 此 类 线程 。 但 是 这 里 仍然 对 其 
做 相应 介绍 ， 原 因 是 ， 共 享 Worker 线 程 是 一 种 命名 资源 ， 为 任何 与 之 相 
连接 的 线程 提供 计算 服务 ， 和 共享 Worker 之 间 的 交互 就 好 比 是 通过 网 络 
套 接 字 和 服务 器 进行 通信 。 


对 于 共享 Worker 线 程 而 言 , “和 套 接 字 ” 义 叫 MessagePort。 
MessagePorts 定 义 了 一 个 消息 传递 API， 和 为 专用 Worker 线 程 和 中 文档 
消息 传递 统一 的 API 类 似 : 它们 有 一 个 postMessage() 方 法 以 及 一 个 
onmessage 事 件 处 理 程序 属性 。HTML5 标 准 允 许 通 过 MessageChannel0) 
构造 函数 ， 创 建 一 对 相互 连接 的 MessagePort 对 象 。 可 以 将 
MessagePorts 《作为 postMessage() 方 法 的 特殊 参数 ) 传递 给 其 他 窗口 或 
者 其 他 Worker， 并 将 它们 作为 专用 的 通信 频道 。MessagePorts 和 
MessageChannels 是 高 级 API， 目 前 大 多 数 浏览 器 都 还 未 实现 ， 因 此 这 里 
将 不 做 介绍 。 














22.4.3” Web Worker 的 例子 


本 节 将 以 两 个 Web Worker 的 例子 结束 。 J 一 
个 Worker 线 程 中 执行 长 时 间 计 算 ， 同 时 又 不 影响 主线 程 进行 UI 吧 应 。 
二 个 例子 展示 了 Worker 线 程 如 何 使 用 更 加 简单 的 同步 API。 


例 22-6 定 义 了 一 个 smear0 函 数 ， 它 接受 一 个 <img> 元 素 作为 参 
数 。 该 函数 用 于 在 图 片上 产生 向 右 的 动态 模糊 效果 。 它 使 用 了 第 21 章 介 
绍 的 技术 ， 将 图 所 复制 到 一 个 屏幕 外 的 本 canvas 之 元 素 中 ， 然 后 再 将 图 
片 的 像素 提取 到 一 个 ImageData 对 象 中 。 不 能 通过 十 postMessage() 方 法 将 
<img> 元 素 或 者 二 canvas 之 元 素 传 递 给 Worker， 但 是 可 以 传递 
ImageData 对 象 〈 有 具体 细节 参见 22.2 节 的 “结构 性 复制 ?>) 。 例 22-6 创 建 一 
个 Worker 对 象 ， 并 调用 postMessage 方 法 将 要 涂抹 的 像素 传闻 给 | 
Worker 线 程 将 处 理 完 的 像素 信息 再 传递 回来 后 ， 代 码 将 它们 复制 回去 
canvas 之 元 素 中 ， 再 作为 data:WURL 提 取 它 们 ， 然 后 将 该 URL 设 置 成 最 
初 二 img> 之 元 素 的 src 属性 值 。 


例 22-6: 创建 一 个 Web Worker 线 程 处 理 图片 














// 异 步 地 将 图 片 内 容 蔡 换 成 动态 模糊 版 本 

// 以 这 种 方式 使 用 : <ijmg src="testimage.jpg"onclick="smear(this)"/> 
function smear(img){// 创 建 一 个 和 图 片 尺 寸 相同 的 屏幕 外 <canvas > 

var canvas=document ,createElement("canvas" ) ， 

canvas .width=img .width; 
canvas .height=img ,height;// 将 图 片 复制 到 画布 中 ， 随 后 提取 其 
var context=canvas.getContext("2d"); 
context.drawImage(img,o0,0); 

var pixels=context.getImageData(0,0,img.width,img.height)// 将 像素 信息 传递 给 Worker 线 
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var worker=new Worker("Smearworker .js");// 创 建 Worker 线 程 
worker ,postMessage(pixels);// 复 制 和 传递 像素 信息 
// 注 册 事 件 处 理 程序 来 获取 Worker 的 响应 

worker .onmessage=function(e){ 

var smeared_pixels=e.data;// 从 Worker 获 取 的 像素 信息 
context. putImageData( smeared_ pixels, 0, 0); /7 将 它们 制 到 画布 中 
img.src=canvas.toDataURL( );// 然 后 ， 添加 到 img 中 
worker .terminate( ) ;// 关 闭 Worker 线 程 

canvas .width=canvas .height=0;// 将 周围 像素 清 名 


} 






















































































例 22-7 所 示 的 代码 是 给 例 22-6 中 创建 的 Worker 线 程 使 用 的 。 该 例 是 
一 个 图 片 处 理 函 数 ， 基 于 例 21-10 修 改 的 。 要 注意 的 是 ， 该 例 使 用 一 行 
代码 就 建立 了 一 套 消 有 息 传递 机 制 ，onmessage 事 件 处 理 程序 只 将 传递 给 
它 的 图 片 进行 涂抹 ， 随 后 传递 回去 。 


例 22-7: 在 Web Worker 中 进行 图 片 处 理 


























// 从 主线 程 中 获取 ImageData 对 象 ， 对 其 进行 处 理 并 将 它 传递 回去 

onmessage=function(e){postMessage(smear(e.data));}// 将 ImageData 中 的 像素 信息 向 右 涂抹 ， 
产生 动态 模糊 效果 

// 对 于 大 图 片 ， 此 方法 会 进行 大 量 的 计算 ， 

// 如 果 它 用 在 主线 程 中 的 话 ， 很 有 可 能 导致 无 法 响应 UI 操作 的 问题 

function smear(pixels)f{ 

var data=pixels.data,width=pixels.width,height=pixels.height; 

var n=10,m=n-1;// 设 置 h 倍 大 ， 于 更 多 的 涂抹 

for(var row=0;row<height;row++){// 每 一 行 

var i=row *Wwidth*4+4; // 第 二 个 像素 偏 移 

for(var col=1; col<width; c0Ol++, i+=4){// 每 一 列 

data[i]= (data[i]+data[i- 4]* m)/n;// 红 色 像 素 分 量 

data[i+1]=(data[i+1]+data[i-3]*m)/n;// 绿 色 

data[i+2]=(data[i+2]+data[i-2]*m)/n;// 蓝 色 

data[i+3]=(data[i+3]+data[i-1]*m)/n;//Alpha 分 量 

} 
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return piIixels' 





要 注意 的 是 ， 例 22-7 中 的 代码 可 以 用 于 处 理 任意 数量 的 图 片 。 然 
而 ， 为 了 简单 起 见 ， 例 22-6 为 它 要 处 理 的 每 属国 片 创建 了 一 个 新 的 
Worker 对 象 。 同 时 ， 为 了 确保 没有 线程 用 置 ， 它 会 对 于 已 经 完成 操作 的 
线程 调用 terminate() 方 法 将 其 终止 掉 。 


调试 Worker 线 程 


在 WorkerGlobalScope 中 ， 有 一 个 API 是 不 可 用 的 (至 少 截至 撰写 本 
书 时 是 不 可 用 的 ) : 控制 台 API 以 及 它 非 常 有 用 的 console.logO 函 数 。 
Worker 线 程 不 外 输出 日 志 ， 也 不 能 和 文档 进行 交互 ， 因 此 要 想 调 试 ， 就 
要 采用 更 加 巧妙 的 方法 。 如 果 Worker 抛 出 错误 ， 那 么 主线 程 在 Worker 对 
象 上 会 接收 到 一 个 error 事 件 。 但 是 ， 通 常情 况 下 ， 需 要 一 种 方式 能 够 让 
Worker 将 调试 消息 输出 到 浏览 器 的 Web 控 制 台 中 。 其 中 ， 最 直接 的 方式 
就 是 通过 修改 和 Worker 间 的 消 恩 传递 协议 ， 来 让 Worker 将 调试 消 明 传递 
出 来 。 比 如 ， 在 例 22-6 中 ， 可 以 将 如 下 代码 添加 到 onmessage 事 件 处 理 
程序 的 最 开始 : 











if(typeof e.data==="string")t{ 
console.1log("Worker:"+e.data); 
return; 





有 了 新 增 的 这 部 分 代码 ，Worker 线 程 只 要 简单 地 将 字符 串 传 递 给 
postMessage() 方 法 就 能 够 实现 展示 调试 消 忠 了 。 


下 面 的 例子 展示 了 Web ”Worker 如 何 允 许 书写 同步 代码 并 在 客户 端 
JavaScript 中 放心 地 使 用 它 。18.1.2 节 介绍 过 如 果 使 用 XMLHttpRequest 实 
现 同步 的 HTTP 请 求 ， 但 是 也 警告 过 ， 在 主 浏览 器 线程 中 这 样 使 用 是 个 
很 不 好 的 实践 。 然 而 ， 在 Worker 线 程 中 进行 同步 请 求 是 再 理想 不 过 的 
了 ， 例 22-8 正 是 展示 的 是 与 之 相关 的 例子 。 其 中 的 onmessage 事 件 处 理 
程序 接受 一 个 待 获取 的 URL 数 组 。 它 通过 同步 XMLHttpRequest API 来 进 
行 获取 ， 然 后 ， 将 获取 到 的 文本 内 容 以 字符 串 的 形式 ， 组 成 一 个 数组 ， 
传递 回 主线 程 。 或 者 ， 如 果 在 HTTP 请 求 过 程 中 失败 了 ， 则 会 抛 出 错 
误 ， 并 会 将 其 传递 给 Worker 对 象 的 onerror 处 理 程 序 。 


例 22-8: 在 Web Worker 中 发 起 同步 XMLHttpRequest 




















// 此 文件 会 通过 一 个 新 的 Worker( ) 来 载 入 ， 因 此 ， 它 是 运行 在 独立 的 线程 中 的 ， 
// 可 以 放心 地 使 用 同步 XMLHttpRequest API 

// 消 息 是 URL 数 组 的 形式 。 以 字符 串 形式 同步 获取 每 个 URL 指 定 的 内 容 ， 

// 并 将 这 些 字符 串 数组 传递 回去 。 
onmessage=function(e){ 
var urls=e.data;// 输 入 : 要 获取 的 URL 

var contents=[];// 输 出 : URL 指 定 的 内 容 

for(var i=0;i<urls.length;i++)t{ 

var url=urls[i];// 每 个 URL 

var xhr=new XMLHttpRequest();// 开 始 一 个 HTTP 请 求 
xhr .open("GET", url, false);//false 则 表示 进行 同步 请 求 
xhr.send();// 阻 塞 住 ， 一 直到 响应 完成 
if(xhr,status1==200)// 如 果 请 求 失败 则 抛 出 错误 
throw Error(xhr.status+""+xhr.statusText+":"+url); 
contents.push(xhr.responseText);// 否 则 ， 存 储 通过 URL 获 取得 到 的 内 容 































































































} 
// 最 后 ， 将 这 些 URL 内 容 以 数组 的 形式 传递 回 主线 程 


postMessage(contents); 





22.5 ”类 型 化 数组 和 ArrayBuffer 


正如 第 7 章 介 绍 的 那样 ，JavaScript 中 的 数组 是 包含 多 个 数值 属性 和 
一 个 特殊 的 length 属 性 的 通用 对 象 。 数 组 元 素 可 以 是 JavaScript 中 任意 的 
值 。 数 组 可 以 动态 地 增长 和 收缩 ， 也 可 以 是 稀 艳 数组 。JavaScript 的 实现 
中 对 数组 做 了 很 多 的 优化 ， 使 得 典型 的 数组 操作 可 以 变 得 很 快 。 类 型 化 
nn 《参见 7.11 节 ) ， 它 和 常规 的 数组 有 如 下 重要 的 区 
别 |: 











类 型 化 数组 中 的 元 系 都 是 数字 。 使 用 构造 函数 在 创建 类 型 化 数组 
的 时 候 决 定 了 数组 中 数字 〈 有 符号 或 者 无 符号 整数 或 者 译 点 数 ) 的 类 型 


和 大 小 《以 位 为 单位 ) 。 








类 型 化 数组 有 固定 的 长 度 。 
在 创建 类 型 化 数组 的 时 候 ， 数 组 中 的 元 素 总 是 默认 初始 化 为 0。 


一 共有 8 种 类 型 化 数组 ， 每 一 种 的 元 系 类 型 都 不 同 。 可 以 使 用 如 下 
所 示 的 构造 函数 来 创建 这 8 种 类 型 化 数组 : 


构造 函数 
Int8Array() 
Uint8Array() 
Int16Array() 
Uint16Array() 
Int32Array() 
Uint32Array() 
Float32Array() 
Float64Array() 


溢 


符号 字 
无 符号 字 刷 
有 符号 16 位 短 整数 

无 符号 16 位 短 整 数 

有 符号 32 位 整数 

无 符号 32 位 整数 

32 位 浮 点 数值 

64 位 浮 点 数值 ，JavaScript 中 的 常规 数字 


uy 


:是 =: 


类 型 化 数组 、 过 canvas 之 和 核心 JavaScript 
类 型 化 数组 是 用 于 canvas 之 元 素 的 WebGL 3D 图 形 化 API 中 重要 的 
一 部 分 ， 浏 览 器 已 经 将 它们 实现 成 为 WebGEL 的 一 部 分 。 本 书 不 会 对 
WebGL 做 介绍 ， 但 是 类 型 化 数组 通常 有 用 ， 因 此 在 这 里 做 相应 的 介 





绍 。 回 忆 一 下 ， 在 第 21 章 中 介绍 过 ， 画 布 API 定 义 了 一 个 getImageDate() 
方法 ， 该 方法 返回 一 个 ImageData 对 象 。ImageData 对 象 的 data 属 性 就 是 
一 个 字 节 数组 。 在 HTML 标准 中 把 这 叫做 CanvasPixelArray， 但 是 ， 它 基 
本 上 和 这 里 描述 的 Uint8Array 是 一 样 的 ， 除 了 它 可 以 处 理 超过 0 一 255 范 


围 的 值 之 外 。 


要 注意 的 是 ， 这 些 类 型 不 是 核心 语言 的 一 部 分 。JavaScript 语 言 未 来 
的 版 本 可 能 会 引入 对 这 些 类 型 化 数组 的 支持 ， 但 是 ， 截 至 撰写 本 书 时 ， 
都 尚未 清楚 ， 是 售 JavaScript 语 言 本 身 会 采用 这 里 描述 的 这 些 API 还 是 创 
建新 的 API。 


在 创建 一 个 类 型 化 数组 的 时 候 ， 可 以 传递 数组 大 小 给 构造 函数 ， 或 
者 传递 一 个 数组 或 者 类 型 化 数组 来 用 于 初始 化 数组 元 素 。 一 旦 创建 了 类 
型 化 数组 ， 就 可 以 像 操作 其 他 类 数组 对 象 那 样 ， 通 过 常规 的 中 括号 表示 
法 来 对 数组 元 系 进行 读 / 写 操作 : 








var bytes=new Uint8Array(1024);//1KB 字 节 

for(var i=0;i<bytes.length;i++)// 循 环 数组 的 每 个 元 素 
bytes[i]=i&QxFF;// 设 置 为 索引 的 低 8 位 值 

var copy=new Uint8Array(bytes);// 创 建 数 组 的 副本 

var ints=new Int32Array([0,1,2,3]);// 包 含 这 4 个 ijnt 值 的 类 型 化 数组 
































现代 JavaScript 语 言 实现 对 数组 进行 了 优化 ， 使 得 数组 操作 已 经 非常 
高 效 。 不 过 ， 类 型 化 数组 在 执行 时 间 和 内 存 使 用 上 都 要 更 加 高 效 。 下 面 
的 函数 用 于 计算 出 比 指定 数值 小 的 最 大 素数 。 它 使 用 了 埃 拉 托 色 尼 算 选 
算法 ， 该 算法 要 求 使 用 一 个 大 数组 来 存储 哪些 数字 是 素数 ， 哪 些 是 合 
数 。 由 于 每 个 数组 元 素 只 要 使 用 一 位 信息 ， 因 此 这 里 使 用 Pt8Array 要 比 
使 用 和 常规 的 JavaScript 数 组 更 加 高 效 : 























// 使 用 埃 拉 托 色 尼 筛 选 算法 ， 返 回 一 个 小 于 n 的 最 大 素数 
function Sieve(n){ 

var a=new Int8Array(n+1);// 如 果 Xx 是 合 数 ， 则 a[x] 为 1 
var max=Math.floor(Math.sqrt(n)); // 因 数 不 能 比 它 天 
var p=2;//2 是 第 一 个 素数 

while(p== max){// 对 于 小 于 max 的 素数 

for (var i=2*p;I<=n;Ii+=p)// 将 p 的 倍数 都 标记 为 合 数 
a[i]=1; 

while(a[f++p] )/* empty*/;// 下 一 个 未 标记 的 索引 值 是 素数 
} 






































while(a[n])n-- ee dD 找到 最 大 的 素数 


return n;// 将 它 返 




















如 果 将 其 中 的 Int8ArrayO 构 造 函 数 痊 换 成 传统 的 Array0 构 造 函 数 ， 
sieve() 函 数 依然 可 用 ， 但 是 ， 处 理 过 程 中 可 能 需要 2 一 3 倍 的 时 间 ， 而 且 
需要 更 多 的 内 存 来 存储 大 的 参数 n 的 值 。 当 处 理 图 形 相 关 的 数字 或 者 数 











学 相关 的 数字 的 时 候 ， 交 型 化 数组 也 很 有 用 : 





var matrix=new Float64Array(9);// 一 个 3x3 的 矩阵 
var 3dPoint=new InNt16Array(3);//3D 空 间 中 的 一 点 
var rgba=new Uint8Array(4) ;77 一 个 4 字 节 的 RGBA 像 素 值 
var sudoku=new Uint8Array(81);// 一 个 9x9 的 数 独 板 




















使 用 JavaScript 的 中 括号 表示 法 可 以 获取 和 设置 类 型 化 数组 的 单个 元 
素 。 然 而 ， 类 型 化 数组 自己 还 定义 了 一 些 用 于 设置 和 获取 整个 数组 内 容 
的 方法 。 其 中 set0 方 法 用 于 将 一 个 第 规 或 者 类 型 化 数组 复制 到 一 个 类 型 
化 数组 中 : 





var bytes=new Uint8Array(1024)//1KB 绥 冲 区 
var pattern=new Uint8Array([0,1,2,3]);// 一 个 4 个 字 节 的 数组 
bytes.set(pattern);// 将 它们 复制 至 j 另 一 个 数组 的 开始 
bytes.set(pattern,4);// 在 另 一 个 偏 移 量 处 再 次 复制 它们 
bytes.set([0,1,2,3],8);// 或 直接 从 一 个 常规 数组 复制 值 





















































类 型 化 数组 还 有 一 个 subarray0) 方 法 ， 调 用 该 方法 返回 部 分 数组 内 


蝶 





var ints=new Int16Array([0,1,2,3,4,5,6,7,8,9]);//10 个 短 整 数 
var last3=ints.subaarray(ints.length-3,ints.length);// 最 后 三 个 
last3[0]//=>7: 等 效 于 ints[7] 














要 注意 的 是 ，subarray0 方 法 不 会 创建 数据 的 副本 。 它 只 是 直接 返回 
原 数组 的 其 中 一 部 分 内 容 : 








ints[9]=-1;// 改 变 原 数组 中 的 元 素 值 ， 然 后 .… 
last3[2]//=> -1: 同 时 也 改变 子 数 组 中 的 元 素 值 




















subarray() 方 法 返回 当前 数组 的 一 个 新 视图 ， 这 一 事实 ， 说 明了 类 型 
化 数组 中 东 些 重要 的 概念 : 它们 都 是 基本 字 节 块 的 视图 ， 称 为 一 个 
ArrayBuffer。 每 个 类 型 化 数组 都 有 与 基本 缓冲 区 相关 的 三 个 属性 








last3.buffer//=> 返 回 一 个 ArrayBuffer 对 象 
last3.buffer==ints.buffer//=>true: 两 者 都 是 同一 缓冲 区 上 的 视图 
last3.byteoffset//=>14: 此 视图 从 基本 缓冲 区 的 第 14 个 字 节 开始 
last,bytelength//=>6: 该 视图 是 6 字 节 〈3 个 16 位 整数 ) 长 
















































































ArrayBuffer 对 象 自 号 只 有 一 个 返回 它 长 度 的 属性 : 








last3.byteLength//=>6: 此 视图 6 个 字 节 长 
last3.buffer.byteLength//=>20: 但 是 基本 缓冲 区 长 度 有 20 个 字 节 长 















































ArrayBuffer 只 是 不 透明 的 字 节 块 。 可 以 通过 类 型 化 数组 获取 这 些 字 
节 ， 但 是 ArrayBuffer 上 自己 并 不 是 一 个 类 型 化 数组 。 然 而 ， 要 注意 的 是 : 
可 以 像 对 任意 JavaScript 对 象 那 样 ， 使 用 数字 数组 索引 来 操作 
ArrayBuffer。 但 是 ， 这 样 做 并 不 能 赋予 访问 缓冲 区 中 字 节 的 权限 : 








var bytes=new Uint8Array(8);// 分 配 8 个 字 节 
bytes[0]=1;// 把 第 一 个 字 节 设置 为 1 
bytes.buffer[0]//=>undefined :缓冲 区 没有 索引 值 0 
bytes .buffer[1]=255;// 试 着 错误 地 设置 绥 冲 区 中 的 字 节 
bytes.buffer[1]//=>255: 这 只 设置 一 个 常规 的 JS 属性 
bytes[1]//=>0: 上 面 这 行 代码 并 没有 设置 字 节 











































































































可 以 直接 使 用 ArrayBufferO 构 造 函数 来 创建 一 个 ArrayBuffer， 有 了 
ArrayBuffer 对 象 后 ， 可 以 在 该 缓冲 区 上 创建 任意 数量 的 类 型 化 数组 视 
图 : 





var buf=new ArrayBuffer(1024*1024);//1iMB 

var asbytes=new Uint8Array(buf);// 视 为 字 节 

var asints=new Int32Array(buf);// 视 为 32 位 有 符号 整数 

var lastK=new Uint8Array(buf,1023*1024);// 视 最 后 1KB 为 字 节 

var ints2=new Int32Array(buf,1024,256);// 视 第 二 个 1KB 为 256 个 整数 





类 型 化 数组 允许 将 同样 的 字 贡 序列 看 成 8 位 、16 位 、32 位 或 者 64 位 
的 数据 块 。 这 里 提 到 了 “ 字 节 顺序 ”: 字 节 组 织 成 更 长 的 字 的 顺序 。 为 了 
高 效 ， 类 型 化 数组 采用 底层 便 件 的 原生 顺序 。 在 低位 优先 〈little- 
endian) 系统 中 ，ArrayBuffer 中 数字 的 字 节 是 按照 从 低位 到 高 位 的 顺序 
排列 的 。 在 高 位 优先 (big-endian〉 系统 中 ， 字 节 是 按照 从 高 位 到 低位 
的 顺序 排列 的 。 可 以 使 用 如 下 代码 来 检测 系统 的 字 节 顺序 : 

















// 如 果 整 数 9x69969961 在 内 存 中 表示 成 : 91 00 96 90， 

// 则 说 明 当 前 系统 是 低位 优先 系统 

// 相 反 ， 在 高 位 优先 系统 中 ， 它 会 表示 成 : 99 69 96 01 

var little_endian=new Int8Array(new Int32Array([1]).buffer)[90]===1; 




















如 今 ， 大 多 数 CPU 架 构 都 采用 低位 优先 。 然 而 ， 很 多 的 网 络 协议 以 


及 有 些 二 进 制 文 件 格式 ， 是 采用 高 位 优先 的 字 节 顺序 的 。22.6 节 将 会 介 
绍 如 何 使 用 ArrayBuffer 来 存储 从 文件 中 读 取 到 的 或 者 是 从 网 络 中 下 载 下 
来 的 字 节 。 当 这 么 做 的 时 候 ， 要 考虑 平台 的 字 市 顺序 。 通 常 ， 处 理 外 部 
数据 的 时 候 ， 可 以 使 用 Int8Array 和 Uint8Array 将 数据 视 为 一 个 单字 节 数 
组 ， 但 是 ， 不 应 该 使 用 其 他 的 多 字 节 字 长 的 类 型 化 数组 。 取 而 代 之 的 是 
可 以 使 用 DataView 类 ， 该 类 定义 了 采用 显 式 指定 的 字 节 顺序 从 
ArrayBuffer 中 读 / 写 其 值 的 方法 : 














var data;// 假 设 这 是 一 个 来 自 网 络 的 ArrayBuffer 
var view=DataView(data);// 创 建 一 个 视图 
var int=view.getInt32(0);// 从 字 节 0 开始 的 ， 高 位 优先 顺序 的 32 位 有 符号 nt 整数 
int=view.getInt32(4,false);// 接 下 来 的 32 位 jnt 整 数 也 是 高 位 优先 顺序 的 
int=view.getInt32(8,true)// 接 下 来 的 4 个 字 节 视 为 低位 优先 顺序 的 有 符号 int 整 数 
view.setInt32(8, int,false);// 以 高 位 优先 顺序 格式 将 数字 写 回去 



























































DateView 为 8 种 不 同 的 类 型 化 数组 分 别 定义 了 8 个 get 方 法 。 名 字 诸 
如 : getInt16()、getUint320 〇 以 及 getFloat64()。 这 些 方法 的 第 一 个 参数 指 
定 了 ArrayBuffer 中 的 字 节 偏 移 量 ， 表 示 从 哪个 值 开 始 获 取 。 除 了 
getInt8() 方 法 和 getUint8() 方 法 之 外 ， 其 他 所 有 getter 方 法 都 接受 第 二 个 可 
选 的 布尔 类 型 的 参数 。 如 果 忽 上 略 该 参数 或 者 将 该 参数 设置 为 false， 则 表 
示 末 用 高 位 优先 字 节 顺序 ， 反 之 ， 则 采用 低位 优先 字 节 顺序 。 


DateView 同 时 也 定义 了 8 个 对 应 的 set 方 法 ， 用 于 将 值 写 入 到 那个 基 
本 缓存 区 ArrayBuffer 中 。 这 些 方法 的 第 一 个 参数 指定 偏 移 量 ， 表 示 从 哪 
个 值 开始 写 。 第 二 个 参数 指定 要 写 入 的 值 。 除 了 setInt80 方 法 和 
setUint8() 方 法 之 外 ， 其 他 每 个 方法 都 接受 第 三 个 可 选 的 参数 。 如 果 忽 略 
该 参数 或 者 将 该 参数 设置 为 false， 则 将 值 以 高 位 优先 字 节 顺序 写 入 ; 反 
之 ， 则 采用 低位 优先 字 节 顺序 写 入 。 


22.6 Blob 


Blob 是 对 大 数据 块 的 不 透明 引用 或 者 句柄 。 名 字 来 源 于 SQL 数据 
库 ， 表 示 “ 二 进 制 大 对 象 ”(Binary Large Object) 。 在 JavaScript 中 ， 
Blob 通 常 表 示 二 进 制 数 据 ， 不 过 它们 不 一 定 非得 是 大 量 数 据 : Blob 也 可 
以 表示 一 个 小 型 文本 文件 的 内 容 。Blob 是 不 透明 的 : 能 对 它们 进行 直接 
操作 的 就 只 有 获取 它们 的 大 小 (以 字 节 为 蛙 位 ) 、MIME 类 型 以 及 将 它 
们 分 割 成 更 小 的 Blob: 


























var blob=...// 后 面 会 介绍 如 何 获取 一 个 Blob 

bl1ob ,size//B1ob 大 小 《以 字 节 为 单位 ) 

blob .type//Blob 的 MIME 类 型 ， 如 果 未 知 的 话 ， 则 是 "" 

var subblob=blob.slice(0,1024,"text/plain");//Blob 中 前 1KB 视 为 文本 
var last=blob.slice(blob.size-1024,1024);//Blob 中 最 后 1KB 视 为 无 类 型 














Web 浏 览 器 可 以 将 Blob 存 储 到 内 存 中 或 者 磁盘 上 ，Blob 可 以 表示 非 
常 大 的 数据 块 《 比 如 视频 文件 ) ， 如 果 事先 不 用 slice() 方 法 将 它们 分 割 
成 为 小 数据 块 的 话 ， 无 法 存储 在 主 内 存 中 。 正 是 因为 Blob 可 以 表示 非常 
大 的 数据 块 ， 并 且 它 可 能 需要 磁盘 的 访问 权限 ， 所 以 使 用 它们 的 API 是 
异步 的 《在 Worker 线 程 中 有 提供 相应 的 同步 版 本 ) 。 


Blob 本 身 并 没有 多 大 意思 ， 但 是 它们 为 用 于 二 进 制 数据 的 大 量 
JavaScript API 提 供 重 要 的 数据 交换 机 制 。 图 22-2 展 示 了 如 何 从 Web、 本 
地 文件 系统 、 本 地 数据 库 或 者 其 他 的 窗口 和 Worker 中 对 Blob 进 行 读 写 。 
人 
取 Blob 内 容 。 
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图 22-2 Blob 以 及 使 用 Blob 的 API 








在 使 用 Blob 之 前 ， 首 先 必须 要 获取 Blob。 获 取 Blob 有 很 多 方法 ， 其 
中 有 些 方法 中 涉及 的 API 之 前 已 经 介绍 过 了 ， 而 有 些 API 则 会 在 本 章 后 
续 部 分 做 相应 的 介绍 : 


.Blob 支 持 结构 性 复制 算法 〈 参 见 22.2 节 的 “结构 性 复制 >) ， 这 就 意 
味 着 ， 可 以 通过 message 事 件 从 其 他 窗口 或 者 线程 中 获取 Blob。 参 见 22.3 
节 和 22.4 节 。 


:可 以 从 客户 端 数据 库 中 获取 Blob， 这 部 分 会 在 22.8 节 进行 相应 介 


绍 。 








“可 以 使 用 XHR2 标 准 中 的 尖端 特性 ， 通 过 脚本 化 HTTP 从 Web 中 下 
载 Blob 。 这 部 分 内 容 会 在 22.6.2 节 进行 相应 介绍 。 


:可 以 使 用 BlobBuilder 对 象 来 从 字符 串 、ArrayBuffer 对 象 ( 参 见 22.5 
节 ) 以 及 其 他 Blob 来 创建 自己 的 Blob。BlobBuilder 对 象 将 在 22.6.3 节 进 
行 相应 介绍 。 


.最 后 也 是 最 重要 的 加 是 ， 客 户 端 JavaScript 的 File 对 象 是 Blob 的 子 
类 : File 对 象 其 实 就 是 有 名 字 和 修改 日 期 的 Blob 数 据 。 通 过 <<inpnut 
type='"file" 之 元 素 以 及 拖 放 API 可 以 获取 File 对 象 ， 这 部 分 将 在 22.6.1 节 进 
行 相应 介绍 。 在 22.7 节 中 会 介绍 ，File 对 象 还 可 以 使 用 文件 系统 API 来 获 
肥 & 








一 且 获 取 了 Blob， 就 可 以 对 其 进行 很 多 的 操作 ， 其 中 包括 上 述 提 到 


:可 以 使 用 postMessage0) 方 法 癌 其 他 窗口 或 者 Worker 发 送 一 个 Blob。 
参见 22.3 节 和 22.4 市 。 


可 以 将 Blob 存 储 到 客户 并 数据 库 中 。 参 见 22.8 市 。 

:可 以 通过 将 Blob 传 递 给 一 个 XMLHttpRequest 对 象 的 send() 方 法 ， 来 
将 该 Blob 上 传 到 服务 器 。 例 18-9 介 绍 了 相关 的 文件 上 传 的 例子 (要 记 
住 ，File 对 象 就 是 特殊 的 类 型 的 Blob〉。 


:可 以 使 用 createObjectURL0O 函 数 获取 一 个 特殊 的 blob:VXURL， 议 
URL 代 表 一 个 Blob 的 内 容 ， 然 后 ， 将 其 和 DOM 或 者 CSS 结 合 使 用 。 


22.6.4 节 会 对 其 进行 相应 介绍 。 


.可 以 使 用 FileReader 对 象 来 异步 地 〔〈 或 者 在 Worker 线 程 中 同步 地 ) 
将 一 个 Blob 内 容 抽 取 成 一 个 字符 串 或 者 ArrayBuffer。22.6.5 节 将 展示 该 
基本 的 技术 。 


:可 以 使 用 将 在 22.7 节 中 介绍 的 文件 系统 API 和 FileWriter 对 象 ， 来 实 
现 将 一 个 Blob 写 入 到 一 个 本 地 文件 中 。 


下 面 几 节 将 介绍 如 何 简单 地 获取 和 使 用 Blob。 涉 及 本 地 文件 系统 和 
客户 车 数据 库 的 更 为 复杂 的 技术 将 在 它们 各 自 的 浊 节 中 做 相应 介绍 


22.6.1 文件 作为 Blob 


RE 
的 。 浏 览 器 总 是 很 小 心地 实现 该 元 素 ， 目 的 是 为 了 只 允许 上 传 用 户 显 式 
选择 的 文件 。 脚本 是 无 法 将 该 元 素 的 value 属 性 设置 成 一 个 文件 名 的 ， 这 
样 它们 惑 无 法 实现 将 用 户 电脑 上 任意 的 文件 进行 上 传 。 最 近 ， 浏 览 器 提 
供 商 已 经 对 该 元 素 进 行 了 扩展 ， 人 允许 客户 端 可 以 访问 用 户 选 择 的 文件 
要 注意 的 是 ， 人 允许 客户 端 脚本 读 取 选择 的 文件 内 容 不 会 引发 安全 问 

它 和 人 允许 这 些 文件 上 传 到 服务 器 的 安全 级 别 是 一 样 的 。 


在 支持 本 地 文件 访问 的 浏览 器 中 ， 二 input type="file" 之 元 素 上 的 
files 属 性 则 是 一 个 FileList 对 象 。 该 对 象 是 一 个 类 数组 对 象 ， 其 元 素 要 么 
是 0， 要 么 是 用 户 选 择 的 多 个 File 对 象 。 一 个 File 对 象 就 是 一 个 Blob， 除 
此 之 外 ， 还 多 了 name 和 ]astModifiedDate 属 性 : 









































<script> 之 // 输 出 选中 的 文件 列表 相关 的 信息 
function fileinfo(files){ 
for(var i=0;i<files.length;i++){//files 是 一 个 类 数组 对 象 
Var f=files[i]; 
console.1log(f.name, // 只 是 名 字 : 没有 路 径 
f.size,f.type, J/sizefltype 是 Blob 的 属性 
下 lastModifiedDate); // 另 外 一 个 File 对 象 的 属性 
} 
} 
人 

-允许 选择 多 个 图 片 文件 -将 它们 传递 给 Tileinfo( ) 方 法 -- 
in type="file"accept="image/*"multiple onchange="fileinfo(this.files)"/> 



























































能 够 显示 选中 文件 的 名 字 、 类 型 和 大 小 并 没有 多 大 意义 。22.6.4 节 


和 22.6.5 市 将 会 介绍 如 何 真 正 操 作文 件 内 容 。 


除了 通过 二 input 二 元 素来 选择 文件 之 外 ， 用 户 还 可 以 通过 将 本 地 文 
件 放 到 浏览 器 中 来 给 予 脚 本 访问 它们 的 权限 。 当 应 用 接收 到 一 个 drop 事 
件 ， 事 件 对 象 的 dataTransfer.files 属 性 就 会 和 放 入 的 FileList 进 行 关联 (如 
果 有 的 话 ) 。 拖 放 API 在 17.7 节 中 介绍 过 ， 例 22-10 会 展示 如 何在 文件 中 
使 用 该 API。 


22.6.2 ”下 载 Blob 





第 18 章 介绍 了 使 用 XMLHttpRequest 对 象 脚 本 化 HTTP， 同 时 还 介绍 
了 XMLHttpRequest Level 2 〈XHR2 ) 标准 草案 中 定义 的 一 些 新 特性 。 截 
至 撰写 本 书 时 ，XHR2 定 义 了 一 种 将 URL 指 定 的 内 容 以 Blob 的 形式 下 载 
下 来 ， 但 是 浏览 器 还 不 支持 它 。 由 于 代码 还 无 法 测试 (浏览 器 不 文 
持 ) ， 因 此 ， 本 节 只 简单 地 介绍 操作 Blob 的 XHR2 API。 


例 18-2 介 绍 过 如 何 将 URL 指 定 的 内 容 以 纯 文 本 的 形式 下 载 下 来 ， 与 
之 不 同 的 是 ， 例 22-9 展 示 了 从 Web 下 载 一 个 Blob 的 基本 技术 : 


例 22-9: 使 用 XMLHttpRequest 下 载 Blob 























// 以 Blob 的 形式 获取 URL 指 定 的 内 容 ， 并 将 其 传递 给 指定 的 回调 函数 

// 这 里 的 代码 没有 测试 过 : 因为 截至 撰写 本 书 时 ， 没 个 浏览 器 支持 该 API 
function getBlob(url,callback){ 
var xhr=new XMLHttpRequest();// 创 建 一 个 新 的 XHR 对 象 










































































xhr .open("GET", url1);// 指 定 要 获取 内 容 的 URL 

xhr .responseType="blob"// 以 Blob 的 形式 

xhr .onload=function(){//onload 比 onreadystatechange 更 容易 
callback(xhr.response);// 将 Blob 传 递 给 回调 函数 























// 注 意 ， 这 里 是 ,response, 不 是 .responseText 
xhr .send (null);// 发 送 请 求 
} 








如 果 要 下 载 的 数据 量 很 大 ， 想 要 在 下 载 过 程 中 显示 一 个 进度 条 ， 那 
么 可 以 使 用 onprogress 事 件 处 理 程序 ， 这 部 分 将 在 22.6.5 市 中 进行 相应 介 
绍 。 


22.6.3 ”构造 Blob 
Blob 通 常 表 示 来 自 诸如 本 地 文件 、URL 以 及 数据 库 外 部 资源 的 大 数 


据 块 。 然 而 ， 有 的 时 候 ，Web 应 用 想 要 创建 的 Blob， 并 将 其 上 传 到 Web 
上 或 者 存储 到 一 个 文件 或 者 数据 库 中 或 者 传递 给 另 一 个 线程 。 要 从 目 己 
的 数据 来 创建 Blob， 可 以 使 用 BlobBuilder: 





// 创 建 一 个 新 的 BlobBuilder 

var bb=new BlobBuilder();// 把 一 个 字符 串 追 加 到 Blob 中 ， 并 以 一 个 NUL 字 符 标 记 为 字符 串 结束 
bb ,append("This blob contains this text and 10 big-endian 32-bit Signed ints."); 
bb .append("\9");//NUL 结 束 符 表示 字符 串 的 结束 
// 将 数据 存储 到 ArrayBuffer 中 

var ab=new ArrayBuffer(4*10) ， 

var dv=new DataView(ab); 

for(var i=0;i<10;i++)dv.setInt32(i*4,i);// 将 ArrayBuffer 添 加 到 Blob 中 
bb.append(ab);// 现 在 从 builder 中 获取 Blob， 并 指定 MIME 类 型 
var blob=bb.getBlob("x-optional/mime-type-here"); 












































在 本 节 一 开始 介绍 过 Blob 有 一 个 slice() 方 法 ， 用 于 将 Blob 拆 分 成 多 
个 片段 。 通 过 将 多 个 Blob 传 递 给 BlobBuilder 的 append0) 方 法 可 以 实现 将 
多 个 Blob 合 并 在 一 起 。 


22.6.4 Blob URL 


前 面 章 节 介 绍 过 如 何 获 取 或 者 创建 Blob。 现 在 来 介绍 如 何 对 获取 的 
或 者 创建 的 Blob 进 行 操作 。 其 中 最 简单 的 就 是 可 以 创建 一 个 URL 来 指 问 
该 Blob。 随 后 ， 可 以 以 一 般 的 URL 形 式 在 任何 地 方 使 用 该 URL: 在 
DOM 中 ， 在 样式 表 中 ， 甚 至 可 以 作为 XMLHttpRequest 的 目标 。 


使 用 createObjectURLO 函 数 可 以 创建 一 个 Blob URL。 截 至 撰写 本 书 
时 ， 标 准 章 案 和 Firefox 4 都 是 将 该 函数 放 在 全 局 对 象 中 ， 命 名 为 URL， 
Chrome 和 Webkit 浏 览 右 则 在 UREL 前 加 上 了 前 缀 ， 命 名 为 webkitURL。 早 
期 标准 〈 以 及 早期 浏览 器 的 实现 ) 直接 将 该 函数 放 在 Window 对 象 上 。 
可 以 使 用 如 下 代码 ， 实 现 跨 浏览 器 创建 Blob URL: 





var getBlobURL=(window.URLé& &URL.createObjectURL.bind(URL))|| 
(window.webkitURL& &webkitURL.createObjectURL.bind(webkitURL))|| 
window.createObjectURL; 





Web Workers 也 人 允许 使 用 该 API 和 访问 同样 的 URL (或 者 
webkitURL ) 对 象 上 同样 的 函数 。 


传递 一 个 Blob 给 createObjectURL() 方 法 会 返回 一 个 URL 〈 以 普通 字 
符 串 形式 ) 。 该 URL 以 blob:// 开 始 ， 紧 跟着 是 一 小 串 文本 字符 串 ， 该 字 








符 串 用 不 透明 的 唯一 标识 符 来 标识 Blob。 要 注意 的 是 ， 这 和 data://URL 
是 不 同 的 ，data://URL 会 对 内 容 进 行 编码 。Blob URL 只 是 对 浏览 器 存储 
在 内 存 中 或 者 磁盘 上 的 Blob 的 一 个 简单 引用 。blob:VURL 和 file:VURL 也 
是 不 同 的 ，fe:/VUREL 直 接 指 向 本 地 文件 系统 中 的 一 个 文件 ， 仅 暴露 了 文 
和 


例 22-10 展 示 了 两 种 重要 的 技术 。 首 先 ， 它 实现 了 一 个 和 文件 相关 
的 用 于 监听 拖 放 事件 的 “ 拖 放 目标 区 域 "。 然 后 ， 当 用 户 将 一 个 或 多 个 文 
件 拖 放 到 该 目标 区 域 中 时 ， 它 会 使 用 createObjectURL() 方 法 来 为 每 个 文 
30 


例 22-10: 用 Blob URL 来 显示 一 个 拖 放 的 图 片 文件 























<IDOCTYPE html> 

<html>><head> 

<script>// 和 截至 撰写 本 书 时 ，Firefox 和 Webkit 在 

//create0bjectURL( ) 函 数 的 命名 上 意见 不 统一 

var getBlobURL=(window.URL& &URL.createObjectURL.bind(URL))|| 

(window.webkitURL& &webkitURL.createObjectURL.bind(webkitURL))|| 

window.createObjectURL; 

Var revokeBlobURL=(window.URLS& &URL.revokeObjectURL.bind(URL))|| 

(window.webkitURL& &webkitURL.revokeObjectURL.bind(webkitURL))|| 

window,revoke0bjectURL;// 在 文档 载 入 后 ， 在 droptarget 元 素 上 添加 事件 处 理 程序 

// 以 便 它 可 以 处 理 文件 的 拖 放 

window.onload=function( ){// 查 询 要 向 其 中 添加 处 理 程 序 的 元 素 

var droptarget=document .getElementById("droptarget");// 当 
droptarget 元 素 的 时 候 ， 将 其 高 亮 显示 

droptarget .ondragenter=function(e){// 如 果 拖 的 不 是 文件 ， 则 忽略 它 

// 在 实现 的 时 候 ， 使 用 HTML5 的 dropzone 属 性 会 更 加 简单 

var types=e,dataTransfer ,types ; 

if(!types|| 

(types.contains& &types.contains("Files"))|| 

(types.indexOof &&types.indexof("Files")!=-1)){ 

droptarget .classList.add("active");// 高 之 显示 droptarget 

return false;// 阻 止 默认 事件 处 理 
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} 

};// 如 果 用 户 移 出 该 区 域 ， 则 取消 高 亮 显 示 拖 放 区 域 

droptarget .ondragleave=function(){ 

droptarget.classList,.remove("active"); 

};// 此 处 理 程 序 只 是 通知 浏览 器 继续 发 送 提 醒 

droptarget .ondragover=function(e){return false;}》;// 当 用 户 放下 文件 时 ， 就 获取 它们 的 URL， 
并 显示 对 应 的 缩 略 图 

droptarget,ondrop=function(e){ 

var files=e,dataTransfer.files;// 放 下 的 文件 

for(var i=0;i<files.length;i++){// 循 环 每 个 文件 

var type=files[i].type; 

if(type.substring(0,6)!=="image/")// 不 是 图 片 则 忽略 

continue,; 

var img=document.createElement("img");// 创 建 <<ijmg 二 元素 





































































































img.src=getBLobURL(files[i]);// 在 <img>> 元 素 上 使 用 BlLob URL 
img .onload=function( ){// 图 片 载 入 的 时 候 
this .width=100;// 调 整 图 片 大 小 并 

document .body.appendchild(this);// 将 它 添加 到 文档 中 
revokeBlobURL(this,src);// 但 是 要 避免 内 存 泄漏 
} 


droptarget.classList.remove("active");// 取 消 高 亮 显 示 droptarget 区 域 
return false;// 处 理 完毕 

} 

}; 

</script> 

二 style 二 /* 给 文件 拖 放 目 标 区 域 定义 简单 的 样式 */ 
#droptarget{border:solid black 2px;width:200px;height:200px;} 
#droptarget.active{border:solid red 4px;} 

</style> 

</head> 

<body> 芝 !- -文档 只 定义 文件 拖 放 目 标 区 域 - - > 

<div id="droptarget">Drop Image Files Here<=/div> 

</body> 

</html> 




























































































Blob URL 和 创建 它们 的 脚本 拥有 同样 的 源 (参见 13.6.2 市 )。 这 使 
得 它们 比 file://URL 更 加 灵活 ， 由 于 角 e://URL 是 非 同 源 的 ， 因 此 要 在 
Web 应 用 中 使 用 它们 相对 比较 麻烦 。Blob URL 只 有 在 同 源 的 文档 中 才 是 
有 效 的 。 比 如 ， 如 果 将 一 个 Blob URL 通 过 postMessage() 传 递 给 一 个 非 同 
源 窗 口 ， 则 该 URL 对 于 该 窗口 来 说 是 没有 任何 意义 的 。 


Blob URL 并 不 是 永久 有 效 的 。 一 旦 用 户 关 闭 了 或 者 离开 了 包含 创建 
Blob URL 脚 本 的 文档 ， 该 Blob URL 就 失效 了 。 比 如 ， 将 Blob URL 保 存 
0 0 话 的 时 再 使 用 


可 以 通过 调用 URL.revokeObjectURL0O) 方 法 (或 者 
WebkitURL.revokeObjectURL() 方 法 ) ， 来 手动 让 Blob ” ”URL 失效 ， 这 在 
例 22-10 中 已 经 使 用 到 了 。 之 所 以 提供 这 样 的 方式 ， 是 因为 这 和 内 存 管 
理 问 题 有 关 。 一 旦 展示 了 图 卢 的 纵 略 图 之 后 ，Blob 就 不 再 需要 了 ， 应 当 
回收 它 。 但 是 ， 如 条 Web 浏 览 右 正 维护 创建 的 Blob 和 Blob URL 之 间 的 映 
射 和 关系， 那么 即使 该 Blob 己 经 不 用 了 ， 也 不 会 被 回收 。JavaScript 解 释 顺 
无 法 跟踪 字符 串 的 使 用 情况 ， 如 果 URL 仍 然 是 有 效 的 ， 那 么 它 只 能 认为 
该 URL 可 能 还 在 用 。 这 就 意味 着 ， 在 手动 撤销 该 URL 之 前 ， 古 不 会 将 其 
回收 的 。 例 22-10 使 用 的 是 都 是 本 地 文件 ， 不 需要 对 其 进行 清除 ， 但 
是 ， 不 难 想象 ， 如 果 通 过 BlobBuilder 创 建 的 Blob 都 是 存储 在 内 存 中 ， 或 
者 通过 XMLHttpRequest 下 载 的 Blob 是 存储 在 一 个 临时 文件 中 的 话 ， 那 么 

忆 会 有 严重 的 内 存 管理 问题 。 

















blob://URL 模 式 被 显 式 地 设计 成 像 一 个 简化 的 http://URL 那 样 工 作 ， 
并 有 旦 ， 当 请 求 一 个 blob://URL 的 时 候 ， 要 求 浏览 器 像 迷 你 的 HTTP 服 务 占 
那样 做 出 响应 。 如 果 请 求 的 Blob ”URL 已 经 失效 ， 浏 览 器 必须 返回 一 个 
404 无 法 找到 的 状态 码 。 如 果 请 求 的 Blob URL 来 自 另外 的 源 ， 那么 浏览 
器 必须 返回 403 禁 止 访问 的 状态 码 。Blob ”URL 只 人 允许 通过 GET 请 求 获 
取 ， 并 且 一 旦 获取 成 功 ， 浏 览 器 必须 返回 一 个 HTTP 200 OK 的 状态 码 ， 
同时 返回 一 个 使 用 Blob ”type 属性 的 Content-Type 头 部 信息 。 由 于 Blob 
URL 的 工作 方式 和 简单 的 HTTP UREL 一 致 ， 因 此 可 以 通过 
XMLHttpRequest 将 它们 指定 的 内 容 * 下 载 ? 下 来 。 〈 然 而 ， 下 一 节 会 介绍 
如 何 使 用 FileReader 对 象 更 直接 地 读 取 Blob 的 内 容 。) 











22.6.5” 读 取 Blob 


到 目前 为 止 ， 介绍 了 Blob 是 不 透明 的 大 数据 块 ， 只 允许 通过 Blob 
URL 来 间接 地 访问 它们 的 内 容 。FileReader 对 象 允许 访问 Blob 中 的 字符 
或 者 字 节 ， 可 以 将 它 视 为 是 BlobBuilder 对 应 的 一 个 对 象 。〈( 其 实 这 个 名 
字 叫 BlobReader 会 更 好 ， 因 为 它 只 适用 于 Blob 而 不 是 文件 。) 由 于 Blob 

可 能 会 是 存储 在 文件 系统 中 的 大 对 象 ， 因 此 读 取 它们 的 API 是 异步 的 ， 
is API 很 像 。 尽 管 Worker 线 程 也 可 以 使 用 异步 的 API， 
但 在 worker 线 程 中 有 对 应 的 同步 版 本 的 API， 叫 FileReaderSync。 


要 使 用 FileReader， 首 先 要 通过 FileReader0O 构 造 函 数 创 建 一 个 实 
例 。 然 后 ， 定 义 一 个 事件 处 理 程序 。 通 常会 给 load 事 件 、error 事 件 以 及 
可 能 会 给 progress 事 件 定义 处 理 程序 。 可 以 使 用 onload、onerror 和 
onprogress 或 者 使 用 标准 的 addEventListener() 方 法 来 定义 处 理 程 序 。 
FileReader 对 象 还 会 触发 1oadstart 事 件 、loadend 事 件 以 及 abort 事 件 ， 这 些 
事件 和 同名 的 XMLHttpRequest 事 件 一 样 : 参见 18.1.4 节 。 


创建 了 FileReader 对 象 并 注册 了 对 应 的 事件 处 理 程 序 之 后 ， 必 须要 
将 要 读 取 的 Blob 传 递 给 下 面 这 4 个 方法 其 中 之 一 : readAsText()、 
readAsArrayBuffer()、readAsDataURL() 以 及 readAsBinaryString()。( 当 
0 也 可 以 先 调用 其 中 的 方法 ， 然 后 再 注册 事件 处 理 程序 22 4 人 

绍 过 JavaScript 天 生 就 是 单线 程 的 ， 这 意味 着 除非 等 到 调用 的 函数 返回 
Be 器 回 到 事件 循环 阶段 ， 和 ) 这 
些 方法 中 前 两 个 方法 是 非常 重要 的 ， 这 里 会 对 它们 做 相应 介 这 里 每 
个 方法 都 接受 Blob 作 为 第 一 个 参数 。 ee SR 
选 的 参数 ， 访 参数 指定 文本 的 编码 方式 。 如 有 果 不 传递 该 参数 ， 则 自动 会 


























采用 ASCII 和 UTF-8 文 本 《〈 也 可 以 通过 标记 字 节 顺序 的 UTF-16 文 本 或 者 
BOM ) 处 理 。 


在 FileReader 读 取 指 定 的 Blob 的 时 候 ， 它 会 更 新 它 的 readyState 属 
性 。 该 属性 值 开 始 是 0(， 表 示 还 未 读 取 任何 信息 。 当 读 取 到 一 些 数据 的 
时 候 ， 它 会 变 成 1， 而 当 数 据 完全 读 取 完毕 后 ， 该 值 会 变 成 2。 它 的 
result 属 性 包含 部 分 或 者 完整 的 结果 (字符 串 或 者 ArrayBuffer 形 式 〉。 
般 不 会 直接 轮 询 state 和 result 属 性 ， 而 是 在 onprogre ss 或 者 onload 事 件 处 
理 程 序 中 使 用 它们 。 


人 22-11 展 示 了 如 何 使 用 readAsText(0) 方 法 读 取 用 户 选择 的 本 地 文本 
文件 。 


例 22-11: 使 用 FileReader 读 取 文 本 文件 



































<script> 之 // 读 取 指 定 文本 文件 并 将 内 容 显示 在 下 面 的 <pre> 元 素 中 
function readfile(f){ 

var reader=new FileReader();// 创 建 一 个 FileReader 对 象 

reader .readAsText(f);// 读 取 该 文件 

reader .onload=function(){// 定 义 一 个 事件 处 理 程序 

Var text=reader.result;// 这 是 文件 内 容 

var out=document. getElementById( "output"); // 查 询 output 元 素 
out .innerHTML="";// 清 除 该 元 素 内 容 

out .appendchild(document .createTextNode(text ) ) ;// 显 示 文 件 内 容 























} 
reader .onerror=function(e){// 如 果 发 生 了 错误 
console.1log("Error",e);// 将 错误 以 日 志 形 式 输出 
}; 


</script> 

Select the file to display: 

<input type="file"onchange="readfile(this.files[0])"><=/input> 
<pre id="output">></pre> 








readAsArrayBuffer() 方 法 和 readAsText() 方 法 类 似 ， 不 同 的 是 ， 它 额 
外 多 做 了 一 些 处 理 将 结果 以 ArrayBuffer 形 式 返 回 ， 而 不 是 字符 串 形式 。 
例 22-12 展 示 了 如 何 使 用 readAsArrayBuffer() 方 法 ， 以 高 位 优先 字 节 顺序 
读 取 文件 的 前 4 个 字 节 。 


例 22-12: 读 取 文 件 的 前 4 个 字 节 





<script> 之 // 检 测 指定 的 blob 的 前 4 个 字 节 
// 如 果 这 个 约 数 标识 文件 的 类 型 ， 那 么 就 将 其 异步 地 设置 成 Blob 的 属性 
function typefile(file)t{ 
var slice=file.slice(0,4);// 只 读 取 文件 起 始 部 分 





























vy 














var reader=new FileReader();// 创 建 一 个 异步 的 FileReader 对 象 
reader .readAsArrayBuffer(slice);// 读 取 文件 片段 

reader .onload=function(e)t{ 
var buffer=reader.result;//ArrayBuffer 形 式 的 结果 

var view=new DataView(buffer);// 访 问 结 果 中 的 字 节 内 容 

var magic=view.getUint32(0,false);// 以 高 位 优先 字 节 顺序 ， 读 取 4 个 字 节 


switch(magic){// 从 中 检测 文件 类 型 

















十 





case Qx89504E47:file.verified type="image/png";break; 
case Qx47494638:file.verified type="image/gif";break; 
case Qx25504446:file,.verified type="application/pdf";break; 
case Qx504b0304:file.verified type="application/zip";break; 


} 
console.1log(file.name,file.verified type); 


了 


</script> 
<input type="file"onchange="typefile(this.files[0])"~><=/input> 





在 Worker 线 程 中 ， 可 以 使 用 FileReaderSync 取 代 FileReader。 同 步 版 
本 的 API 同 样 定义 了 readAsText() 方 法 和 readAsArrayBuffer() 方 法 ， 它 们 
和 异步 版 本 的 方法 接收 同样 的 参数 。 不 同 的 地 方 是 同步 方法 会 阻塞 住 ， 
一 直到 操作 完成 并 以 字符 串 或 者 ArrayBuffer 形 式 返 回 结果 ， 并 且 不 需要 
使 用 事件 处 理 程序 。 下 面 的 例 22-14 就 使 用 FileReaderSync。 


22.7 文件 系统 API 


22.6.5” 节 介 绍 过 使 用 FileReader 类 来 读 取 用 户 选 择 的 文件 或 者 任意 
Blob 的 内 容 。 其 中 文件 的 类 型 和 Blob 类 型 是 在 一 份 名 为 文件 API 的 标准 
草案 中 定义 的 ， 另 外 还 有 一 份 比 文件 API 更 新 的 标准 草案 ， 它 允许 Web 
应 用 对 一 个 私有 的 文件 系统 “ 沙 箱 ” 进 行 写 文 件 、 读 文件 、 创 建 目 录 、 列 
出 目录 等 一 些 操 作 。 截 至 撰写 本 书 时 ， 只 有 Google 的 Chrome 浏 览 器 实现 
了 此 文件 系统 API， 尽 管 此 API 相 比 于 本 章 介 绍 的 其 他 API， 甚 至 都 还 不 
够 稳定 ， 但 是 它 依然 是 非常 强大 的 ， 并 且 对 本 地 存储 器 是 尤为 重要 的 ， 
因此 这 里 将 会 它 进 行 介 绍 。 本 市 会 介绍 基本 的 文件 系统 操作 ， 但 是 不 会 
对 API 所 有 的 特性 都 一 一 做 介绍 。 由 于 此 API 很 新 还 未 趋 于 稳定 ， 因 此 
在 第 三 部 分 也 不 做 介绍 。 


操作 本 地 文件 系统 中 的 文件 分 为 以 下 几 步 : 首先 ， 必 须要 获取 一 个 
表示 本 地 文件 系统 的 对 象 。 在 Worker 线 程 中 可 以 使 用 一 个 同步 API 来 获 
取 访 对象， 相应 地 在 主线 程 中 也 有 对 应 的 异步 API; 








// 同 步 地 获取 一 个 文件 系统 。 传 递 文件 系统 的 有 效 期 和 大 小 参数 
// 返 回 一 个 文件 系统 对 象 或 者 抛 出 错误 
var fs=requestFileSystemSync(PERSISTENT,1024*1024);// 异 步 版 本 的 API 需 要 使 用 回调 函数 来 处 


















































蛙 成 功 和 失败 的 情况 
| // 有效期 
50*1024*1024, // 大 小 : 

ED ee 
// 这 里 使 用 fs 进行 一 些 操 作 
















































































}, 

function(e){// 这 里 e 是 一 个 错误 对 象 
console.1log(e);// 或 者 以 其 他 方式 处 理 它 
}); 














不 论 是 同步 版 本 的 API 还 是 异步 版 本 的 API， 都 可 以 指定 文件 系统 
的 有 效 期 和 大 小 。 一 个 永久 的 (PERSISTENT) 的 文件 系统 适用 于 想 要 
永久 存储 用 户 数据 的 web 应 用 。 除 非 用 户 显 式 要求 删 除 这 些 数据 ， 和 否则 
浏览 右 永 远 都 不 会 删除 这 些 数据 。 一 个 临时 的 〈TEMPORARY ) 文件 系 
统 适 用 于 想 要 缓存 数据 ， 在 浏览 器 删除 该 文件 系统 任 然 可 以 操作 这 些 数 
据 的 web 应 用 。 文 件 系统 的 大 小 是 以 字 节 为 单位 指定 的 ， 并 且 其 大 小 应 
沪 是 一 个 保证 足够 存储 甩 需 数据 的 合理 上 限 “。 浏览 大 可 能 会 强制 限 
额 。 














使 用 这 些 方 法 获取 的 文件 系统 依赖 于 包含 它 的 文档 源 。 所 有 同 源 
主机、 端口 和 协议 ) 的 文档 或 者 Web 应 用 共享 一 个 文件 系统 。 两 个 非 
同 源 的 文档 或 者 Web 应 用 拥有 完全 独立 的 文件 系统 。 同 时 ， 文 件 系 统 和 
用 户 硬 盘 上 其 他 的 文件 也 是 相互 隔离 的 : Web 应 用 是 无 法 拥有 整个 硬盘 
的 root 权 限 的 ， 或 者 说 无 法 访问 任意 的 文件 。 


要 注意 的 是 ， 这 些 函 数 名 字 中 都 有 "request"。 第 一 次 调用 的 时 候 ， 
浏览 器 在 创建 一 个 文件 系统 并 授权 冉 前 可 能 会 询问 用 户 是 否 多 许 - 
旦 用 户 允 许 了 ， 接 下 来 调用 这 此 函数 的 时 候 ， 就 只 会 返回 个 表示 已 有 
本 地 文件 系统 的 对 象 。 


通过 上 述 方法 获取 到 的 文件 系统 对 象 有 一 个 root 属 性 ， 该 属性 指 问 
文件 系统 的 根 目 录 。 这 是 一 个 DirectoryEntry 对 象 ， 并 且 它 可 能 还 有 矢 套 
的 目录 ， 这 些 骨 套 的 目录 也 用 DirectoryEntry 对 象 表示 。 文 件 系统 的 每 个 
目录 中 包含 的 文件 都 用 FileEntry 对 象 表示 。DirectoryEntry 对 象 定义 一 些 
通过 路 径 名 〈pathname) 《如 果 指 定 的 名 字 不 存在 ， 它 们 会 根据 指定 的 
情况 来 创建 新 的 目录 或 者 文件 ) 获取 DirectoryEntry 对 象 和 FileEntry 对 象 
的 方法 。DirectoryEntry 对 象 还 定义 了 一 个 createReader0 工 三 方法 ， 用 于 

一 个 列 出 目录 内 容 列表 的 DirectoryReader 对 象 。 


FileEntry 类 定义 一 个 获取 表示 文件 内 容 的 File 对 象 〈 一 个 Blob) 的 

















方法 。 然 后 ， 可 以 使 用 FileReader 对 象 〈22.6.5 节 介绍 过 ) 读 取 该 文件 。 
除 此 之 外 ，FileEntry 还 定义 一 个 方法 ， 该 方法 返 wntier dj 
用 该 对 象 可 以 将 内 容 写 入 到 文件 中 。 


通过 该 API 读 取 或 者 写 入 文件 分 为 如 下 几 步 : 首先 要 获得 文件 系统 
对 象 。 然 后 通过 《也 可 以 创建 ) 需要 的 文件 的 
FileEntry 对 象 。 然 后 使 用 FileEntry 对 象 获取 File 或 者 FileWriter 对 象 来 进 
行 读 / 写 操作 。 如 果 在 使 用 异步 API 的 情况 下 ， 这 几 步 过 程 会 更 加 复杂 : 




















// 读 取 文 本 文件 "hello .txt"， 并 将 其 内 容 以 日 志 的 形式 输出 
// 由 于 使 用 了 异步 API， 因 此 出 现 了 4 层 函 数 拒 套 

// 此 例子 不 包括 任何 错误 回调 处 理 
requestFileSystem(PERSISTENT,10*1024*1024,function(fs){// 获 取 文 件 系统 
fs.root.getFile("hello.txt", {}, function(entry){// 获 取 FileEntry 对 象 
entry.file(function(file){// 获 取 File 对 象 

var reader=new FileReader(); 

reader .readAsText (file); 

reader .onload=function(){// 获 取 文件 内 容 

console.log(reader.result),; 
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例 22-13 是 一 个 更 加 完整 的 例子 ， 涵 盖 了 很 多 内 容 。 它 展示 了 如 何 
使 用 异步 API 读 文件 、 写 文件 、 删 除 文件 、 创 建 目 录 以 及 列 出 目录 。 


例 22-13: 使 用 异步 文件 系统 API 





久居 

* 这 些 函 数 在 Google Chrome19 .9 开发 版 中 都 测试 过 了 
* 启 动 Chrome 的 时 候 需 要 开启 这 些 选项 : 
*--unlimited-quota-for-files: 启 用 文件 系统 访问 
*--allow-file-access-from-files: 人 允许 通过 file://URL 进 行 测试 


// 这 里 使 用 的 大 部 分 异步 函数 都 接受 一 个 可 选 的 错误 回调 参数 
// 这 里 的 回调 函数 只 是 简单 地 将 错误 输出 
function logerr(e){console.log(e);}//requestFileSystem( ) 方 法 创建 了 一 个 在 沙 箱 环境 中 的 本 
地 文件 系统 ， 
// 并 且 只 有 同 源 的 应 用 才 可 以 访问 
// 可 以 在 该 文件 系统 中 进行 文件 读 / 写 ， 但 是 只 能 限定 在 该 沙 箱 中 
// 不 能 访问 其 他 的 文件 系统 
var filesystem;// 假 设 在 调用 下 面 的 函数 之 前 ， 已 经 初始 化 完毕 
requestFileSystem(PERSISTENT, // 或 者 采用 用 于 缓存 文件 的 临时 CTEMPORARY) 文件 系统 
10*1024*1024,//10MB 
function(fs){// 完 成 后 ， 调用 此 方法 
filesystem=fs;// 将 文件 系统 保存 到 一 个 全 局 变量 中 













































































































































































































































































































































































}, 
logerr ) ;// 如 果 发 生 错 误 则 调用 此 方法 
// 以 文本 形式 读 取 指定 文件 的 内 容 ， 并 将 它们 传递 给 回调 函数 















































function readTextFile(path,callback){// 根 据 指定 的 文件 名 ， 调 用 getFile( ) 获 取 相应 的 
FileEntry 对 象 

filesystem.root.getFile(path, {},function(entry){// 使 用 FileEntry 调 用 此 方法 来 获得 文件 

// 现 在 调用 FileEntry .file( ) 方 法 获取 File 对 象 

entry.file(function(file){//file 就 表示 File 对 象 

var reader=new FileReader();// 创 建 一 个 FileReader 对 象 

reader .readAsText (file);// 读 取 文 件 

reader .onload=function( ){// 当 读 取 成 功 时 

callback(reader .result);// 将 其 内 容 传递 给 回调 函数 

} 

reader .onerror=logerr;// 记 录 调 用 readAsText( ) 时 发 生 的 错误 

}, logerr );// 记 录 调 用 file( ) 方 法 时 发 生 的 错误 


















































































































































}, 
logerr );// 记 录 调 用 getFile( ) 时 发 生 的 错误 


} 

// 将 指定 的 内 容 添 加 到 指定 路 径 的 文件 中 ， 
// 如 果 指 定 路 径 的 文件 不 存在 ， 则 使 用 该 文件 名 包 
// 完 成 之 后 ， 调 用 回调 函数 
function appendToFile(path,contents,callback){//filesystem.root 指 根 目 录 
filesystem.root.getFile(// 获 取 FileEntry 对 象 

path, // 想 要 获取 的 文件 的 名 字 和 路 径 
{fcreate:true},// 如 果 不 存在 则 创建 一 个 
function(entry){// 完 成 之 后 调用 此 函数 
entry.createwriter(// 为 该 文件 创建 一 个 Filewriter 对 象 
function(writer ){// 创 建 完成 之 后 调用 此 函数 

// 默 认 情况 下 ， 从 文件 最 开始 开始 写 入 
// 这 里 指定 从 文件 最 后 开始 写 
writer,.seek(writer. length) ;// 移 动 到 文件 最 后 

// 将 文件 内 容 转换 成 Blob 

/V/contents 参 数 可 以 是 字符 串 、B1ob 或 者 ArrayBuffer 
var bb=new BlobBuilder() 

bb.append(contents); 

var blob=bb .getBlob();// 现 在 将 该 Blob 写 入 到 文件 中 
writer.write(blob); 
writer .onerror=logerr; 0 jwriter( ) 方 法 时 发 生 的 错误 
if(callback)// 如 果 有 回调 函数 
writer .onwrite= ee // 则 成 功 的 时 候 调 用 


}, 
logerr ) ; // 记 录 调 用 createwriter( ) 方 法 时 发 生 的 错误 
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建 一 个 新 的 文件 
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logerr); // 记 录 调 用 getFile( ) 方 法 时 发 生 的 错误 


























} 

// 删 除 指定 的 文件 ， 完 成 后 调用 指定 的 回调 函数 

function deleteFile(name,callback)t{ 

filesystem.root.,getFile(name, {},// 根 据 指定 的 名 字 获 取 相应 的 FileEntry 对 象 
function(entry){//entry 就 是 该 FileEntry 对 象 
entry.remove(callback,// 删 除 FileEntry 对 象 

logerr );// 或 者 记录 调用 remove( ) 方 法 时 发 生 
// 的 错误 



























































}, 

logerr ) ;// 记 录 调 用 getFile( ) 方 法 时 发 生 的 错误 
} 

// 根 据 指定 的 名 字 创 建 一 个 新 的 


下 
function oe et or CE ne callback){ 
filesystem.root.getDirectory(name,// 要 创建 的 目录 的 名 字 
{// 选 项 
create:true, // 如 果 不 存 在 ， 则 创建 
exclusive:true// 如 果 存 在 ， 则 报错 






























































}, 
callback, // 完 成 后 调用 此 方法 
logerr); // 记 录 错 误 














} 

// 读 取 指 定 目录 的 内 容 ， 并 以 字符 串 数 组 的 形式 将 内 容 传递 给 指定 的 回调 函数 
function 1istFiles(path,callback){// 如 果 指 定 的 内 容 不 存在 ， 则 列 出 根 目录 
// 否 则 ， 根 据 名 字 查 找 目录 并 将 目录 内 容 列 出 来 (或 者 如 果 发 生 错 误 就 记录 错误 ) 
if(!path)getFiles(filesystem.root); 

else filesystem.root.getDirectory(path, {},getrFiles, logerr); 
function getFiles(dir){// 此 方法 在 之 前 也 使 用 过 

var reader=dir.createReader();// 一 个 DirectoryReader 对 象 

var 1ist=[];// 用 来 存储 文件 名 
reader.readEntries(handleEntries,// 将 每 项 都 传递 给 下 面 的 函数 
logerr ) ;// 或 者 记录 错误 

// 读 取 目 录 可 以 分 成 很 多 步 

// 必 须 一 直 调用 readEntries( ) 方 法 直到 获取 到 空 数 组 为 止 

// 完 成 之 后 可 以 将 整个 列表 传递 给 回调 函数 

function handleEntries(entries){ 
if(entries.length==0)callback(1ist);// 完 成 

else{f// 和 否则 ， 将 这 些 项 添加 到 列表 中 ， 并 继续 读 取 

// 此 类 数组 对 象 包含 FileEntry 对 象 

// 这 里 需要 挨个 获取 它们 的 名 字 

for(var i=0;i<entries.length;i++){ 

var name=entries[i] .name;// 获 取 名 字 
if(entries[i].isDirectory)name+="/";// 标 记 目 录 

list ,push(name);// 添 加 到 列表 中 
























































































































































































































































} 
// 获 取 下 一 批 项 
reader ,readEntries(handleEntries, Logerr ); 


} 
} 
} 
} 





在 Worker 线 程 中 操作 文件 和 文件 系统 会 更 加 容易 些 ， 由 于 Worker 线 
程 中 都 是 阻塞 调用 ， 因 此 可 以 使 用 同步 的 API。 例 22-14 定 义 了 与 例 22- 
Bs 不 同 的 是 它 使 用 同步 的 API， 代 码 也 更 加 
精简 。 


例 22-14: 同步 文件 系统 API 




















// 在 Worker 线 程 中 使 用 同步 API 实 现 的 文件 系统 工具 函数 

var filesystem=requestFileSystemSync(PERSISTENT,10*1024*1024); 

function readTextFile(name){// 从 根 DirectoryEntry 中 获取 FileEntry 对 象 ， 再 从 FileEntry 中 
获取 File 

var file=filesystem.root.getFile(name).file();// 使 用 同步 FileReaderAPI 读 取 

return new FileReaderSync().readAsText(file); 

function appendToFile(name,contents){// 从 根 DirectoryEntry 中 获取 FileEntry 对 象 ， 再 从 
FileEntry 中 获取 FileWwriter 

var writer=filesystem.root.getFile(name, {create:true}).createwriter(); 

writer.seek(writer.length);// 从 文件 最 后 开始 

var bb=new BlobBuilder()// 将 文件 内 容 构造 进 Blob 中 

bb.append(contents); 

writer .write(bb.getBlob());// 将 Blob 写 入 文件 中 



























































function deleteFile(name){ 
filesystem.root.getFile(name).remove(); 


} 
function makeDirectory(name){ 
filesystem.root.getDirectory(name, {create:true,exclusive:true}); 


} 

function listFiles(path)t{ 

var dir=filesystem.root,; 
if(path)dir=dir.getDirectory(path); 
var lister=dir.createReader(); 

Var list=[]; 

dof 

var entries=]lister.readEntries(); 
for(var i=0;i<entries.length;i++){ 
var name=entries[i].name; 
if(entries[i].isDirectory)name+="/",; 
list.push(name); 


} 
}while(entries.length>0); 
return list,; 

















} 

// 人 允许 主线 程 通过 发 送 消息 来 使 用 这 些 工 具 函 数 
onmessage=function(e){// 消 息 是 如 下 形式 的 对 象 
//{function:"appendToFile",args:["test","testing, testing"]} 
// 根 据 指定 的 args 调 用 指定 的 函数 
// 再 将 结果 消息 发 送 回去 

var f=self[e.data.function]; 

var result=f.apply(null,e.data.args); 
postMessage(result); 


}; 










































































22.8 客户 端 数 据 库 


传统 的 web 应 用 架构 是 客户 端 包含 HIML、CSS 和 JavaScript， 服 务 
器 端 包含 一 个 数据 库 。 而 通过 强大 的 HIML5 “API 可 以 实现 客户 端 数据 
库 。 这 些 不 是 通过 网 络 访问 服务 器 端 数 据 库 的 客户 端 API， 而 是 真正 存 
ee 
交 访 问 的 。 


20.1 节 介 绍 过 的 Web 存 储 API 可 以 认为 是 一 种 简单 的 数据 库 ， 用 
于 将 简单 的 键 / 值 对 形式 的 数据 持久 化 下 来 。 但 是 ， 除 此 之 外 ， 还 有 两 
个 真正 的 客户 端 数据 库 API。 其 中 一 个 叫 Web SQL 数据 库 ， 它 是 文 持 基 
本 SQL 查询 的 简单 关系 数据 库 。Chrome、Safari 和 Opera 已 经 实现 了 该 
API， 但 是 Firefox 和 IE 还 没有 ， 并 且 看 起 来 也 不 打算 实现 了 。 官 方 标准 
中 关于 此 API 的 工作 已 经 停止 了 ， 此 功能 齐全 的 SQL 数 据 库 或 许 永 远 也 
不 会 成 为 官方 标准 ， 哪 怕 是 作为 Web 平 台 非 官方 的 交互 特性 恐怕 也 不 大 
可 能 。 


目前 官方 标准 已 经 将 注意 力 转移 到 了 男 一 种 数据 库 API， 叫 做 : 
IndexedDB。 介 绍 关 于 此 API 的 详细 细节 还 为 时 过 早 〈 本 书 第 四 部 分 没 

















有 对 其 做 相应 介绍 ) ， 但 是 Firefox 4 和 Chrome 11 已 经 实现 了 此 API， 同 
时 ， 本 节 也 包含 了 一 些 例子 ， 展 示 了 IndexedDB API 中 一 些 最 重要 的 特 
性 。 





IndexedDB 是 一 个 对 象 数据 库 ， 而 不 是 关系 数据 库 ， 它 比 支持 SQL 
查询 的 数据 库 简单 多 了 。 但 是 ， 它 要 比 Web 存 储 API 支 持 的 键 / 值 对 存储 
更 强大 、 更 高 效 、 更 健壮 。 与 Web 存 储 和 文件 系统 API 一 样 ，IndexedDB 
数据 库 的 作用 域 也 是 限制 在 包含 它们 的 文档 源 中 ， 两 个 同 源 的 Web 页 面 
互相 之 间 可 以 访问 对 方 的 数据 ， 但 是 非 同 源 的 页 面 则 不 行 。 


每 个 源 可 以 有 任意 数目 的 IndexedDB 数 据 库 。 但 是 每 个 数据 库 的 名 
字 在 该 源 下 必须 是 唯一 的 。 在 IndexedDB ”API 中 ， 一 个 数据 库 其 实 就 是 
一 个 命名 对 象 存储 区 (object store) 的 集合 。 顾 名 思 义 ， 对 象 存储 区 自 
然 存 储 的 是 对 象 〈 也 可 以 存储 任意 可 以 复制 的 值 参见 22.2 节 的 “结构 
性 复制 ?>) 。 每 个 对 象 都 必须 有 一 个 键 (key) ， 通 过 该 键 实 现在 存储 区 
中 进行 该 对 象 的 存储 和 获取 。 键 必须 是 唯一 的 同一 个 存储 区 中 的 两 
个 对 象 不 能 有 同样 的 键 并 且 它 们 必须 是 按照 自然 顺序 存储 ， 以 便于 
查询 。JavaScript 中 的 字符 串 、 数 字 和 日 期 对 象 都 可 以 作为 该 键 。 当 把 一 
个 对 象 存储 到 IndexedDB 数 据 库 中 时 ，IndexedDB 数 据 库 可 以 为 该 对 象 
自动 生成 一 个 唯一 的 键 。 不 过 ， 通 常情 况 下 ， 存 储 一 个 对 象 的 时 候 ， 该 
对 象 就 已 经 包含 一 个 属性 ， 该 属性 适合 用 做 键 。 这 种 情况 下 ， 在 创建 一 
个 对 象 存 储 的 时 候 ， 可 以 为 该 属性 指定 一 条 “ 键 路 径 >”。 从 概念 上 来 说 ， 
2 

和 键 。 


除了 通过 键 值 从 一 个 对 象 存储 区 中 获取 对 象 以 外 ， 可 能 还 想 要 能 够 
基于 该 对 象 中 的 其 他 属性 值 进行 查询 。 要 实现 该 功能 ， 可 以 通过 在 对 象 
存储 区 上 定义 索引 。 (之 所 以 叫 "IndexedDB" 就 是 因为 可 以 在 对 象 存 储 
区 上 创建 索引 ) 。 每 一 个 索引 就 等 于 是 为 存储 的 对 象 定 义 了 次 键 。 这 些 
索引 通常 都 不 是 唯一 的 ， 多 个 对 象 也 可 能 匹配 一 个 键 值 。 因 此 ， 当 通过 
索引 在 对 象 存 储 区 中 进行 查询 的 时 候 ， 通 常 需 要 使 用 游标 (cursor) ， 
它 定 义 一 个 用 于 一 次 一 个 地 获取 流 查 询 结 果 的 API。 在 当 需 要 在 对 象 存 
储 区 〈 或 者 索引 中 ) 查询 一 定 范围 的 键 的 时 候 还 可 以 使 用 游标 ， 
IndexedDB API 包 含 一 个 用 于 描述 键 值 范围 《上限 和 /或 下 限 ， 开 区 间或 
者 闭 区 间 ) 的 对 象 。 


Indexed DB 提供 原子 性 的 保证 : 对 数据 库 的 查询 和 更 新 都 是 包含 在 
一 个 事务 〈transaction) 中 ， 以 此 来 确保 这 些 操作 要 么 是 一 起 成 功 ， 要 


























么 是 一 起 失败 ， 并 且 永 远 不 会 让 数据 库 出 现 更 新 到 一 半 的 情况 。 
IndexedDB 中 的 事务 要 比 很 多 数据 库 API 中 的 事务 简单 得 多 : 后 面 会 再 


次 介绍 它们 。 


从 概念 上 来 说 ，IndexedDB ”API 非常 简单 。 要 查询 或 者 更 新 数据 
库 ， 首 先 打开 该 数据 库 〈 通 过 指定 名 字 ) 。 然 后 ， 创 建 一 个 事务 对 象 ， 
并 使 用 该 对 象 在 数据 库 中 通过 指定 名 字 人 查询 对 象 存储 区 。 最 后 ， 调 用 对 
象 存储 区 的 get(0) 方 法 来 查询 对 象 或 者 调用 put() 方 法 来 存储 新 的 对 象 。 

《或 者 如 果 要 避免 履 兰 已 存在 对 象 的 情况 ， 可 以 调用 add0 方 法 ) 。 如 果 
想 要 得 询 表示 键 值 范围 的 对 象 ， 通 过 创建 一 个 IDBRange 对 象 ， 并 将 其 
传递 给 对 象 存储 区 的 openCursor0) 方 法 。 或 者 ， 如 果 想 要 使 用 次 键 进行 
查询 的 话 ， 通 过 查询 对 象 存 储 区 中 的 命名 索引 ， 然 后 调用 索引 对 象 上 的 
get() 方 法 或 者 openCursor(0) 方 法 。 


然而 ， 这 种 概念 简易 性 还 是 比较 复杂 的 ，IndexedDB API 必 须要 是 
异步 的 ， 这 样 能 够 实现 让 Web 应 用 使 用 这 些 API 的 同时 又 不 阻 窜 浏 览 占 
的 UI 主线 程 。 (IndexedDB 标 准 定义 了 一 个 给 Worker 线 程 使 用 的 同步 版 
本 的 API， 不 过 ， 截 至 撰写 本 书 时 ， 浏 览 占 都 没有 实现 该 API， 因 此 这 
里 不 做 介绍 。) 创建 事务 以 及 查询 对 象 存储 区 和 索引 是 比较 简单 的 同步 
操作 。 但 是 ， 打 开 数 据 库 、 通 过 put0) 方 法 更 新 对 象 存储 区 、 通 过 get() 方 
法 或 openCursor() 查 询 对 象 存储 区 或 者 索引 ， 这 些 操作 都 是 异步 的 。 这 
些 异步 方法 都 会 立即 返回 一 个 request 对 象 。 当 请 求 成 功 或 者 失败 的 时 
候 ， 浏 览 器 会 在 该 request 对 象 上 出 触发 对 应 的 success 事 件 或 者 error 事 
件 ， 与 此 同时 ， 还 可 以 通过 onsuccess 属 性 和 onerror 属 性 来 定义 事件 处 理 
程序 。 在 onsuccess 处 理 程序 中 ， 可 以 通过 request 对 象 的 result 属 性 来 获取 
操作 的 结果 。 


异步 API 中 一 个 比较 方便 的 特性 就 是 它 简 化 了 事务 管理 。 使 用 
IndexedDB API 的 时 候 ， 通 党 是 先 打 开 数 据 库 。 这 是 一 个 异步 的 操作 ， 
因此 它 会 触发 onsucccess 事 件 处 理 程序 。 在 该 处 理 程 序 中 ， 创 建 一 个 事 
务 对 象 ， 然 后 使 用 该 事务 对 象 来 查询 对 象 存 储 区 或 者 使 用 的 存储 区 。 之 
后 ， 调 用 该 对 象 存储 区 上 的 get0 方 法 和 put0) 方 法 。 所 有 这 些 操作 都 是 异 
步 的 ， 因 此 不 会 立马 有 结果 ， 但 是 ， 通 过 调用 get0 方 法 和 putO 方 法 生成 
的 请 求 会 目 动 和 事务 对 象 关 联 。 如 果 需 要 的 话 ， 可 以 通过 调用 事务 对 象 
的 abort0) 方 法 来 撤销 事务 中 所 有 挂 起 的 操作 〈 也 可 以 撤销 已 经 完成 的 操 
作 ) 。 在 许多 其 他 的 数据 库 API 中 ， 事 务 对 象 都 需要 调用 commit() 方 法 
来 完成 事务 。 然 而 ， 在 IndexedDB 中 ， 在 创建 该 事务 对 象 的 原始 



































onsuccess 事 件 处 理 程 序 退 出 ， 并 且 浏 览 器 返回 到 事件 循环 中 以 及 事务 中 
所 有 挂 起 的 操作 都 完成 之 后 ， 就 会 提交 事务 〈 不 需要 在 它们 的 回调 函数 
中 开始 新 的 操作 ) 。 这 上 听 起 来 得 似 很 复杂 ， 事 实 上 ， 实 践 起 来 非常 容 
易 。 尽 管 ， 在 碍 询 对 象 存储 区 的 时 候 ，IndexedDB API 强制 要 求 创建 事 
务 对 象 ， 但 是 ， 通 常情 况 下 ， 不 必 考 虑 太 多 事务 问题 。 


最 后 ， 还 有 一 种 特殊 的 事务 ， 它 是 IndexedDB API 中 很 重要 的 一 部 
分 。 通 过 IndexedDB ”API 创建 一 个 新 的 数据 库 是 很 容易 的 : 只 需要 选 个 
名 字 然 后 要 求 打 开 访 数据库。 不 过 ， 新 的 数据 库 是 完全 空 的 ， 除 非 将 一 
个 或 多 个 对 象 存 储 区 《索引 也 可 以 ) 添加 到 该 数据 库 中 ， 人 否则 该 数据 库 
只 是 摆设 ， 坚 无 用 处 。 创 建 对 象 存储 区 和 索引 只 能 在 request 对 象 的 
onsuccess 事 件 处 理 程 序 中 完成 ，request 对 象 是 调用 数据 库 对 象 的 
setVersion() 方 法 返回 的 。setVersion() 方 法 用 于 指定 数据 库 的 版 本 号 一 一 
通常 都 是 这 么 用 的 ， 每 次 更 改 数据 库 结 构 的 时 候 就 更 新 该 版 本 号 。 但 
是 ， 更 重要 的 是 ， 调 用 setVersion() 方 法 会 隐 式 地 开始 一 类 特殊 的 事务 ， 
在 该 事务 中 ， 人 允许 调用 数据 库 对 象 的 createObjectStore() 方 法 和 对 象 数 据 
区 的 createIndex() 方 法 。 


对 IndexedDB 有 了 一 定 认 识 ， 现 在 应 该 能 够 看 懂 例 22-15 了。 该 例 使 
用 IndexedDB 来 创建 和 查询 一 个 数据 库 ， 该 数据库 包含 美国 邮政 编码 和 
城市 的 映射 信息 。 它 展示 大 部 分 (但 非 全 部 ) IndexDB 基 础 特性 。 截 至 
撰写 本 书 时 ， 该 例 在 Firefox 4 和 Chrome 11 中 都 工作 正常 ， 但 是 ， 由 于 
IndexedDB 的 标准 也 未 稳定 ， 相 应 的 实现 也 都 是 初步 的 ， 因 此 ， 很 有 可 
能 当 你 阅读 本 书 的 时 候 ， 它 就 已 经 无 法 工作 了 。 人 但是， 不管 怎么 说 ， 该 
例 总 体 的 结构 还 是 很 有 用 的 。 例 22-15 代 码 很 长 ， 为 了 能 够 有 助 于 理 
解 ， 添 加 了 很 多 的 注释 。 


例 22-15: 存储 美国 邮政 编码 的 IndexedDB 数 据 库 


























<IDOCTYPE html> 

<html> 

<head> 

<title>Zipcode Database<=/title> 

<script>//IndexedDB 的 实现 仍然 使 用 API 前 绥 

var indexedDB=window.indexedDB | |// 使 用 标准 的 DB API 

window.mozIndexedDB| |// 或 者 Firefox 早 期 版 本 的 IndexedDB 

window.webkitIndexedDB;// 或 者 chrome 的 早期 版 本 

// 这 两 个 API，Firefox 没 有 前 绥 

var IDBTransaction=window.IDBTransaction| |window.webkitIDBTransaction; 

var IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange;// 使 用 此 函数 ， 以 日 志 的 
形式 记录 发 生 的 数据 库 错 误 


function logerr(e){ 


































































































它们 


console.log("IndexedDB error"+e.code+":"+e.message); 


} 
// 此 函数 异 

















// 然 后 将 其 


function 





var request=indexedDB.open( "zipcodes" ) ;// 获 取 存 储 邮政 编码 的 数据 库 
request .onerror=logerr;// 以 
request .onsuccess=function( ){// 或 者 完成 的 时 候 调 








步 地 获取 数据 库 对 象 ( 需 要 的 时 候 ， 
传递 给 f( ) 函数 
withDB(f)f{ 

























































































于 他 





A 


建 和 初始 化 数据 库 ) ， 





日 志 的 方式 记录 发 生 的 














错误 


此 回调 函数 







































































var db=request.result;//request 对 象 的 result 值 就 表示 该 数据 库 

// 即 便 该 数据 库 不 存在 ， 也 总 能 够 打开 它 

// 通 过 检查 版 本 号 来 确定 数据 库 是 否 已 经 创建 或 者 初始 化 

// 如 果 还 没有 ， 就 做 相应 的 创建 或 者 初始 化 的 工作 

// 如 果 db 已 经 存在 了 ， 那 么 只 需要 将 它 传递 给 回调 函数 f( ) 就 可 以 了 
if(db.version==="1")f(db);// 如 果 db 已 经 初始 化 了 ， 就 直接 将 它 传递 给 f( ) 函数 


else initdb(db,f);// 否 则 ， 先 初始 


} 

















tdb 























调 











// 











} 
// 给 定 一 个 邮政 编码 ， 查 询 该 邮政 编码 属 
将 该 城市 名 异步 传递 给 指定 的 回调 

















函数 





function lookupCity(zip,callback){ 


withDB(function(db){V/ 为 本 次 查询 
var transaction=db.transaction(["zipcodes"],// 所 需 的 对 象 存储 区 











IDBTransaction.READ_ONLY, // 没 有 更 新 














0);// 没 有 超时 





// 从 事务 中 获 


获取 对 象 存储 区 

















遇 于 哪个 城市 ， 





创建 一 个 事务 对 象 


Xx 








var objects=transaction., objectStore("zipcodes");// 查 询 和 指定 的 邮政 编码 的 键 匹 配 的 对 象 


// 上 述 代 码 是 
































同步 的 ， 但 


是 同 





是 这 里 的 是 异步 的 





var request=objects.get(zip); 


request .onerror=logerr;// 以 








日 志 形 式 记 录 发 生 的 错误 





request .onsuccess= function( ) {7/ 将 结果 传递 给 此 函数 
//result 对 象 可 以 通过 request ,result 属性 获取 


var object=request.result,; 

















if(object )// 如 果 查 询 到 了 


callback( obj ect. 


el1se// 否 由 





4， 告诉 回调 函数 ， 














， 就 将 城市 和 





失败 了 


callback("Unknown zip code"); 


} 
}); 
» 


给 定 城 市 





/7 然后 挨个 将 结果 异 示 地 人 递 给 指定 的 回调 
function lookupZipcodes(city, 
withDB(function(db){// 和 上 述 的 ' 


名 ( 





区 分 大 小 写 ) 


， 来 查询 对 


























| 名 传递 给 回调 函数 


city+","+object. state); 





应 的 邮政 编码 
函数 
callback){ 
青 况 一 致 ， 





创建 一 个 事务 并 获取 对 象 存储 区 





var transaction=db.transaction(["zipcodes"],IDBTransaction.READ_ ONLY, 0); 


var store=transaction.objectStore("zipcodes");// 这 次 ， 从 对 象 存储 
var index=store.index("cities");// 此 次 查询 可 能 会 返 区 





// 要 创建 一 











个 游标 ， 需 要 一 个 表示 键 值 范 





























区 中 获取 城市 索引 
很 多 结果 ， 因 此 ， 必 须 使 用 游标 对 象 来 获取 






































恒 的 range 对 象 





var range=new IDBKeyRange.only(city);// 传 递 一 个 单 键 给 on1y( ) 方 法 获取 一 个 range 对 象 





// 上 述 所 有 的 操作 都 是 同步 的 
会 以 异步 的 方式 返回 














// 现 在 ， 请 








求 一 个 游标 ， 





var redquest=index.openCcursor(range);// 获 取 该 游标 
request .onerror=logerr;// 记 录 错 误 







































































request .onsuccess=function( ){// 将 游标 传递 给 此 函数 
// 此 事件 处 理 程序 会 调用 多 次 ， 

// 每 次 有 匹配 查询 的 记录 会 调用 一 次 ， 

// 然 后 当 标识 操作 结束 的 nulL1 游 标 出 现 的 时 候 ， 也 会 调用 一 次 





var cursor=request.re 
if(lcursor)return;// 








sult// 通 过 request. result 获 取 游 标 


[0 果 没有 游标 就 说 明 没有 结果 了 
































var object=cursor .value// 获 取 匹 配 的 数据 项 














callback(object);// 将 其 传递 给 回 





各 | 
日 


已 
I 


cursor .continue( );// 继 续 请 求 下 一 个 匹配 的 数据 项 
}; 
}); 


} 

// 下 面 展 示 的 ，document 中 的 onchange 回 调 函 数 会 用 到 此 方法 
// 此 方法 查询 数据 库 并 展示 查询 到 的 结果 

function displayCity(zip){ 
lookupCity(zip,function(s){document.getElementById('city').value=s;}); 




























































































// 这 是 下 面 的 文档 中 使 用 的 另 一 个 onchange 回 调 函 数 

// 它 查询 数据 库 并 展示 查询 到 的 结果 

function displayZipcodes(city){ 

var output=document ,getEJLementById("zipcodes") ; 
output ,innerHTML="Matching zipcodes:"; 
JookupZipcodes(cityvfunction(o){ 

var div=document.createElement("div"); 

Var text=0.zipcode+":"+0.city+","+0.state,; 
div.appendCchild(document.createTextNode(text)); 
output.appendChild(div); 


}); 
} 


// 建 立 数据 库 的 结构 ， 并 用 相应 的 数据 填充 它 ， 
// 然 后 将 该 数据 库 传递 给 f( ) 函数 

// 如 果 数 据 库 还 未 初始 化 ，withDB( ) 函数 会 调用 出 

// 这 也 是 此 程序 中 最 巧妙 的 部 分 

function initdb(db,)《{// 第 一 次 运行 此 应 用 的 时 候 ， 
// 下 载 邮政 编码 数据 它们 存储 到 数据 库 中 ， 需 要 花 一 些 时 间 

// 因 此 在 下 载 过 程 中 ， 有 必要 给 出 提示 

var StatusJine=document ,createElLement("div") ; 

statusline.style.cssText= 

"position:fixed;left:QOpx;top:Opx;width:100%;"+ 
"color:white;background-color:black;font:bold 18pt sans-serif;"+ 

"padding:10px;"; 

document .body.appendChild(statusline); 

function status(msg){statusline.innerHTML=msg.toString();}; 

status("Initializing zipcode database");// 只 有 在 setVersion 请 求 的 0nsuccess 处 理 程序 中 才 
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定义 或 者 修改 IndexedDB 数 据 库 的 结构 








var request=db.setVersion("1");// 试 着 更 新 数据 库 的 版 本 号 
request .onerror=status; // 失 败 的 话 ， 显示 状态 
request .onsuccess= function(){// 耕 则 ， 调 用 此 函数 
// 这 里 邮政 编码 数据 库 只 包含 一 个 对 象 存储 区 
// 该 存储 区 包含 如 下 形式 的 对 象 : { 
//zipcode:"02134", 

// 发 送 到 Zoom 

//city:"Allston", 

//state:"MA", 
//latitude:"42.355147", 
//longitude:"-71.13164" 


















































mu 















































// 使 用 对 象 的 "zipcode" 属 性 作为 数据 库 的 键 
司 时 ， 使 用 城市 名 来 创建 索引 

// 创 建 一 个 对 象 存储 区 ， 并 为 该 存储 区 指定 一 个 名 字 

// 同 时 也 为 包含 指定 该 存储 区 中 键 字段 属性 名 的 键 路 径 的 一 个 可 选 对 象 指定 名 字 
//〈 如 果 省 g 键 路 径 ， IndexedDB 会 定义 它 自己 的 唯一 的 整 型 键 ) 

var store=db.create0bjectStore("zipcodes",// 存 储 区 名 字 
{keyPath:"zipcode"});// 通 过 城市 名 以 及 邮政 编码 来 索引 对 象 存储 区 
// 使 用 此 方法 ， 表 示 键 路 径 的 字符 串 要 直接 传递 过 去 ， 
// 并 且 是 作为 必需 的 参数 而 不 是 可 选 对 象 的 一 部 分 
store.createIndex("cities", "city");// 现 在 ， 需 要 下 载 邮政 编码 数据 ， 将 它们 解析 成 对 象 ， 
// 并 将 这 些 对 象 存储 到 之 前 创建 的 对 象 存储 区 中 














































































































Xx 








































































































// 
// 包 含 原始 数 j 
// 





时 的 文件 





内 容 格式 如 下 : 


//02130, Jamaica Plain,MA,42.309998, -71.11171 
//02131, Roslindale, MA, 42.284678, -71.13052 
//02132,West Roxbury,MA,42.279432, -71.1598 
//02133, Boston, MA, 42.338947, -70.919635 


//02134, Allston, MA, 42.355147, 


邮政 服务 
比 ， 这 里 使 用 了 统计 出 来 的 过 


// 
// 令 人 吃惊 的 是 ， 美 国 
// 因 
// 这 些 数 ] 
//ht 
// 使 
// 但 在 获取 到 数据 后 


var xhr=new XM 















































居 均 来 自 


















































口 ， 使 
































xhr .open("GET", "zipcodes.csv");// 利 用 HTTP GET 方 法 获取 此 URL 指 定 的 内 容 
xhr .send( );// 直 接 获取 

xhr .onerror=status;// 显 示 错 误 状 态 

var lastchar=0, numlines=0;// 已 经 处 理 的 数量 

// 获 取 数 据 后 ， 批量 处 理 数 ] 居 库 文件 

xhr.onprogress=xhr .onload=function(e){// 一 个 函数 同时 作为 两 个 事件 处 理 
// 在 接收 数据 的 lastchar 和 lastNewline 之 间 处 理 数据 块 (需要 查询 newlines， 
// 因 此 不 需要 处 理 部 分 记录 项 ) 








居然 没有 将 这 些 数 ] 









































期 的 由 














了 政 编码 数 ] 


所 
jr 


-71.13164 





A 








mi ml 














放 


:和 onprogress 事 件 来 处 理 
居所 需 的 XHR 对 象 



































var lastNewline=xhr.responseText.lastIndexof("\n"); 
if(lastNewline>1lastchar)t{ 
var chunk=xhr.responseText.substring(lastChar,1lastNewline) 


lastCchar=lastNewline+1;// 记 录 下 次 从 哪里 
} 割 成 单独 的 行 
ines=chunk.split("\n"); 


nes+=1lines. length;// 为 了 将 邮政 编码 数据 库存 储 到 数据 库 中 ， 





// 将 新 
Var 1 
numli 
// 这 里 需要 事务 对 象 
// 在 该 此 函数 返回 ， 
// 浏 览 器 返回 事件 循环 时 ， 


的 数据 块 分 
























































向 数 ] 





局 























口 























这 提交 所 有 使 











数据 
































// 要 创建 事务 对 
// 并 且 告 诉 该 对 象 存储 区 ， 








| 象 ， 需 要 指定 要 使 





j 的 对 象 存储 









































// 需 要 对 数据 库 进 行 写 操作 





// 为 它们 创建 相应 的 对 象 ， 








而 不 只 是 读 操 作 : 
var transaction=db.transaction(["zipcodes"],// 对 象 存储 
IDBTransaction.READ_WRITE);// 从 事务 
var store=transaction.objectStore("zipcodes");// 现 在 ,循环 邮 政 编 码 文件 
并 将 对 象 添 加 到 对 象 存储 





for(var i=0;i<lines.length;i++){ 
var fields= lines[i]. Split(",");// 以 逗号 
var record={// 要 存储 的 对 象 





zipcode:fields[0],// 所 有 属性 


city:fields[1], 
state:fields[2], 
latitude:fields[3], 
longitude:fields[4] 








bb 


付 串 








x 





区 中 





分 割 


该 对 象 进行 的 所 有 


获取 对 象 存储 区 


的 值 








};//IndexedDB API 最 好 的 部 分 就 








就 是 在 





// 下 中 




















store.put(record);// 或 者 使 

















用 


status("Initializing zipcode database:1loaded" 
+numlines+"records."); 


} 


if(e,type=="1oad" ){// 如 果 这 是 最 后 的 载 入 事件 ， 
// 就 将 所 有 的 邮政 编码 数据 发 送 给 数 ] 














// 但 是 ， 由 于 刚刚 处 理 
// 因 此 这 里 做 个 简单 的 查询 
// 当 此 查询 成 功 时 ， 就 












































能 够 得 知 数据 库 


中 


居 库 




















了 4 万 条 数据 ， 可 能 它 还 厂 





E 处 理 




















已 经 就 结 了 














i 是 对 象 存储 区 * 真 的 * 非 常 简单 
数据 库 中 添加 一 条 记录 的 方式 : 
add( ) 方 法 避免 覆盖 


[x| 








E 插 入 操作 





tp://mappinghacks.com/2008/04/28/civicspace-zip-code-database/ 
jXMLHttpRequest 下 载 这 些 数据 
新 的 XHR2 onload 
LHttpRequest( );// 下 载 数 扩 








FP 的 每 行 数 所 


// 然 后 就 可 以 将 状态 条 移 除 ， 

// 最 后 调用 此 前 传递 给 withDB( ) 函数 的 f( ) 函数 

lookupCity("02134", function(s){// 奥 尔 斯 顿 ,马萨诸塞 州 

document .body.removeChild(statusline); 

withDB(f); 

}); 

} 

} 

} 

</script> 

</head> 

<body> 

<p>Enter a zip code to find its city:<=/p> 

Zipcode:=<=input onchange="displayCity(this.value)"~></input> 

City:<output id="city"></output> 

</div> 

<div> 

<p>Enter a city name(case sensitive,without state)to find cities and their 
zipcodes:<=/p> 

City:=<=input onchange="displayZipcodes(this.value)"></input> 

<div id="zipcodes">></div> 

</div> 

<p><=<i>This example is only known to work in Firefox 4 and Chrome 11.<=<=/i>></p 


















































ee 
<p><i>Your first query may take a very long time to complete.<=/i></p> 
<p><i>You may need to start Chrome with--unlimited-quota-for-indexeddb<=/i> 
</p> 
</body> 
</html> 





22.9 Web 套 接 字 


第 18 章 介绍 过 客户 端 JavaScript 代 码 如 何 通过 网 络 进行 通信 。 该 章 中 
的 例子 都 使 用 HTTP 协 议 ， 这 也 意味 着 它们 受 限于 HTTP 协 议 的 特性 ， 它 
是 一 种 无 状态 的 协议 ， 由 客户 端 请 求 和 服务 端 啊 应 组 成 。HTTP 实 际 上 
是 相对 比较 特殊 的 网 络 协议 。 大 多 数 基于 因特网 (或 者 局 域 网 ) 的 网 络 
连接 通常 都 包含 长 连接 和 基于 TCP 套 接 字 的 双 同 消息 交换 。 让 不 信任 的 
客户 端 脚本 访问 底层 的 TCP 套 接 字 是 不 安全 的 ， 但 是 WebSocket API 定 
义 了 一 种 安全 方案 : 它 允 许 客户 端 代码 在 客户 端 和 支持 WebSocket 协 议 
0 这 让 某 些 网 络 操作 会 变 得 更 
[简单 。 











WebSocket 协 议 


要 通过 JavaScript 使 用 WebSocket， 只 须 了 解 这 里 要 介绍 的 
WebSocket API。 其 中 并 没有 用 于 书写 一 个 WebSocket 服 务 器 的 服务 端 
API， 但 是 本 节 会 有 一 个 简单 服务 器 例子 ， 该 例子 使 用 Node 〈 见 12.2 








节 ) 和 第 三 方 WebSocket 服 务 器 库 来 实现 。 客 户 端 和 服务 器 端的 通信 是 
通过 TCP 套 接 字 长 连接 实现 的 ， 其 Me Le 议定 义 的 规则 。 关 
于 WebSocket 协 议 的 细节 这 里 不 做 详细 介绍 ， 但 是 ， 值 得 注意 的 是 ， 
WebScoket 是 经 过 精 ， 心 设计 的 协议 ， 器 能 够 很 容易 地 同 
时 处 理 同一 端口 上 的 HTTP 连 接 和 WebSocket 连 接 。 


很 多 浏览 器 提供 商都 实现 了 WebSocket。 但 是 ， 由 于 发 现 早 期 草案 
版 本 的 WebSocket 协 议 有 重要 的 安全 漏洞 ， 因 此 ， 一 直到 撰写 本 书 时 ， 
有 些 浏 览 器 在 安全 版 本 的 协议 未 标准 化 之 前 ， 都 将 它们 支持 的 
WebSocket 功 有 上 关闭 了 。 比 如 ， 在 Firefox 4 中 ， 要 启用 WebSocket 功 能 ， 

需要 访问 about:config 页 面 ， 然 后 将 配置 变量 "network.websocket.override- 
security-block" 设 置 为 true。 














WebSocket API 的 使 用 非 党 简单。 首先， 通过 WebSocket(0 构 造 函 数 
创建 一 个 套 接 字 : 





var Socket=new WebSocket("ws://ws.example.com:1234/resource"); 





WebSocket() 构 造 函 数 的 参数 是 一 个 URL， 该 URL 使 用 ws:// 协 议 
(或 者 类 似 于 https:// 用 于 安全 链接 的 wss:// 协 议 ) 。 该 URL 指 定 要 连接 的 
主机 ， 还 有 可 能 指定 端口 CWebSocket 使 用 和 HITP 以 及 HTTPS 一 样 的 默 
认 端 口 ) 和 路 径 或 者 资源 。 


创建 了 套 接 字 之 后 ， 通 利 需 要 在 上 面 注册 一 个 事件 处 理 程序 : 





Pr 


socket .onopen=function(e){/* 套 接 字 已 经 连接 */}; 
socket .onclose=function(e){/* 套 接 字 已 经 关闭 .*/}; 
socket .onerror=function(e){/* 出 错 了 */}; 
socket .onmessage=function(e){ 

var message=e.data;/* 服 务 器 发 送 一 条 消息 */ 

}; 














为 了 通过 和 套 接 字 发 送 数 据 给 服务 器 ， 可 以 调用 套 接 字 的 send() 方 
法 : 





socket.send("Hello, server!"); 








当前 版 本 的 WebSocket API 仅 支持 文本 消息 ， 并 且 必 须 以 UTF-8 编 码 


形式 的 字符 串 传 递 给 该 消息 。 然 而 ， 当 前 WebSocket 协 议 还 包含 对 二 进 
制 消息 的 支持 ， 未 来 版 本 的 API 可 能 会 允许 在 客户 端 和 WebSocket 服 务 
铝 端 进行 二 进 制 数据 的 交换 。 


当 完 成 和 服务 器 的 通信 之 后 ， 可 以 通过 调用 close() 方 法 来 关闭 
WebSocket。 


WebSocket 完 全 是 双 问 的 ， 并 且 一 旦 建立 了 WebSocket 连 接 ， 客 户 
端 和 服务 器 端 都 可 以 在 任何 时 候 互 相传 送 消息 ， 与 此 同时 ， 这 种 通信 机 
制 采 用 的 不 是 请 求 和 啊 应 的 形式 。 每 个 基于 WebSocket 的 服务 都 要 定义 
自己 的 “ 子 协议 ”， 用 于 在 客户 端 和 服务 器 端 传输 数据 。 慢 慢 的 ， 这 
些 “ 子 协议 ”也 可 能 发 生 演 变 ， 可 能 最 终 要 求 客 户 端 和 服务 器 端 需要 文 持 
多 个 版 本 的 子 协议 。 垃 运 的 是 ，WebSocket 协 议 包 含 一 种 协商 机 制 ， 用 
于 选择 客户 端 和 服务 器 端 都 能 “理解 "的 子 协议 。 可 以 传递 一 个 字符 串 数 
组 给 WebSocket(O 构 造 函 数 。 服 务 右 端 会 将 该 数组 作为 客户 端 能 够 理解 
的 子 协议 列表 。 然 后 ， 它 会 选择 其 中 一 个 使 用 ， 并 将 它 传 递 给 客户 端 。 
一 旦 连接 建立 之 后 ， 客 户 并 束 能 够 通过 套 接 字 的 protocol 属 性 检测 当前 
在 使 用 的 是 哪 种 子 协议 。 


18.3” 节 介绍 了 EventSource API， 并 通过 一 个 在 线 聊天 的 客户 端 和 
服务 器 展示 了 这 些 API 如 何 使 用 。 有 了 WebSocket， 写 这 类 应 用 就 变 得 
更 加 容易 了 。 例 22-16 就 是 一 个 简单 的 聊天 客户 端 : 它 和 例 18-5 很 像 ， 不 
同 的 是 它 采 用 了 WebSocket 来 实现 双 同 通信 ， 而 没有 使 用 EventSource 来 
获取 消息 以 及 XMLHttpRequest 来 发 送 消息 。 


例 22-16: 基于 WebSocket 的 聊天 客户 端 

















<script> 
window.onload=function(){// 关 心 一 些 UI 细 节 
var nick=prompt("Enter your nickname");// 获 取 用 户 昵称 
var input=document.getElementById("input");// 查 找 ijnput 字 上 段 
input.focus();// 设 置 光标 
// 打 开 一 个 WebSocket， 用 于 发 送 和 接收 聊天 消息 
// 假 设 下 载 的 HTTP 服 务 器 作为 WebSocket 服 务 器 运作 ， 并 且 使 用 同样 的 主机 名 和 端口 
// 只 是 协议 由 htttp:// 变 成 ws:// 
var socket=new WebSocket("ws://"+location.host+"/");// 下 面 展 示 了 如 何 通 过 WebSocket 从 
服务 器 获取 消息 
socket .onmessage=function(event ){// 当 收 到 一 条 新 消息 
var msg=event.data;// 从 事件 对 象 中 获取 消息 内 容 
var node=document .createTextNode(msg);// 将 它 标 记 为 一 个 文本 节点 
var div=document.createElement("div");// 创 建 一 个 <div> 
div.appendCchild(node);// 将 文本 节点 添加 到 该 div 中 
document .body.insertBefore(div,input);// 在 input 前 添加 该 div 
input.scrollIntoView( ) ;// 确 保 输入 框 可 见 






































































































































































































































} 

// 下 面 展 示 了 如 何 通 过 WebSocket 发 送 消息 给 服务 器 端 
input .onchange=function( ){// 当 用 户 敲 击 回 车 键 

var msg=nick+":"+input.value;// 用 户 昵称 加 上 用 户 的 输入 
socket .send(msg) ;// 通 过 套 接 字 传递 该 内 容 

input .value="";// 等 待 更 多 内 容 的 输入 

} 

}; 

</script> 

二 !-- 聊 天 窗口 UI 很 简单 ， 一 个 宽 的 文本 输入 域 - - > 

去 !-- 新 的 划 天 消息 会 插入 在 该 元 素 中 - -> 

<input id="input"style="width:100%"/> 















































































































































例 22-17 是 一 个 基于 WebSocket 的 聊天 服务 器 ， 运 行 在 Node 中 ( 见 
12.2 节 ) 。 通 过 将 该 例 和 例 18-17 作 比较 ， 可 以 发 现 ， nn 
应 用 的 服务 端 简化 成 和 客户 端 一 样 。 


例 22-17: 使 用 WebSocket 和 Node 的 聊天 服务 器 





/* 

* 这 是 运行 在 NodeJS 上 的 服务 器 端 JavaScript 

* 在 HTTP 服 务 器 之 上 ， 它 运行 一 个 WebSocket 服 务 器 ， 该 服务 器 使 用 来 自 
*https://github.com/miksago/node-websocket-server/ 的 第 三 方 WebSocket 库 实现 
* 如 果 得 到 "A" 的 一 个 HTTP 请 求 ， 则 返回 聊天 客户 端的 HTML 文 件 
* 除 此 之 外 任何 HTTP 请 求 都 返回 404 
* 通 过 WebSocket 协 议 接收 到 的 消息 都 仅 广播 给 所 有 激活 状态 的 连接 
2 
var http=require('http');// 使 用 Node 的 HTTP 服 务 器 API 

var ws=require('websocket-server');// 使 用 第 三 方 WebSocket 库 
// 启 动 阶段 ， 读 取 聊 天 客户 端的 资源 文件 
var clientui=require('fs'). readFileSync("wschatclient .html");// 创 建 一 个 HTTP 服 务 器 
var httpserver=new http.Server();// 当 HTTP 服 务 器 获得 一 个 新 请 求 时 ， 运 行 此 函数 
httpserver.on("request",function(request,response){// 如 果 请 求 "/"， 则 返回 客户 端 聊 天 UI 
if(request .url==="/"){// 请 求 聊天 UI 

response.writeHead(200, {"Content-Type":"text/htm1l"}); 

response.write(clientui); 

response.end( ); 



































































































































} 

else{// 对 任何 其 他 的 请 求 返 回 404" 无 法 找到 "编码 
response .writeHead(404); 

response.end( ); 











} 

});// 在 HTTP 服 务 器 上 包装 一 个 WebSocket 服 务 器 

var wsserver=ws.createServer({server:httpserver});// 当 接收 到 一 个 新 的 连接 请 求 的 时 候 ， 调 
用 此 函数 

WwWSSserver .on("connection" ,function(Socket ){ 

socket ,send("WelLcome to the chat room.");// 向 新 客户 端 打招呼 

socket .on("message" ,function(msg ){// 监 听 来 自 客户 端的 消息 

wsserver .broadcast (msg);// 并 将 它们 广播 给 每 个 人 

}); 

});// 在 8000 端 口 运行 服务 器 。 尼 动 WebSocket 服 务 器 的 时 候 也 会 启动 HTTP 服 务 器 

// 连 接 到 http://localhost :8000/， 并 开始 使 用 它 

wsserver.listen(8000); 























































































































二 一 


岂 指 的 是 独立 线程 运行 的 代码 。 

[2 表示 - 直 等 下 去 。 

[3] 下 面 统一 称 为 容器 。 

[41Web Workers 起 初 是 作为 HIML5 标 准 的 一 部 分 ， 但 是 后 来 独立 成 一 份 
相近 的 标准 。 截 至 撰写 本 书 时 ， 这 份 标准 的 草案 可 以 通过 
http://dev.w3.org/html5/workers/ 和 http://whatwg.org/ww 进 行 访问 。 

[5] 如 果 指 定 过 大 就 是 一 种 浪费 。 

[6] 截 至 撰写 本 书 时 ，Chrome 不 要 求 权 限 ， 但 是 它 要 求 司 动 的 时 候 ， 在 


命令 行 中 带 上 --unlimited-quota-for-files 标 志 。 














第 三 部 分 JavaScript 核 心 参考 


本 书 的 这 部 分 是 参考 文档 ， 包 括 JavaScript 语 言 核 心 定义 的 类 、 方 法 
和 属性 。 该 文档 根据 类 或 者 对 象 的 名 字 ， 按 照 字 母 来 排序 : 








Arguments EvalError Number String 
Array Function Object SyntaxError 
Boolean Global RangeError TypeError 
Date JSON ReferenceError URIErYror 
Error Math RegExp 


类 的 方法 和 属性 都 有 参考 页 面 ， 按照 其 全 名 的 字母 顺序 来 排列 ， 全 
名 包含 定义 该 方法 和 属性 的 类 名 。 例 如 ， 如 果 想 阅读 String 类 的 replace() 
方法 ， 需 要 查找 String.replace()， 而 不 只 是 replace。 


JavaScript 核 心 定 义 了 一 些 全 局 函数 和 属性 ， 比 如 eval0 和 NaN。 从 
技术 上 讲 ， 这 些 是 全 局 对 象 的 属性 。 但 由 于 全 局 对 象 没有 名 字 ， 因 此 直 
接 将 这 些 属性 以 其 非 限定 名 列举 在 参考 文档 中 。 为 了 查阅 方便 ， 在 名 
为 "Global" 的 特殊 参考 页 面 ， 总 结 了 JavaScript 核 心中 的 所 有 全 局 函数 和 
属性 《虽然 并 没有 名 为 "Global" 的 对 象 或 类 ) 。 











JavaScript 核 心 参考 
arguments| 

函数 参数 数组 

概要 

arguments 

描述 

arguments[] 数 组 只 定义 在 函数 体 中 。 在 函数 体 中 ，arguments 指 代 该 
函数 的 Arguments 对 象 。 该 对 象 拥 有 数值 属性 ， 可 当做 数组 来 用 ， 含 有 
传 入 到 该 函数 的 所 有 参数 。arguments 标 识 符 本 质 上 是 一 个 局 部 变量 ， 在 
每 个 函数 中 会 自动 声明 并 初始 化 该 变量 。arguments 仅 在 函数 体 中 时 才 指 
代 Arguments 对 象 ， 在 全 局 代码 中 为 undefined。 


参阅 





Arguments; 第 8 章 
Arguments 
函数 的 参数 和 其 他 属性 
Object 一 Arguments 
概要 
arguments 
arguments[nl] 
元 素 
Arguments 对 象 只 定义 在 函数 体 中 。 从 技术 上 讲 ，Arguments 对 象 不 


是 数组 ， 但 它 拥 有 数值 属性 和 length 属 性 ， 数 值 属性 可 当做 是 数组 元 
素 ，lengh 属 性 则 表示 数组 元 系 的 个 数 。 这 些 数组 元 素 是 传递 给 该 方法 
的 参数 值 。 元 系 0 是 第 一 个 参数 ， 元 素 1 是 第 二 个 参数 ， 以 此 类 推 。 所 有 
作为 参数 传 入 的 值 都 会 成 为 Arguments 对 象 的 数组 元 素 ， 即 便 在 函数 声 
明 中 没有 指定 参数 名 。 


属性 





callee 


指 代 当 前 正在 执行 的 函数 。 


length 
传递 给 函数 的 参数 个 数 ， 以 及 Arguments 对 象 中 数组 元 素 的 个 数 。 
描述 


调用 函数 时 ， 会 为 其 创建 一 个 Arguments 对 象 ， 并 自动 初始 化 局 部 
变量 arguments， 指 代 该 Arguments 对 象 。Arguments 对 象 的 主要 用 途 是 ， 
用 来 判断 有 多 少 个 参数 传 入 函数 ， 还 可 用 来 指 代 未 命名 的 参数 。 然 而 ， 
除了 数组 元 素 和 length 属 性 ， 还 可 通过 callee 属 性 来 指 代 匿 名 函数 自 吴 。 


大 部 分 情况 下 ， 可 以 将 Arguments 对 象 想 象 成 一 个 数组 ， 并 额外 带 
有 callee 属 性 。 但 是 ，Arguments 对 象 并 不 是 Array 的 实例 ， 
Arguments.length 属 性 也 不 具有 Array.length 属 性 的 任何 特殊 行为 ， 而 且 
不 能 用 来 改变 数组 的 大 小 。 


在 非 严格 模式 下 ，Arguments 对 象 具 有 一 个 很 不 寻 负 的 特性 。 当 函 
数 带 有 命名 的 参数 时 ，Arguments 对 象 的 数组 元 素 与 局 部 变量 是 等 同 
的 。Arguments 对 象 和 参数 名 为 引用 同一 个 值 提供 了 两 种 途径 。 用 参数 
名 改变 一 个 函数 参数 的 值 ， 会 同时 影响 通过 Arguments 对 象 获取 的 值 ， 
0 也 会 影响 通过 参数 


参阅 














Function: 第 8 章 


Arguments.callee 
在 严格 模式 下 未 定义 
当前 正在 执行 的 函数 
概要 
arguments.callee 
描述 


arguments.callee 指 代 当 前 正在 执行 的 函数 。 通 过 它 可 以 引用 匿名 函 
数 自身 。 该 属性 只 定义 在 函数 体 中 。 


示例 




















// 在 匿名 函数 内 使 用 callee 属 性 来 引用 匿名 函数 自身 ， 
// 以 便 实现 递归 

var factorial=function(x)t 
if(x=2)return 1; 

else return x*arguments.callee(x-1); 






































var y=factorial(5);// 返 回 120 





Arguments.length 
传 给 函数 的 参数 个 数 
概要 
arguments.length 
描述 


Arguments 对 象 的 length 属 性 表示 传 给 当前 函数 的 参数 个 数 。 该 属性 
只 定义 在 函数 体 中 。 


注意 该 属性 表示 的 是 实际 传 入 的 参数 个 数 ， 而 不 是 声明 的 参数 个 
数 。 声 明 的 参数 个 数 请 参阅 Function.length。 同 时 要 留 意 该 属性 没有 任 








何 Array.length 属 性 的 特殊 行为 。 


示例 




















// 使 用 Arguments 对 象 来 检查 传 入 参数 个 数 的 正确 性 
function check(args)t{ 

var actual=args.length;// 实 际 的 参数 个 数 
var expected=args.callee.1length;// 期 待 的 参数 个 数 
if(actual!=expected){// 如 果 不 相等 ， 则 抛 出 异常 

throw new Error(" 参 数 个 数 有 误 : 期 望 值 : "+expected+" ;实际 值 : "+actual); 


} 


} 

// 演 示 如 何 使 用 check( ) 方 法 的 示例 函数 
function f(x,y,z){ 

check(arguments ) ; // 检 查 参 数 个 数 的 正确 性 
return x+y+z;// 正 常 执行 该 函数 的 剩余 代码 
} 



















































































参阅 

Array.length、 Function.length 
Array 

对 数组 的 内 置 支持 

Object 一 Array 


构造 函数 





new Array() 
new Array(size) 
new Array(element0,element1,...,elementn) 





size 
设 定 的 数组 元 素 个 数 。 返 回 数 组 的 length 属 性 等 于 size。 


element0,...elementn 





参数 列表 ， 可 以 是 两 个 或 多 个 任意 值 淖 。 当 Array() 构 造 函数 用 这 些 
参数 调用 时 ， 新 创建 的 数组 实例 会 用 指定 的 参数 值 来 初始 化 ， 并 将 
length 属 性 设置 为 参数 个 数 。 


返回 值 

新 创建 和 初始 化 的 数组 。 当 不 市 参数 调用 Array0 时 ， 返 回 的 数组 为 
空 ，length 属 性 为 0。 当 用 单个 数值 参数 调用 时 ， 构 造 函 数 返回 的 数组 布 
有 指定 个 数 的 未 定义 元 素 。 使 用 其 他 参数 调用 时 ， 构 造 函 数 会 使 用 指定 
的 参数 值 初始 化 数组 。 当 Array0 构 造 阔 数 不 带 new 操 作 符 ， 和 直接 当做 函 
数 调 用 时 ， 其 表现 行为 与 带 有 new 操 作 符 调用 时 是 完全 一 样 的 。 

异 贡 

RangeError 


当 给 Amray0 构 造 函 数 传 入 单个 整数 参数 size 时 ， 如 果 size 为 负数 ， 或 
大 于 232-1 时 ， 会 抛 出 RangeError 异 常 。 
直接 量 语法 


ECMAScript 3 规定 了 数组 的 直接 量 语法 。 可 以 将 去 号 分 隔 的 表达 式 
列表 放 在 方 括号 中 来 创建 和 初始 化 一 个 数组 。 这 些 表 达 式 的 值 会 成 为 数 
组 的 元 素 。 例 如 : 








var a=[1,true,'abc']; 
var b=[a[0],a[0]*2,f(x)]; 


属性 

length 

一 个 可 读 / 写 的 整数 ， 用 来 指明 数组 中 的 元 素 个 数 。 当 数组 中 的 元 
素 不 连续 时 ，lengh 等 于 数组 中 最 后 一 个 元 素 的 序号 加 一 。 改 变 length 值 
会 裁减 或 扩充 数组 。 

方法 


ECMAScript 5 中 新 增加 了 以 下 方法 : every()、filter()、forEach()、 
indexOf()、lastIndexOf()、map()、reduce()、reduceRight() 和 some()。 在 
ES5 标 准 化 之 前 ， 除 了 正 ， 其 他 浏览 器 已 经 实现 了 这 些 方法 。 

concat() 

把 元 素 衔接 到 数组 中 。 

everyO 

测试 断言 函数 是 否 对 每 个 数组 元 素 都 为 真 。 

filter() 

返回 满足 断言 函数 的 数组 元 素 。 

forEach() 

为 数组 的 每 一 个 元 素 调用 指定 函数 。 

indexOf() 

在 数组 中 查找 匹配 元 素 。 





join0 

将 数组 的 所 有 元 素 转化 为 字符 串 ， 并 衔接 起 来 。 
lastIndexOf() 

在 数组 中 反 向 查找 。 

map() 

从 数组 的 元 素 中 ， 计 算出 新 的 数组 元 素 。 

popQ) 

移 除数 组 最 后 一 个 元 素 。 


Push 

把 元 素 添 加 到 数组 尾部 。 

reduce() 

从 数组 的 元 素 中 ， 计 算出 一 个 值 。 
reduceRight() 

从 右 到 左 缩减 数组 。 

reverse() 

在 原 数 组 中 颠倒 数组 元 系 的 顺序 。 
shift() 

移 除数 组 的 第 一 个 元 素 。 

slice() 


返回 数组 的 一 部 分 。 


somel() 
测试 是 否 至 少 有 一 个 数组 元 素 能 让 断言 函数 为 真 。 
sort() 





在 原 数 组 中 对 数组 元 素 进行 排序 。 
splice() 

插入 、 删 除 或 蔡 换 数组 元 素 。 
toLocaleString() 


将 数组 转化 为 本 地 化 字符 串 。 


toString() 

将 数组 转化 为 字符 串 。 

unshift() 

在 数组 头 部 插入 元 素 。 

描述 

数组 是 JavaScript 的 基本 特性 ， 在 第 7 章 里 有 详细 阐述 。 


参阅 





第 7 章 
Array.concat() 
衔接 数组 
概要 
array.concat(value,...) 
参数 
value,... 
任意 个 要 衔接 到 array 中 的 值 。 
返回 值 
一 个 新 数组 ， 包 含 array 的 元 素 ， 以 及 衔接 的 新 元 素 。 
描述 
concat() 会 将 参数 衔接 到 array 中 得 到 一 个 新 数组 并 返回 。 它 不 会 修 


改 array。 如 果 传 给 concat() 的 某 个 参数 本 喘 是 一 个 数组 ， 则 会 将 该 数组 
的 元 素 衔 接 到 array 中 ， 而 不 是 数组 本 里。 


示例 





var a=[1,2,3]; 
a.concat(4,5)// 返 回 [1,2,3,4,5] 
a.concat([4,5]);// 返 回 [1,2,3,4,5] 
a.concat([4,5],[6,7])// 返 回 [1,2,3,4,5,6 
a.concat(4,[5,[6,7]])// 返 回 [1,2,3,4,5,[ 



































参阅 


Array.join()、Array.push()、Array.splicel() 








Array.every() 
ECMAScript 5 
测试 断言 函数 是 否 对 每 个 元 素 为 真 。 
概要 


array.every(predicate) 
array.every(predicate,o) 

参数 

predicate 

用 来 测试 数组 元 系 的 断言 函数 。 
0 

调用 predicate 时 的 可 选 this 值 。 
返回 值 


如 果 对 array 的 每 一 个 元 素 调 用 predicate 时 都 返回 真 值 ， 则 返回 
true。 如 果 有 任何 一 个 元 素 调用 predicate 时 返回 假 值 ， 则 返回 false。 


描述 


os 都 满足 某 些 条 件 。 它 会 按 
照 序号 从 小 到 大 的 顺序 过 历 array 的 元 素 ， 并 对 每 个 元 素 调 用 指定 的 
predicate 函 数 。 如 果 predicate 返 回 false (或 任何 可 以 转化 为 false 的 值 〉， 
a te 并 立刻 返回 false。 如 果 predicate 的 每 一 i 
返回 true， 则 every0O 返 回 true。 当 遍历 的 数组 为 空 时 ，every0 返 回 true。 


对 数组 的 每 一 个 序号 i， 调 用 predicate 时 市 有 三 个 参数 : 





predicate(array[i],i,array) 





predicate 的 返回 值 会 当做 布尔 值 解析 。true 和 所 有 真 值 表示 该 数组 
元 素 通 过 了 测试 或 者 说 满足 该 函数 所 摘 述 述 的 条 件 。 如 果 返 回 值 为 false 或 
假 值 ， 则 表示 数组 元 素 没 有 通过 测试 。 

更 多 细节 请 参考 Array.forEach()。 


示例 








[1,2,3].every(function(x){freturn x<5;})VX=>true: 所 有 元 素 都 二 5 
[1,2,3] .every(function(x){freturn x<=3;})//=>false: 不 是 所 有 元 素 都 <3 
[] .every(function(x){return false;});//=true:[] 总 是 返回 true 








参阅 


Array.filter()、Array.forEach()、Array.some() 


Array .filter() 
ECMAScript 5 
返回 通过 上 断言 的 数组 元 素 
概要 


array.map(predicate) 


array.map(predicate,o) 


参数 
predicate 


用 来 判断 array 中 的 元 素 是 售 需 要 包含 在 返回 数组 中 的 调用 函数 。 








0 
调用 predicate 时 的 可 选 this 值 。 

返回 值 

一 个 新 数组 ， 只 包含 那些 让 predicate 返 回 真 值 的 数组 元 素 。 
描述 


filter() 会 创建 一 个 新 数组 ， 包 含 那些 让 predicate 函 数 返 回 真 值 的 
array 的 元 素 。filter() 方 法 不 会 修改 array 本 里 (注意 predicate 疯 数 有 可 能 
会 修改 ) 。 


filter() 按 照 序号 从 小 到 大 遍历 array， 对 每 个 元 素 仅 调用 一 次 
predicate. 对 于 序号 i， 调 用 predicate 时 带 有 三 个 参数 : 








predicate(array[il],i,array) 








如 果 predicate 返 回 真 值 ， 则 array 中 序号 为 ij 的 元 素 会 退 加 到 新 创建 的 
数组 中 。 一 旦 filter(0) 测 试 完 array 中 的 每 一 个 元 素 ， 它 就 会 返回 新 创建 的 
数组 。 

更 多 细节 请 参考 Array.forEach()。 


示例 





[1,2,3].filter(function(x){return X>1;}); /LA=>[2，3] 





参阅 


Array.every()、 Array.forEach()、Array.indexOf()、Array.map()、 


Array.reduce() 


Array.forEach() 
ECMAScript 5 
为 每 一 个 数组 元 素 调用 一 个 函数 
概要 
array.forEach(f) 
array.forEach(f,0) 
参数 
f 
为 array 的 每 一 个 元 系 调 用 的 函数 。 
0 
调用 f 时 的 可 选 this 值 。 
返回 值 
该 方法 无 返回 值 。 
描述 


forEach0 按 照 序号 从 小 到 大 遍历 array， 并 对 每 一 个 元 素 调用 一 次 
f。 对 于 序号 i， 调 用 f 时 带 有 三 个 参数 : 





f(array[i],i,array) 





f 的 任何 返回 值 都 会 忽略 。 注 意 forEach() 没 有 返回 值 。 特 别 注意 ， 它 
不 会 返回 array。 


数组 方法 的 细 市 


下 述 细 市 适用 于 forEach() 方 法 ， 也 适用 于 相关 方法 : map()、 
filter()、everyO 和 some()。 


所 有 这 些 方法 都 接受 函数 作为 第 一 个 参数 ， 并 接受 可 选 的 第 二 个 参 
数 。 如 果 指 定 了 第 二 个 参数 o， 则 调用 函数 时 ， 就 好 像 该 函数 是 o 的 方法 
一 样 。 也 就 是 说 ， 在 函数 体内 ，this 值 等 于 o。 如 果 没 有 指定 第 二 个 参 
数 ， 则 就 像 函 数 一 样 调用 该 函数 〈 而 不 像 方法 ) ，this 值 在 非 严 格 模式 
下 是 全 局 对 象 ， 在 严格 模式 下 则 为 null。 

所 有 这 些 方法 都 会 在 开始 过 历时 就 记录 array 的 长 度 。 如 果 调 用 函数 
Wd Oi 这 些 新 添加 的 元 素 不 会 过 历 到 。 如 果 调 用 的 函 
数 修改 了 未 裔 历 到 的 已 存在 元 素 ， 则 调用 时 会 传递 修改 后 的 值 。 


当 作用 于 黎 琉 数组 时 ， 这 些 方法 不 会 在 实际 上 不 存在 元 际 的 序号 上 
调用 函数 。 


示例 





var a=[1,2,3 
a. For eben dn i,a)f{a[i]++;});//a 现 在 是 [2, 3,4] 





参阅 


Array.every()、Array.filter()、Array.indexOf()、Array.map(、 
Array.reducel() 


Array.indexOf() 
ECMAScript 5 
查找 数组 
概要 


array.indexOf(value) 


array.indexOf(value,start) 
参数 

value 

要 在 array 中 但 找 的 值 。 

start 

开始 碍 找 的 可 选 数组 序号 。 如 果 和 省略， 则 为 0。 
返回 值 


一 个 大 于 等 于 start 的 最 小 序号 值 ， 该 序号 值 处 的 array 元 素 与 value 全 
等 。 如 果 不 存在 匹配 元 素 时 ， 则 返回 -1。 


描述 


该 方法 在 array 中 查找 等 于 value 的 元 素 ， 并 返回 找到 的 第 一 个 元 素 
的 序号 。 碍 找 的 起 始 位 置 是 start 指 定 的 数组 序号 ， 如 果 没 有 指定 ， 则 从 
0 开始 ， 然 后 一 个 接 一 个 地 查找 ， 直 到 找到 匹配 的 元 素 或 检查 完 所 有 元 
素 为 止 。 判 断 是 否 相 等 使 用 的 是 “===” 操 作 符 。 返 回 值 是 找到 的 第 一 个 
匹配 元 素 的 序号 ， 如 果 没 找到 匹配 的 ， 则 返回 -1。 


示例 











['a','b','c'].indexof('b')//=>1 
['a','b','c'].indexof('d')//=>-1 
['a','b','c'].indexof('a',1)//=>-1 


参阅 

Array.lastIndexOf()、String.indexOf() 
Array.join() 

将 数组 元 系 衔 接 为 字符 串 





概要 

array.join() 
array.join(separator) 
参数 

separator 


在 返回 的 字符 串 中 ， 用 来 分 隔 数组 的 某 个 元 素 与 下 一 个 元 素 的 可 选 
字符 或 字符 串 。 如 有 果 省 略 ， 黑 认 是 英文 逗号 〈,) 。 


返回 值 


一 个 字符 串 。 将 armray 的 每 一 个 元 素 转化 为 字符 串 ， 然 后 用 separator 
字符 串 分 隔 开 ， 最 后 衔接 为 返回 的 字符 串 。 


描述 


join0 将 数组 的 每 一 个 元 素 转换 为 字符 串 ， 并 通过 在 中 间 插 入 指定 
的 separator 字 符 串 将 它们 衔接 起 来 ， 最 后 返回 衔接 好 的 字符 串 。 


可 以 进行 相反 的 操作 一 一 将 字符 串 分 割 成 数组 元 素 一 一 使 用 String 
对 象 的 split0 方 法 即 可 。 细 节 请 参考 String.split()。 














示例 





a=new Array(1,2,3， "testing") ， 
日 2 Ar dd 


s=a.join("+");//s 古 子 付 早 "1+2+3+testing" 








参阅 
String.split() 
Array.lastIndexOf() 


ECMAScript 5 


反 回 查找 数组 

概要 

array.lastIndexOf(value) 
arrray.lastIndexOf(value,start) 
参数 

value 

要 在 array 中 人 查找 的 值 。 

start 


m 开始 查找 的 可 选 数组 序号 。 如 果 省 略 ， 则 从 最 后 一 个 元 素 开 始 碍 
返回 值 
一 个 小 于 等 于 start 的 最 大 序号 值 ， 该 序号 值 处 的 array 元 素 与 value 全 
等 。 如 果 不 存 在 匹配 元 素 时 ， 则 返回 -1。 
描述 


该 方法 在 array 中 一 个 接 一 个 地 反 辣 查找 等 于 value 的 元 素 ， 并 返回 
找到 的 第 一 个 元 素 的 序号 。 碍 找 的 起 始 位 置 是 start 指 定 的 数组 序号 ， 如 
果 没 有 指定 ， 则 从 最 后 一 个 元 素 开 始 。 判 断 是 否 相 等 使 用 的 是 “===? 操 
返回 值 是 找到 的 第 一 个 匹配 元 素 的 序号 ， 如 果 没 找到 匹配 的 ， 则 
返回 -1。 


参阅 








Array.indexOf()、String.lastIndexOf() 


Array.length 
数组 大 小 


概要 

array.length 

描述 

数组 的 langth 属 性 总 是 比 该 数组 中 定义 的 序号 最 大 的 元 素 的 序号 大 
一 。 一 般 来 说 ， 数 组 都 是 “稠密 ”数组 ， 拥 有 连续 的 元 素 ， 并 且 序 号 从 0 
开始 。 对 于 这 种 数组 ，length 属 性 表示 数组 中 的 元 素 个 数 。 


使 用 Array0 构 造 函 数 创 建 数组 时 ， 会 初始 化 该 数组 的 length 属 性 。 
把 新 元 素 添加 到 数组 中 ， 在 有 必要 时 ， 会 更 新 length 属 性 : 








a=new Array();//a.length 初 始 化 为 0 

b=new Array(10);//b.length 初 始 化 为 10 

c=new Array("one", "two", "three");//c.length 初 始 化 为 3 
c[3]="four";//c.length 更 新 为 4 
c[10]="blastoff";//c.length 变 成 11 








可 以 设置 length 属 性 的 值 来 改变 数组 的 大 小 。 如 果 设 置 的 length 小 于 
原 值 ， 会 裁减 数组 ， 末 尾 处 的 元 际会 于 失 。 如 果 设 置 的 length 大 于 原 
值 ， 数 组 会 变 大 ， 新 添加 到 末尾 处 的 元 素 的 值 为 undefined。 


Array.map() 
ECMAScript 5 
从 数组 元 素 中 计算 新 值 
概要 
array.map(f) 
array.map(f,0) 
参数 


f 


为 array 的 每 一 个 元 素 调用 的 函数 。 它 的 返回 值 会 成 为 返回 数组 的 元 


0 
f 调 用 时 的 可 选 this 值 。 

返回 值 

一 个 新 数组 ， 由 函数 f 计 算出 的 元 素 组 成 。 
描述 


map() 会 创建 一 个 新 数组 ， 数 组 长 度 与 array 一 样 ， 数 组 元 素 通 过 将 
array 的 元 素 传递 给 函数 f 计 算得 到 。map0 按 照 从 小 到 大 的 顺序 遍历 array 
的 序 与 ， 并 为 每 一 个 元 素 调用 f 一 次 。 对 于 序 与 1， 调用 f 时 带 有 三 个 参 
数 ，f 的 返回 值 则 存储 在 新 创建 数组 的 序号 处: 





a[lil]=f(array[i],i,array) 


一 旦 map0) 将 array 中 的 每 一 个 元 素 部 传递 给 f{， 并 将 其 返回 值 存储 在 
新 数组 中 后 ， 就 会 返回 该 新 数组 。 


更 多 细节 请 参考 Array.forEach()。 

示例 

[1,2,3].map(function(x){return x*x;});//=[1,4,9] 
参阅 


Array.every()、 Array.{f ilter()、Array.forEach()、Array.indexOf()、 
Array.reducel() 


Array.pop() 
移 除 并 返回 数组 的 最 后 一 个 元 素 


概要 

array.POP() 

返回 值 

array 的 最 后 一 个 元 素 。 

描述 

popO 会 移 除 array 的 最 后 一 个 元 素 ， 缩 短 数组 的 长 度 ， 并 返回 所 移 
除 元 素 的 值 。 如 果 数 组 已 经 为 空 ，pop(0) 不 会 修改 该 数组 ， 返 回 值 是 


Undefined 。 














示例 


本 popO 与 伴随 的 push(0 方 法 ， 可 以 提供 先进 后 出 〈EILO) 的 栈 功 能 。 
列 如 : 





var stack=[];//stack:[] 
stack.push(1,2);//stack:[1,2] 返回 2 
stack.pop();//stack:[1] 返回 2 
stack.push([4,5]);//stack:[1,[4,5]] 返回 2 
stack.pop();//stack:[1] 返回 [4,5] 

stack.pop();//stack:[] 返回 1 









































参阅 

Array.push() 
Array.push() 

给 数组 退 加 元 素 

概要 


array.push(value,...) 


参数 


value,... 

追加 到 array 尾 部 的 一 个 或 多 个 值 。 

返回 值 

把 指定 值 妃 加 到 数组 后 数组 的 新 长 度 。 

描述 

pushO 会 将 参数 按 顺 序 奶 加 到 array 尾 部 。 它 会 直接 修改 array， 而 不 
会 创新 一 个 新 数组 。push() 与 伴随 的 pop0 方 法 ， 可 以 提供 先进 后 出 

CFILO) 的 栈 功能 。 例 子 请 参考 Array.pop()。 


参阅 





Array.pop() 
Array.reduce() 

ECMAScript 5 

从 数组 元 系 中 计算 出 一 个 值 

概要 





array.reduce(f) 
array.reduce(f,inital) 
参数 

f 


一 个 函数 ， 可 以 合并 两 个 值 〈 比 如 两 个 数组 元 素 ) ， 并 返回 一 
个 “缩减 ”的 新 值 。 


initial 


用 来 缩减 数组 的 可 选 初 始 值 。 如 果 指 定 该 参数 ，reduce0 的 行为 会 
像 是 把 该 参数 插入 array 的 头 部 一 样 。 


返回 值 
数组 的 化 简 值 ， 该 值 是 最 后 一 次 调用 人 峙 的 返回 值 。 
描述 


reduce() 方 法 接受 函数 ff 为 第 一 个 参数 。 该 函数 的 行为 应 该 像 一 个 
二 元 操作 符 一 样 : 接受 两 个 值 ， 执 行 某 些 操作 ， 然 后 返回 结果 。 如 果 
array 有 n 个 元 素 ，reduce() 方 法 会 调用 n-1 次 来 将 这 些 元 素 缩减 为 一 个 合 
并 值 。【〈 你 可 能 已 经 熟悉 了 数组 缩减 操作 ， 在 其 他 编程 语言 中 ， 有 时 称 
为 “ 折 和 三 ?或 “注入 ”。 ) 


第 一 次 调用 人 峙 传 入 的 是 array 的 前 两 个 元 素 。 接 下 来 的 调用 会 传 入 
之 前 的 计算 值 和 array 的 下 一 个 元 素 〈 按 照 从 小 到 大 的 序号 顺序 ) 。 最 后 
一 次 调用 f 的 返回 值 会 成 为 reduce() 方 法 的 返回 值 。 


reduce0 在 调用 时 可 以 传 入 可 选 的 第 二 个 参数 : initial。 如 果 指 定 
initial，reduce0 的 行为 会 像 是 把 该 参数 插入 array 的 头 部 一 样 〈 注 意 ， 实 
际 上 并 没有 修改 array) 。 换 一 种 说 法 是 ， 就 像 reduce() 带 有 两 个 参数 调 
用 ， 而 initial 束 像 是 之 前 {的 返回 值 一 样 。 这 种 情况 下 ， 第 一 次 调用 f 时 传 
入 的 是 initial 和 array 的 第 一 个 元 素 。 当 指定 initial 时 ， 要 缩减 的 元 素 有 
n+1 个 〈array 的 n 个 元 素 ， 加 上 initial 值 ) ， 则 调用 n 次 f。 











如 果 array 为 空 ， 又 没有 指定 initial，reduce0O 会 抛 出 TypeError 异 荫 。 
如 果 array 为 空 ， 但 指定 initial， 则 reduce0O 返 回 initial， 且 永远 不 调用 f。 
如 果 array 只 有 一 个 元 素 ， 且 没有 指定 initial，reduce0 不 调用 f， 会 返回 
array 的 单个 元 素 。 


上 面 的 段落 摘 述 了 f 的 两 个 参数 ， 实 际 上 reduce() 调 用 f 时 传 入 了 4 个 
参数 。 第 三 个 参数 是 第 二 个 参数 的 数组 序号 。 第 4 个 参数 则 是 array 自 
身 。f 永 远 当 做 函数 调用 ， 而 不 是 方法 。 


示例 








[1,2,3,4].reduce(function(x,y){return x*y;})//=>24:((1*2)*3)*4 





参阅 

Array.forEach()、Array.map()、Array.reduceRight() 
Array.reduceRight() 

ECMAScript 5 

从 右 到 左 缩减 数组 

概要 

array.reduceRight(f) 

array.reduceRight(f,initial) 

参数 

f 


一 个 函数 ， 可 以 合并 两 个 值 〈 比 如 两 个 数组 元 素 ) ， 并 返回 一 
个 “缩减 ”的 新 值 。 


initial 


用 来 缩减 数组 的 可 选 初始 值 。 如 果 指 定 该 参数 ，reduceRight() 的 行 
为 会 像 是 把 该 参数 插入 array 的 尾部 一 样 。 


返回 值 

数组 的 缩减 值 ， 该 值 是 最 后 一 次 调用 和 f 嵌 的 返回 值 。 

描述 

reduceRight() 与 reduce() 方 法 一 样 : 调用 {f 函 数 n-1 次 ， 来 将 array 的 n 个 
元 素 缩减 为 单个 值 。reduceRightO) 与 reduceO0 只 有 一 点 不 同 : 过 历数 组 时 


是 从 右 到 左 《〈 从 最 大 的 序号 到 最 小 的 ) ， 而 不 是 从 左 到 右 。 细 市 请 参考 
Array.reduce()。 








示例 





[2,10,60].reduceRight(function(x,y){return x/y;})//=>3:(60/10)/2 





参阅 

Array.reduce() 
Array.reverse() 

颠倒 数组 中 的 元 素 顺 序 

概要 

array.reverse() 

描述 

Array 对 象 的 reverse() 方 法 可 以 颠倒 数组 元 素 的 顺序 。 它 会 在 原 数组 
中 进行 操作 : 重新 调整 array 中 的 元 素 ， 而 不 会 创建 一 个 新 数组 。 如 果 
array 有 多 个 引用 ， 该 数组 元 素 的 新 顺序 在 所 有 引用 中 可 见 。 


示例 








a=new Array(1,2,3);//a[0]==1,a[2]==3; 
a.reverse();// 现 在 a[0]==3,a[2]==1; 








Array.shift() 
移 除 数组 的 第 一 个 元 素 
概要 
array.shift() 
返回 值 


数组 原来 的 第 一 个 元 素 。 

描述 

shiftO 会 移 除 并 返回 array 的 第 一 个 元 素 ， 并 将 所 有 后 续 元 素 前 移 一 
位 ， 以 填补 数组 头 部 的 空缺 。 如 果 数 组 为 空 ，shift0 什 么 也 不 干 ， 直 接 
返回 undefined 值 。 注 意 shift() 没 有 创建 新 数组 ， 它 会 直接 修改 array。 


shift() 与 Array.pop0) 类 似 ， 除 了 操作 的 是 数组 的 头 部 而 不 是 尾部 。 
shift() 经 和 党 与 unshift() 一 起 使 用 。 





示例 





var a=[1, [2,3],4]; 
a.shift();// 返 回 1;a=[[2,3],4] 
a.shift();// 返 回 [2,3]a=[4] 























参阅 
Array.pop()、 Array.unshift() 
Array.slice() 

返回 数组 的 一 部 分 

概要 

array.slice(start,end) 

参数 

start 


数组 片段 开始 处 的 数组 序号 。 如 果 为 负数 ， 则 表示 从 数组 的 尾部 开 
也 就 是 说 ，-1 代 表 最 后 一 个 元 系 ，-2 代 表 倒 数 第 二 个 元 素 ， 以 
此 类 推 。 














end 


数组 片段 结束 处 的 后 一 个 元 素 的 数组 序号 。 如 果 没 有 指定 ， 该 片段 
会 包含 从 start 开 始 到 数组 尾部 的 所 有 数组 元 素 。 如 果 为 负数 ， 则 表示 从 
数组 的 尾部 开始 计算 。 


返回 值 


一 个 新 数组 ， 包 含 array 中 从 start 一 直到 end 之 间 的 所 有 元 素 〈 包 含 
start 指 定 的 元 素 ， 但 不 包含 end 指 定 的 元 素 ) 。 


描述 


slice0 返 回 array 的 片段 ， 或 称 为 了 数组。 返回 的 数组 包含 从 start 一 
直到 end 之 间 的 所 有 元 素 〈 包 含 start 指 定 的 元 素 ， 但 不 包含 end 指 定 的 元 
。 如 果 没 有 指定 end， 返 回 的 数组 包含 从 start 到 array 尾 部 的 所 有 元 


注意 slice() 没 有 修改 数组 。 如 果 想 要 移 除 数组 的 一 部 分 ， 请 使 用 
Array.splice()。 











示例 





var a=[1,2,3,4,5]; 

a.slice(0,3);// 返 回 [1,2,3] 

a.slice(3);// 返 回 [4,5] 

a.Sslice(1, -1);// 返 回 [2,3,4] 

a.slice(-3, -2);// 返 回 [3]; 在 IE4 下 有 误 : 返回 [1,2,3] 



































bug 
在 IE4 中 start 参 数 不 能 为 负数 。 在 契 的 后 续 版 本 中 已 经 修复 该 bug。 
参阅 
Array.splice() 
Array.some() 


ECMAScript 5 








测试 是 否 有 元 系 满足 断言 函数 
概要 

array.some(predicate) 
array.some(predicate,o) 

参数 

predicate 

用 来 测试 数组 元 系 的 断言 函数 。 
0 

调用 predicate 时 的 可 选 this 值 。 
返回 值 


如 果 array 中 有 人 至 少 一 人 1 ee 则 返回 
true。 如 果 所 有 元 素 调 用 predicate 时 都 返回 假 值 ， 则 返回 false。 


描述 


ed 是 否 有 元 素 满足 某 些 条 件 。 它 会 按照 从 
小 到 大 的 顺序 授 历 array 的 元 素 ， 并 依次 对 每 个 元 素 调 用 指定 的 predicate 
函数 。 如 有 果 predicate 返 回 true (或 任何 可 以 转化 为 true 的 值 )， 则 some() 
会 停止 过 历 ， 并 立刻 返回 true。 a 次 调用 都 返回 
false 人 ， 则 someO 返 回 false。 当 遍历 的 数 
组 为 空 时 ，some() 返 回 false。 








该 方法 很 类 似 every()。 更 多 细节 请 参考 Array.every() 和 和 
Array.forEach()。 


示例 





[1,2,3].some(function(x){return x>5)});V//=>false: 没 有 元 素 >5 
[1,2,3].some(function(x){return x>2;});//=>true: 有 些 元 素 >3 
[].some(function(x){freturn false)});//=>false:[] 总 是 返回 false 














参阅 

Array.every()、 Array.filter()、Array.forEach() 
Array.sort() 

对 数组 元 素 进 行 排序 

概要 





array.sort() 
array.sort(orderfunc) 


参数 

orderfunc 

用 来 指定 如 何 排序 的 可 选 函 数 。 

返回 值 

该 数组 的 引用 。 注 意 是 在 原 数 组 中 进行 排序 ， 没 有 新 建 数组 。 

描述 

sort() 方 法 在 原 数 组 中 对 数组 元 素 进行 排序 ， 没 有 创建 新 数组 。 如 果 
在 调用 sort() 时 不 带 参 数 ， 将 按 字 母 顺序 (更 精确 地 说 ， 是 字符 编码 顺 
序 ) 对 数组 中 的 元 素 进 行 排序 。 要 实现 这 一 点 ， 首 先 要 把 元 素 转 化 为 字 
符 串 (如 果 有 必要 的 话 ) ， 以 便 进 行 比较 。 

如 果 想 按照 其 他 顺序 来 进行 排序 ， 就 必须 提供 比较 函数 ， 该 函数 要 
比较 两 个 值 ， 然 后 返回 一 个 数字 来 表明 这 两 个 值 的 相对 顺序 。 比 较 函 数 
需要 接受 两 个 参数 a 和 b， 并 返回 如 下 值 : 


一 个 小 于 0 的 值 。 在 这 种 情况 下 ， 表 示 根 据 排 序 标准 ，a 小 于 b， 在 
排序 后 的 数组 中 ，a 应 该 排列 在 b 的 前 面 。 








.0。 在 这 种 排序 下 ，a 和 b 是 相等 的 。 
一 个 大 于 0 的 值 。 在 这 种 情况 下 ，a 大 于 b。 


注意 : 数组 中 的 undefined 元 素 会 始终 排列 在 数组 末尾 。 即 便 提供 了 
自 定 义 的 比较 函数 ， 也 是 如 此 ， 因 为 undefined 值 不 会 传递 给 提供 的 


orderfunc。 
示例 


下 面 的 代码 展示 了 如 何 书写 一 个 比较 函数 ， 来 使 得 对 一 个 数值 数组 
按 数 值 排序 ， 而 不 是 按 字 母 排序 : 

















// 用 于 数值 排序 的 排序 函数 

function numberorder(a,b){return a-b;} 
a=new Array(33,4,1111,222); 

a.sort(); // 字 母 排 序 : 1111, 222, 33,4 
a.sort(numberorder); 7 台 什 排序: 3 33, 222, 1111 











Array.splice() 
插入 、 删 除 或 瞧 换 数组 元 素 
概要 
array.splice(start, deleteCount,value,...) 
参数 
start 
开始 插入 和 或) 删除 处 的 数组 元 素 的 序号 
deleteCount 


要 删除 的 元 素 个 数 ， 从 start 开 始 ， 并 包含 start 处 的 元 素 。 如 宁 指 定 


为 0， 表 示 择 入 元 素 ， 而 不 用 删除 任何 元 素 。 


(ew 


value,... 


要 插入 数组 中 的 零 个 或 多 个 值 ， 从 start 序 号 处 开始 插入 。 
返回 值 
如 果 从 array 中 删除 了 元 素 ， 则 返回 一 个 新 数组 ， 包 含 这 些 删 除 的 元 





描述 


splice() 将 删除 从 start 开 始 ( 包 括 start 处 〉 的 零 个 或 多 个 元 素 ， 并 且 
用 参数 列表 中 指定 的 零 个 或 多 个 值 来 蔡 换 抒 那些 删除 的 元 素 。 位 于 插入 
或 删除 的 元 素 之 后 的 数组 元 素 ， 在 有 必要 时 都 会 移动 ， 以 保持 与 数组 中 
剩余 元 素 的 连续 性 。 注 意 ， 虽 然 sSplice0O) 与 slice0) 的 方法 名 类 似 ， 但 作用 
不 是 类 似 的 ，splice0O 会 直接 修改 数组 。 


示例 
通过 例子 就 很 容易 理解 splice() 的 操作 : 











var a=[1,2,3,4,5,6,7,8]; 
a.sSplice(1,2);// 返 回 [2,3]; a 为 [1,4] 
a.splice(1,1);// 返 回 [4]; a 为 [1] 
a.splice(1,0,2,3);// 返 回 []; a 为 [1,2,3] 
































参阅 

Array.slice() 
Array.toLocaleString() 

将 数组 转化 为 本 地 化 字符 串 

重 写 Object.toLocaleString() 

概要 


array.toLocaleString() 


返回 值 


数组 的 本 地 化 字符 串 表 示 。 

异 沼 

TypeError 

调用 该 方法 时 ， 如 何 对 象 不 是 Array， 则 抛 出 该 异常 。 

描述 

数组 的 toLocaleString0 方 法 返回 数组 的 本 地 化 字符 串 表 示 。 它 首先 
调用 所 有 数组 元 素 的 toLocaleString0) 方 法 ， 然 后 使 用 地 区 特定 的 分 阳 字 
符 将 结果 字符 串 连 接 起 来 。 

参阅 

Array.toString()、Object.toLocaleString0 
Array.toString() 

将 数组 转化 成 字符 串 

重 写 Object.toString() 

概要 

array.toString() 

返回 值 

array 的 字符 串 表示 。 

异 委 

TypeError 

调用 该 方法 时 ， 如 果 对 象 不 是 Array， 则 抛 出 该 异常 。 


描述 


数组 的 toString(0) 方 法 把 数组 转化 成 字符 串 ， 并 返回 该 字符 串 。 当 数 
组 用 于 字符 串 上 下 文中 时 ， JavaScript 会 调用 该 万 法 将 数组 目 动 经 换 成 一 
个 字符 串 。 但 是 ， 在 菜 些 场景 下 ， 还 是 需要 显 式 调用 toString() 方 法 。 


ed 串 时 ， 首 先 要 将 每 个 数组 元 素 转化 为 
字符 串 〈1 通过 调用 这 坚 元 素 的 toString() 方 法 ) 。 一 旦 每 个 元 素 都 转化 成 
字符 串 后 ， 0 符 串 以 喜 号 分 隔 的 列表 形式 输出 。 返 
回 值 与 不 带 参数 调用 join0) 方 法 返回 的 字符 串 是 一 样 的 。 


参阅 











Array.toLocaleString()、Object.toString() 


Array.unshift() 

在 数组 头 部 插入 元 素 

概要 

array.unshift(value,...) 

参数 

value,... 

要 插入 array 头 部 的 一 个 或 多 个 值 。 

返回 值 

数组 的 新 长 度 。 

描述 

unshiftO 会 把 参数 掺 入 array 的 头 部 ， 并 将 已 经 存在 的 元 素 顺 次 往 后 
移动 ， 以 便 留 出 空间 。 该 方法 的 第 一 个 参数 会 成 为 数组 新 的 元 素 0， 如 
果 还 有 第 二 个 参数 的 话 ， 会 成 为 新 的 元 素 1， 以 此 类 推 。 注 意 ，unshift() 
不 会 创建 新 数组 ， 而 是 直接 修改 数组 本 号 。 


示例 


unshiftO 经 常 与 shiftO 一 起 使 用 。 例 如 : 





var a=[];//a:[] 

a.unshift(1);//a:[1] 返 回 : 1 
a.unshift(22);//a:[22,14] 返 回 : 2 
a.shift();//a:[i1] 返 回 : 22 
a.unshift(33,[4,5]);//a:[33,[4,5],1] 返 回 : 3 









































参阅 

Array.shift() 
Boolean 

对 布尔 值 的 支持 

构造 函数 





new Boolean(value )// 构 造 函 数 
Boolean(value)// 转 换 函 数 





参数 
value 
Boolean 对 象 存放 的 值 ， 或 要 转化 成 布尔 值 的 值 。 
返回 


作为 构造 函数 调用 〈 带 有 new 操 作 符 ) 时，Boolean() 会 将 参数 转换 
成 布尔 值 ， 并 返回 一 个 包含 该 值 的 Boolean 对 象 。 当 做 函数 调用 (不 带 
a 符 ) 时 ，Boolean0 只 会 将 参数 转换 成 一 个 原始 的 布尔 值 ， 并 返 
回 


0、NaN、null、 空 学 符 串 "" 和 undefined 值 都 会 转换 成 false。 其 他 原 
始 值 ， 除 了 false (但 包含 "false" 字 符 串 ) ， 以 及 其 他 的 对 象 和 数组 都 会 
转换 成 true。 


方法 


toString() 
根据 Boolean 对 象 代表 的 布尔 值 返回 "true" 或 "false" 字 符 串 。 





valueOf() 
返回 Boolean 对 象 中 存放 的 原始 布尔 值 。 

描述 

在 JavaScript 中 ， 布 尔 值 是 一 种 基本 的 数据 类 型 。Boolean 对 象 是 一 


个 封装 布尔 值 的 对 象 。Boolean 对 象 类 型 主要 提供 将 布尔 值 转换 成 字符 
捉 的 toString0) 方 法 。 当 调用 toString0 方 法 将 布尔 值 转换 成 字符 串 时 ( 通 
常 是 由 JavaScript 隐 式 调用 的 ) ，JavaScript 会 在 内 部 将 这 个 布尔 值 转换 
成 一 个 临时 的 Boolean 对 象 ， 然 后 调用 这 个 对 象 的 toString0 方 法 。 





参阅 

Object 
Boolean.toString() 

将 布尔 值 转换 成 字符 串 

重 写 Object.toString() 

概要 

b.toString() 


返回 值 
根据 原始 布尔 值 或 Boolean 对 象 b 的 值 返 回 "true" 或 "false" 字 符 串 。 





异 毅 
TypeError 
调用 访 方 法 时 ， 如 果 对 象 不 是 Boolean 类 型 ， 则 抛 出 该 异 第 。 


Boolean.valueOf() 


Boolean 对 象 的 布尔 值 

重 写 Object.ValueOfO 

概要 

b.valueOfO 

返回 值 

Boolean 对 象 b 存 放 的 原始 布尔 值 。 
异常 

TypeError 


调用 该 方法 时 ， 如 果 对 象 不 是 Boolean 类 型 ， 则 抛 出 该 异常 。 
Date 

操作 日 期 和 时 间 

构造 函数 





new Date() 

new Date(milliseconds) 

new Date(datestring) 

new Date(year,month, day, hours,minutes, seconds, ms) 





不 带 参 数 时 ，Date() 构 造 函 数 将 根据 当前 日 期 和 时 间 创 建 一 个 Date 
对 象 。 当 传 入 一 个 数字 参数 时 ， 这 个 数字 将 当做 日 期 的 内 部 数字 表示 形 
式 ， 单 位 为 毫秒 ， 值 等 于 对 应 的 getTime() 方 法 的 返回 值 。 当 传 入 一 个 字 
和 从 串 参 数 时 ， 它 将 当做 日 期 的 字符 串 表 示 形 式 ， 格 式 为 Date.parse() 方 法 
可 接受 的 格式 。 在 其 他 情况 下 ， 应 该 向 构造 函数 传 入 2 一 7 个 数字 参数 ， 
用 于 指定 日 期 及 时 间 的 各 个 字段 。 除 了 前 两 个 参数 〈 指 定年 以 及 月 的 范 
围 ) ， 其 余 参 数 都 是 可 选 的 。 注 意 ， 这 些 日 期 和 时 间 值 是 使 用 本 地 时 间 





指定 的 ， 而 不 是 国际 协调 时 间 〈UTC) “与 格林 尼 治 标准 时 间 [GMT]) 
类 似 ) 。 蔡 代 方 案 可 参阅 静态 方法 Date.UTC0。 


Date0 也 可 以 不 带 new 操 作 符 ， 像 一 个 函数 一 样 调用 。 以 这 种 方式 
调用 时 ，Date() 将 忽略 掉 所 有 传 入 的 参数 ， 并 返回 当前 日 期 和 时 间 的 一 
个 字符 串 表 示 。 

参数 


milliseconds 


需要 的 时 间 与 1970 年 1 月 1 日 午夜 (UTC) 之 间 的 毫秒 数 。 例 如 ， 传 
入 参数 5000 将 创建 一 个 表示 1970-01-01 午 夜 之 后 5 秒 钟 的 日 期 。 


datestring 


一 个 以 字符 串 形式 定义 日 期 (以 及 时 间 ， 可 选 ) 的 参数 。 这 个 字符 
串 应 当 为 Date.parse() 可 接受 的 一 种 格式 。 


year 


年 份 ，4 位 数字 。 例 如 ，2001 代 表 2001 年 。 为 了 与 早期 实现 的 
JavaScript 兼 容 ， 如 果 这 个 参数 的 值 在 0 一 99 之 间 ， 则 辐 它 加 上 1900。 


month 
月 份 ， 介 于 0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 。 
day 


月 份 中 的 第 几 天 ， 介 于 1~31 之 间 的 一 个 整数 。 注 意 这 个 参数 使 用 1 
作为 最 小 的 值 ， 而 其 他 参数 使 用 0 作为 最 小 的 值 。 可 选 的 。 


hours 
小 时 ，0 (午夜 ) 一 23〈 晚 上 11 点 ) 之 间 的 整数 。 可 选 的 。 


minutes 


小 时 中 的 分 钟 ，0 一 59 之 间 的 整数 。 可 选 的 。 
seconds 


分 钟 里 的 秒 数 ，0 一 59 之 间 的 整数 。 可 选 的 。 


ITS 
秒 中 的 守 秒 数 ，0 一 999 之 间 的 整数 。 可 选 的 。 
方法 





Date 对 象 没有 可 以 直接 读 / 写 的 属性 ， 所 有 对 日 期 及 时 间 值 的 访问 都 
需要 通过 方法 。Date 对 象 的 大 多 数 方法 分 为 两 种 形式 : 一 种 使 用 本 地 时 
间 ， 另 一 种 使 用 世界 时 间 〈UTC 或 GMT) 。 如 果 一 个 方法 的 名 字 中 
有 "UTC"， 则 它 使 用 世界 时 间 进 行 操作 。 这 些 方法 对 在 下 面 一 起 列 出 
了 。 人 例如， 列表 get[UTC]Day0O 同 时 代表 getDay0 和 getUTCDay0)。 


Date 的 方法 只 能 在 Date 对 象 上 调用 ， 如 果 试 图 在 其 他 类 型 的 对 象 上 
调用 它们 ， 将 抛 出 TypeError 异 常 。 








get[UTC]Date() 
返回 Date 对 象 的 月 份 中 的 日 期 值 ， 本 地 或 世界 时 间 。 
get[UTC]Day() 

返回 Date 对 象 的 一 周 中 的 日 期 值 ， 本 地 或 世界 时 间 。 
get[UTC]FullYear() 

返回 日 期 的 年 份 ， 完 整 的 4 位 数字 的 格式 ， 本 地 或 世界 时 间 。 
get[UTC]Hours() 

返回 Date 对 象 的 小 时 值 ， 本 地 或 世界 时 间 。 


get[UTC]Milliseconds() 


返回 Date 对 象 的 蝶 秒 值 ， 本 地 或 世界 时 间 。 
get[UTC]Minutes() 

返回 Date 对 象 的 分 钟 值 ， 本 地 或 世界 时 间 。 
get[UTC]Month() 

返回 Date 对 象 的 月 份 值 ， 本 地 或 世界 时 间 。 
get[UTC]Seconds() 

返回 Date 对 象 的 秒 数值 ， 本 地 或 世界 时 间 。 
getTimel() 


返回 Date 对 象 的 内 部 毫秒 表示 形式 。 注 意 这 个 值 与 时 区 无 关 ， 因 
此 ， 没 有 一 个 单独 的 getUTCTime() 方 法 。 


getTimezoneOffset() 


返回 当前 日 期 的 本 地 表示 与 UTC 表示 之 间 相 差 的 分 钟 数 。 注 意 返 回 
值 依赖 于 指定 日 期 的 夏令 时 是 否 有 效 。 


getYear() 


返回 Date 对 象 的 年 份 值 。 这 个 方法 已 经 过 时 ， 建 议 使 用 
getFullYear()。 








set[ UTC]Datel() 
设置 日 期 的 月 份 的 日 期 值 ， 使 用 本 地 或 世界 时 间 。 
set[ UTCI]FullYear() 


设置 日 期 的 年 份 ( 以 及 可 选 的 月 份 及 日 期 ) 值 ， 使 用 本 地 或 世界 时 
间 。 


set[UTC]Hours() 


设置 日 期 的 小 时 值 《 以 及 可 选 的 分 钟 、 秒 以 及 坚 秒 值 ) ， 使 用 本 地 
或 世界 时 间 。 


set[UTC]Milliseconds() 
设置 日 期 的 训 秒 值 ， 使 用 本 地 或 世界 时 间 。 
set[UTC]Minutes() 


a 设置 日 期 的 分 钟 值 《以 及 可 选 的 秒 以 及 时 秒 值 ) ， 使 用 地 本 或 世界 
时 间 。 


setLUTC]Month() 


设置 日 期 的 月 份 值 〈 以 及 可 选 的 月 份 中 的 天 数 ) ， 使 用 本 地 或 世界 
时 间 。 


set[UTC]Seconds() 
设置 日 期 的 秒 值 〈《 以 及 可 选 的 毫秒 值 ) ， 使 用 本 地 或 世界 时 间 。 
setTime() 

使 用 毫秒 的 格式 ， 设 置 一 个 Date 对 象 的 值 。 

setYear() 

设置 一 个 Date 对 象 的 年 份 值 。 已 弃 用 ， 建 议 使 用 setFullYear()。 
toDateString() 

返回 一 个 表示 当前 日 期 的 日 期 部 分 的 字符 串 ， 使 用 本 地 时 区 。 
toGMTString() 


使 用 GMT 时 区 ， 将 一 个 Date 转 换 为 一 个 字符 串 。 已 弃 用 ， 建 议 使 用 
toUTCString()。 





toISOString() 


将 一 个 Date 转 为 字符 串 ， 使 用 ISO-8601 标 准 来 组 合 日 期 /时 间 格 式 和 
UTC。 


toJSON() 
将 一 个 Date 对 象 JSON 序 列 化 ， 使 用 toISOString()。 
toLocaleDateString() 


返回 一 个 表示 当前 日 期 的 日 期 部 分 的 字符 串 ， 使 用 本 地 时 区 ， 本 地 
时 间 格 式 。 





toLocaleString() 
将 一 个 Date 转 换 为 字符 串 ， 使 用 本 地 时 区 以 及 本 地 时 间 格式 。 
toLocaleTimeString() 


返回 一 个 表示 当前 日 期 的 时 间 部 分 的 字符 串 ， 使 用 本 地 时 区 以 及 本 
地 时 间 格 式 。 


toString() 

使 用 本 地 时 区 将 一 个 Date 转 换 为 字符 串 。 

toTimeString() 

返回 一 个 表示 指定 日 期 的 时 间 部 分 的 字符 串 ， 使 用 本 地 时 区 表示 。 
toUTCString() 

将 一 个 Date 转 为 字符 串 ， 使 用 世界 时 间 。 

valueOf() 

将 一 个 Date 转 为 对 应 的 内 部 坚 秒 格式 。 

静态 方法 





除了 上 面 列 出 的 那些 实例 方法 ，Date 对 象 也 定义 了 三 个 表态 方法 。 
这 些 方法 通过 Date() 构 造 函 数 本 里 调用 ， 而 不 是 通过 各 个 Date 对 象 。 


Date.now!() 


返回 当前 时 间 ， 目 纪元 开始 后 的 旱 秒 数 。 





Date.parsel() 

解析 一 个 日 期 及 时 间 的 字符 串 表 示 ， 返 回 该 日 期 的 内 部 暑 秒 表示 。 
Date.UTC() 

返回 指定 的 UTC 日 期 及 时 间 的 坚 秒 表示 。 

描述 


Date 对 象 是 JavaScript 语 言 中 内 置 的 数据 类 型 。Date 对 象 通过 上 面 描 
述 的 新 DateO) 语 法 创建 。 


创建 了 一 个 Date 对 象 之 后 ， 可 以 使 用 许多 方法 来 对 它 进行 操作 。 大 
多 数 方法 只 是 简单 地 允许 使 用 本 地 或 UTC (世界 时 间 ， 或 GMT)〉 时间 
获取 或 设置 这 个 对 象 的 年 、 月 、 日 、 小 时 、 分 钟 、 秒 以 及 毫秒 值 。 
toString() 方 法 以 及 它 的 变 体 则 将 日 期 转换 为 人 类 可 读 的 字符 串 。 
getTime() 及 setTime() 则 获取 或 设置 该 Date 对 象 的 内 部 表示 一 一 自 1970 年 
1 月 1 日 午夜 (GMT) 以 来 的 毫秒 数 。 在 这 个 标准 的 毫秒 格式 中 ， 日 期 
及 时 间 都 由 一 个 单独 的 整数 表示 ， 这 使 得 对 日 期 的 算术 操作 特别 简单 。 
ECMAScript 标 准 要 求 Date 对 象 能 以 宣 秒 的 精度 ， 表 示 1970-01-01 之 前 及 
之 后 1 亿 天 的 日 期 及 时 间 。 这 是 一 个 加 上 或 减 去 273 785 年 的 区 间 ， 也 整 
是 说 ， 直 到 275 755 年 ，JavaScript 的 时 钟 才 会 走 到 头 。 


示例 


创建 一 个 Date 对 象 后 ， 有 知 干 方法 可 以 用 来 操作 它 : 














d=new Date( );// 取 得 当前 日 期 及 时 间 

document .write('Today is:"+d,toLocaleDatesString()+'.');// 显 示 日 期 
document .write('The time is:'+d.toLocaleTimeString());// 显 示 时 间 
var day0fweek=d.getDay();// 星 期 几 ? 

var weekend=(day0fweek==0)||(day0fweek==6);// 是 周末 吗 ? 


















































Date 对 象 的 另 一 个 营 用 方法 是 从 当前 时 间 的 坚 秒 表示 中 减 去 其 他 的 
时 间 ， 以 便 判 断 两 个 时 间 之 闻 的 差 。 下 面 的 客户 端 代码 示例 显示 了 两 种 
这 样 的 用 法 : 








<script Janguage="JavaScript" > 
today=new Date();// 记 下 当天 的 日 期 
christmas=new Date();// 取 得 当前 年 份 的 日 期 
christmas.setMonth(11);// 将 月 份 设置 为 12 月 
christmas.setDate(25);// 以 及 将 天 设置 为 25 日 
// 如 果 圣 诞 节 还 没有 过 ， 计 算 现 在 与 圣诞 节 之 间 的 毫秒 数 ， 
// 然 后 将 它 转 为 天 数 并 输出 一 条 消息 
if(today.getTime()<=christmas.getTime()){ 
difference=christmas.getTime()-today.getTime(); 
difference=Math.floor(difference/(1000*60*60*24)); 
document .write(' 距 圣诞 节 只 有 '+difference+' 天 了 ! <p>')) 








































































































} 

< /script>//…. 这 儿 是 其 他 的 HTML 文 档 …. 

<script language="JavaScript" > 之// 这 儿 使 用 Date 对 象 来 计时 
// 通 过 除 以 1006 来 将 毫秒 转 为 秒 

now=new Date() 

document .write('<p> 之 加 载 本 页 花费 了 "+ 
(now.getTime()-today.getTime())/1000+ 

' 秒 。') 1 

</script> 
































参阅 

Date.parse()、Date.UTC() 
Date.getDate() 

返回 一 个 Date 对 象 的 月 份 中 的 日 期 值 

概要 





date.getDate() 





返回 


给 定 Date 对 象 date 的 月 份 中 的 日 期 值 ， 使 用 本 地 时 间 。 返 回 值 在 1 一 
31 之 间 。 


Date.getDay() 
返回 一 个 Date 对 象 的 一 周 中 的 日 期 值 。 
概要 
date.getDay() 
返回 


给 定 Date 对 象 date 的 一 周 中 的 日 期 值 ， 使 用 本 地 时 间 。 返 回 值 介 于 
0 (星期 天 ) 一 6〈 星 期 一 ) 之 间 。 


Date.getFullYear() 
返回 一 个 Date 对 象 的 年 份 值 。 
概要 
date.getFullYear() 
返回 


date 以 本 地 时 间 表 示 时 的 年 份 值 。 返 回 值 是 一 个 完整 的 4 位 数字 的 年 
份 ， 包 含 世 纪 ， 而 不 是 一 个 两 位 数字 的 缩写 。 


Date.getHours() 
返回 一 个 Date 对 象 的 小 时 值 。 
概要 
date.getHours() 
返回 


指定 的 Date 对 象 date 以 本 地 时 间 表 示 时 的 小 时 值 。 返 回 值 在 0〈 午 
夜 ) 一 23 (晚上 11 点 ) 之 间 。 


Date.getMilliseconds() 
返回 一 个 Date 对 象 的 毫秒 值 
概要 
date.getMilliseconds() 
返回 
指定 的 date 以 本 地 时 间 表 示 时 的 坚 秒 值 。 

Date.getMinutes() 
返回 一 个 Date 对 象 的 分 钟 值 
概要 
date.getMinutes() 
返回 


指定 Date 对 象 date 以 本 地 时 间 表 示 时 的 分 钟 值 。 返 回 值 在 0 一 59 之 
间 。 


Date.get Month() 
返回 一 个 Date 对 象 的 月 份 值 
概要 
date.get Month() 
返回 


指定 Date 对 象 date 以 本 地 时 则 表示 的 月 份 值 。 返 回 值 在 0 〈1 月 ) 一 
11.012 月 》 之 [ 国 。 


Date.getSeconds() 
返回 一 个 Date 对 象 的 秒 钟 值 
概要 
date.getSeconds() 
返回 
指定 Date 对 象 date 以 本 地 时 间 表 示 的 秒 钟 值 。 返 回 值 在 0 一 59 之 间 。 


Date.getTime() 
将 一 个 Date 对 象 以 毫秒 形式 返回 
概要 


date.getTimel() 

返回 

指定 的 Date 对 象 date 的 坚 秒 表示 形式 ， 即 1970-1-01 午 夜 GMT) 到 
指定 日 期 之 间 的 宣 秒 数 。 

摘 述 

getTime() 将 日 期 和 时 间 转 换 为 一 个 单独 的 整数 。 在 比较 两 个 Date 对 
象 或 判断 两 个 日 期 之 间 的 时 间 差 时 ， 这 个 方法 很 有 用 。 注 意 ， 一 个 日 期 
的 上 宫 秒 表示 形式 与 时 区 无 关 ， 所 以 这 个 方法 不 存在 对 应 的 getUTCTime() 
方法 。 不 要 把 这 个 getTime() 方 法 与 getDay0O 和 getDate() 方 法 混淆 ， 后 两 
者 分 别 返回 一 周 中 的 日 期 值 和 一 月 中 的 日 期 值 。 


Date.parse() 和 Date.UTC() 方 法 可 以 在 不 创建 Date 对 象 的 情况 下 将 一 
个 日 期 或 时 间 转 换 为 晤 秒表 示 形 式 。 


参阅 





Date、 Date.parse()、Date.setTime()、Date.UTC() 


Date.getTimezoneOffset() 
取得 与 GMT 时 间 之 间 的 差 
概要 
date.getTimezoneOffset() 
返回 
GMT 时 间 与 本 地 时 间 的 差 ， 用 分 钟表 示 。 
描述 
getTimezoneOffset() 以 分 钟 为 单位 返回 GMT 或 UTC 时 间 与 本 地 时 间 
的 差 。 实 际 上 ， 这 个 函数 告诉 你 当前 JavaScript 代 码 运行 在 哪个 时 区 ， 以 
及 给 定 的 日 期 是 否 处 于 夏令 时 状态 。 
返回 值 的 单位 是 分 钟 ， 而 不 是 小 时 ， 因 为 有 些 国家 的 时 区 不 是 以 小 
时 为 间隔 。 
Date.getUTCDatel() 
返回 一 个 Date 对 象 的 一 月 中 的 日 期 值 (全球 时 间 ) 
概要 
date.getUTCDate() 
返回 
以 全 球 时 间 表 示 的 date 的 一 月 中 的 日 期 值 〈 介 于 1 一 31 之 间 ) 。 











Date.getUTCDavy() 
返回 一 个 Date 对 象 的 一 周 中 的 日 期 值 〈 全 球 时 间 ) 


概要 
date.getUTCDay() 
返回 


以 全 球 时 间 表 示 的 date 一 周 中 的 日 期 值 。 返 回 值 在 0《〈 星 期 天 ) 一 
6《〈 星 期 六 ) 之 间 。 


Date.getUTCFullYear() 
返回 一 个 Date 对 象 的 年 份 值 ( 全 球 时 间 ) 
概要 
date.getUTCFullYear() 
返回 


以 全 球 时 间 表 示 的 date 的 年 份 值 。 返 回 值 是 一 个 完整 的 4 位 数字 的 年 
份 ， 而 不 是 两 位 数字 的 缩写 。 


Date.getUTCHours() 
返回 一 个 Date 对 象 的 小 时 值 〈 全 球 时 间 ) 
概要 
date.getUTCHours() 
返回 


以 全 球 时 间 表 示 的 date 的 小 时 值 。 返 回 值 是 0 午夜 ) 一 23《〈 晚 上 11 
所 ) 之 间 的 一 个 整数 。 


Date.getUTCMilliseconds() 
返回 一 个 Date 对 象 的 宣 秒 值 〈 全 球 时 间 ) 


概要 

date.getUTCMilliseconds() 

返回 

以 全 球 时间 表 示 的 date 的 室 秒 值 。 
Date.getUTCMinutes() 

返回 一 个 Date 对 象 的 分 钟 值 〈 全 球 时 间 ) 

概要 

date.getUTCMinutes() 

返回 

以 全 球 时 间 表 示 的 date 的 分 钟 值 。 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 
Date.getUTCMonth() 

返回 一 个 Date 对 象 的 一 年 中 的 月 份 值 ( 全 球 时 间 ) 

概要 

date.getUTCMonth() 

返回 

以 全 球 时 间 表 示 的 date 的 一 年 中 的 月 份 值 。 返 回 值 是 0〈1 月 ) 一 


11 (12 月 ) 之 间 的 一 个 整数 。 注 意 ，Date 对 象 用 1 表示 一 个 月 中 的 第 一 
天 ， 但 用 0 表示 一 年 中 的 第 一 个 月 。 


Date.getUTCSeconds() 
返回 一 个 Date 的 秒 数值 (全 球 时间 ) 





概要 
date.getUTCSeconds() 

返回 

以 全 球 时 间 表 示 的 date 的 秒 数值 。 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 

Date.getYear() 

返回 一 个 Date 对 象 的 年 份 值 

概要 

date.getYear() 

返回 

给 定 Date 对 象 的 年 份 值 减 去 1900。 
描述 


getYear() 返 回 给 定 Date 对 象 date 的 年 份 值 减 去 1900。 自 ECMAScript 
第 3 版 开始 ，JavaScript 已 不 再 要 求实 现 这 个 方法 ; 可 使 用 getFullYear() 来 
1 





Date.now!() 
以 毫秒 的 形式 返回 当前 时 间 
概要 
Date.now0) 
返回 


从 1970-01-01 午 夜 〈GMT) 到 现在 的 时 间 ， 以 毫秒 表示 。 


描述 





在 ECMAScript 5 之 前 ， 可 以 像 下 面 这 样 实现 这 个 方法 : 





Date.now=function(){return(new Date()).getTime();} 





参阅 


Date、Date.getTime() 


Date.parse() 
解析 一 个 日 期 /时 间 字 符 串 
概要 
Date.parse(date) 
参数 
date 
一 个 包含 待 解析 的 日 期 和 时 间 的 字符 串 。 
返回 
从 1970-01-01 午 夜 GMT) 到 给 定 日 期 之 间 的 毫秒 数 。 
描述 


Date.parse() 是 Date 的 一 个 静态 方法 。 它 返回 从 纪元 开始 到 给 定 字 符 
串 参数 所 指定 的 日 0 毫秒 数 . 返回 值 可 以 直接 用 于 创建 一 个 新 的 
Date 对 象 ， 或 用 于 通过 Date.setTime0 设 置 一 个 已 存在 的 Date 对 象 的 日 
期 。 





ECMAScript 5 要 求 这 个 方法 可 以 解析 由 et 法 返回 
的 字符 串 。 在 ECMAScript 5 以 及 之 前 的 版 本 中 ， 还 要 求 这 个 方法 能 解析 
由 toUTCString0 和 toString() 方 法 返 加 的 依 总 于 中 体 实 现 环境 的 宰 符 串 。 


参阅 


Date、Date.setIime()、Date.toI9OString(、Date.toString() 


Date.setDate() 
设置 一 个 Date 对 象 的 一 月 中 的 日 期 值 
概要 





date.setDate(day_of_month) 





参数 
day_of month 


1 一 31 之 间 的 一 个 整数 ， 将 用 做 date 的 对 应 月 中 的 日 期 值 《 本 地 时 
间 ) 。 


返回 


调整 后 的 日 期 的 毫秒 表示 形式 。 在 有 ECMAScript 标 准 之 前 ， 这 个 
方法 什么 也 不 返回 。 


Date.setFullYear() 
设置 一 个 Date 的 年 份 值 ， 以 及 可 选 的 月 份 值 和 日 期 值 
概要 
date.setFullYear(year) 
date.setFullYear(year,month) 
date.setFullYear(year,month,day) 
参数 


year 


date 中 待 设置 的 年 份 值 ， 本 地 时 间 形 式 。 这 个 参数 应 该 是 一 个 包含 
世纪 的 整数 ， 如 1999; 它 不 能 是 缩写 ， 如 99。 


month 
0 一 11 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 月 份 值 《本 地 时 间 ) 。 
day 


1 一 31 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 对 应 月 中 的 日 期 值 〈 本 地 
时 间 ) 。 


返回 
调整 后 的 日 期 的 内 部 室 秒 表示 形式 。 


Date.setHours() 
设置 一 个 Date 的 小 时 、 分 钟 、 秒 以 及 坚 秒 值 
概要 


date.setHours(hours) 
date.setHours(hours,minutes) 
date.setHours(hours,minutes,seconds) 
date.setHours(hours,minutes,seconds,millis) 
参数 

hours 


0 午夜 ) 一 23《〈 晚 上 11 点 ) 之 间 的 一 个 整数 ， 将 用 做 date 的 新 的 小 
时 值 《本 地 时 间 ) 。 


minutes 


0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 的 分 钟 值 (本 地 时 
间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


seconds 


0 一 59 之 间 的 一 个 可 选 整 数 ， 将 用 做 date 的 新 的 秒 钟 值 (本 地 时 
间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


millis 


0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 的 坚 秒 值 《本 地 时 
间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


返回 


调整 过 后 的 时 间 的 毫秒 表示 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 
个 方法 什么 也 不 返回 。 





Date.setMilliseconds() 

设置 一 个 日 期 的 毫秒 值 

概要 

date.setMilliseconds(millis) 

参数 

millis 

将 用 于 date 以 本 地 时 间 表 示 的 训 秒 值 。 这 个 参数 应 该 是 0 一 999 之 间 
的 一 个 整数 。 

返回 

调整 后 的 日 期 的 旱 秒 表示 形式 。 


Date.setMinutes() 


设置 一 个 Date 的 分 钟 、 秒 钟 以 及 至 秒 值 
概要 

date.setMinutes(minutes) 
date.setMinutes(minutes,seconds) 
date.setMinutes(minutes,seconds,millis) 
参数 

minutes 


0 一 59 之 间 的 一 个 整数 ， 将 用 做 Date 对 象 date 的 分 钟 值 ( 本 地 时 
Li 


seconds 


0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 秒 钟 值 (本 地 时 间 ) 。 在 
ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


millis 


0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 训 秒 值 〈 本 地 时 间 ) 。 
在 ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


返回 


调整 过 后 的 日 期 的 毫秒 表示 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 
个 方法 什么 也 不 返回 。 


Date.set Month() 
设置 一 个 Date 的 月 份 及 日 期 值 
概要 


date.set Month(month) 


date.set Month(month,day) 
参数 
month 


0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 ， 将 用 做 该 Date 对 象 date 的 
新 月 份 值 《本 地 时 间 ) 。 注 意 月 份 从 0 开始 ， 而 1 月 中 的 日 期 从 1 开始 。 


day 


1 一 31 之 间 的 一 个 可 选 整数 ， 将 用 做 该 date 的 对 应 月 份 中 的 日 期 值 
《本 地 时 间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


返回 


调整 后 的 日 期 的 毫秒 表现 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 
方法 什么 也 不 返回 。 


Date.setSeconds() 
设置 一 个 Date 的 秒 钟 及 坚 秒 值 
概要 
date.setSeconds(seconds) 
date.setSeconds(seconds,millis) 
参数 
seconds 
0 一 59 之 间 的 一 个 整数 ， 将 用 做 Date 对 象 date 的 秒 钟 值 。 
millis 


0 一 999 之 间 的 一 个 可 选 整 数 ， 将 用 做 该 date 的 新 宣 秒 值 〈 本 地 时 
间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


返回 


调整 过 后 的 日 期 的 坚 秒 表现 值 。 在 ECMAScript 标 准 化 之 前 ， 这 个 
参数 什么 也 不 返回 。 


Date.setTime() 
使 用 室 秒 值 设置 一 个 时 间 
概要 





date.setTime(milliseconds) 

参数 

milliseconds 

需要 的 日 期 及 时 间 与 1970-01-01 午 夜 GMT) 之 间 的 毫秒 数 。 这 种 
类 型 的 蝇 秒 值 也 可 以 传 入 Date(0) 构 造 函 数 ， 还 可 以 通过 调用 Date.UTCO) 
I 。 将 日 期 转换 为 这 种 训 秒 格式 后 ， 它 将 与 时 区 无 

返回 


milliseconds 参 数 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方法 什么 也 不 
返回 


Date.setUTCDatel() 
设置 一 个 Date 的 对 应 月 中 的 日 期 值 〈 全 球 时 间 ) 
概要 
date.setUTCDate(day_of month) 


参数 





day_of month 


将 用 做 date 的 对 应 月 中 的 日 期 值 ， 以 全 球 时 间 表 示 。 这 个 参数 应 该 
征 1 一 31 之 间 的 一 个 整数 。 


返回 

调整 后 的 日 期 的 内 部 旱 秒 表示 形式 。 
Date.setUTCFullYear() 

设置 一 个 Date 的 年 份 、 月 份 以 及 日 期 值 〈 全 球 时 间 ) 

概要 

date.setUTCFullYear(year) 

date.setSeconds(seconds,millis) 

date.setUTCFullYear(year,month,day) 

参数 

year 


将 用 做 dat e 的 以 全 球 时 间 表 示 的 年 份 值 。 这 个 参数 应 该 是 一 个 包含 
世纪 的 整数 ， 如 1999， 不 能 是 缩写 ， 如 99。 


month 


0 一 11 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 月 份 值 〈 全 球 时 间 ) 。 注 
意 月 份 是 以 0 开始 的 数字 ， 而 月 份 中 的 日 期 则 以 1 开始 。 


day 


1 一 31 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 对 应 月 中 的 新 日 期 值 〈 全 
球 时 间 ) 。 


返回 
调整 后 的 时 间 的 坚 秒 表示 形式 。 





Date.setUTCHours() 


设置 一 个 Date 的 小 时 、 分 钟 、 秒 钟 以 及 坚 秒 值 
概要 

date.setUTCHours(hours) 
date.setUTCHours(hours,minutes) 
date.setUTCHours(hours,minutes,seconds) 
date.setUTCHours(hours,minutes,seconds,millis) 
参数 

hours 


将 用 做 date 的 以 全 球 时 间 表 示 的 小 时 值 。 这 个 参数 应 该 为 0〈 午 夜 ) 


一 23 (晚上 11 点 ) 之 间 的 一 个 整数 。 


minutes 

0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 分 钟 值 ( 全 球 时 间 〉。 
seconds 

0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 秒 钟 值 〈 全 球 时 间 ) 。 
miljis 


0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 坚 秒 值 〈 全 球 时 


间 ) 。 


返回 
调整 后 的 日 期 的 蝶 秒 表示 形式 。 


Date.setUTCMilliseconds() 


设置 一 个 Date 的 坚 秒 值 〈 全 球 时 间 ) 
概要 

date.setUTCMilliseconds(millis) 

参数 

millis 


将 用 做 date 的 以 全 球 时 间 表 示 的 蝇 秒 值 。 这 个 参数 应 该 为 0 一 999 之 
间 的 一 个 整数 。 


返回 

调整 后 的 日 期 的 宣 秒 表示 形式 。 
Date.setUTCMinutes() 

设置 一 个 Date 的 分 钟 、 秒 钟 以 及 坚 秒 值 〈 全 球 时 间 ) 

概要 

date.setUTCMinutes(minutes) 

date.setUTCMinutes(minutes,seconds) 

date.setUTCMinutes(minutes,seconds,millis) 

参数 

minutes 


将 用 做 date 的 以 全 球 时 间 表 示 的 分 钟 值 。 这 个 参数 应 该 为 0 一 59 之 间 
的 一 个 整数 。 


seconds 


0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 秒 钟 值 《全球 时 间 ) 。 


millis 

0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 毫秒 值 〈 全 球 时 间 ) 。 

返回 

调整 后 的 日 期 的 毫秒 表示 形式 。 
Date.setUTCMonth() 

设置 一 个 Date 的 月 份 值 及 日 期 值 《全球 时 间 ) 

概要 

date.setUTCMonth(month) 

date.setUTCMonth(month,day) 

参数 

month 


将 用 做 date 的 以 全 球 时 间 表 示 的 月 份 值 。 这 个 参数 应 该 是 0 (1 月 ) 
一 11(12 月 ) 之 间 的 一 个 整数 。 注 意 月 份 值 是 从 0 开始 的 数字 ， 一 个 月 
中 的 日 期 值 则 是 从 1 开始 。 

day 


EE 
时 间 ) 。 


返回 

调整 后 的 日 期 的 旱 秒 表示 形式 。 
Date.setUTCSeconds() 

设置 一 个 Date 的 秒 钟 及 毫秒 值 〈 全 球 时 间 ) 


概要 
date.setUTCSeconds(seconds) 
date.setUTCSeconds(seconds,millis) 
参数 

seconds 


将 用 做 date 的 以 全 球 时 间 表 示 的 秒 钟 值 。 这 个 参数 应 该 为 0 一 59 之 间 


的 一 个 整数 。 
millis 
0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 毫秒 值 〈 全 球 时 间 ) 。 
返回 
调整 后 的 日 期 的 毫秒 表示 形式 。 
Date.SetYear() 
设置 一 个 Date 的 年 份 值 
概要 
date.setYear(year) 
参数 
year 


一 个 将 用 做 该 Date 对 象 date 的 年 份 值 〈 全 球 时 间 ) 的 整数 。 如 果 这 
个 值 在 0 一 99 之 间 ， 它 将 会 加 上 1900， 以 便 把 它 当 做 1900 一 1999 之 间 的 
年 份 处 理 。 


返回 


调整 后 的 日 期 的 毫秒 表示 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 
方法 什么 也 不 返回 。 


描述 


setYear0 设 置 给 定 Date 对 象 的 年 份 值 ， 其 中 1900 一 1999 之 间 的 年 份 
的 行为 有 些 特别 。 


根据 ECMAScript 第 3 版 ，JavaScript 实 现 中 已 不 再 对 这 个 函数 做 要 
求 ， 建 议 使 用 setFullYear0) 来 代替 它 。 


Date.toDateString() 
以 字符 串 的 形式 返回 一 个 Date 的 日 期 部 分 
概要 
date.toDateString() 
返回 


菏 个 date 的 日 期 部 分 的 一 个 与 具体 实现 相关 的 、 人 类 可 读 的 字符 串 
表示 形式 。 以 本 地 时 区 表示 。 


参阅 
Date.toString() 


Date.toTimeString() 
Date.toGMTString() 

己 茎 用 

将 一 个 Date 转 换 为 全 球 时 间 表示 的 一 个 字符 串 

概要 


date.toGMTString() 
返回 


由 Date 对 象 date 定 义 的 日 期 及 时 间 的 一 个 字符 串 表 示 形 式 。 在 转换 
为 字符 串 之 前 ， 日 期 将 先 从 本 地 时 区 转换 为 GMT 时 区 。 


描述 
toGMTString0) 己 弃 用 ， 建 议 使 用 功能 相同 的 Date.toUTCString()。 


根据 ECMAScript 第 3 版 ，JavaScript 的 具体 实现 已 不 要 对 这 个 方法 做 
要 求 ， 建 议 使 用 toUTCString0) 来 代替 。 


参阅 

Date.toUTCString() 
Date.toISOString() 

ECMAScript 5 

将 一 个 Date 转 换 为 ISO-8601 格 式 的 字符 串 

概要 

date.toISOString() 

返回 


date 的 一 个 字符 串 表示 形式 ， 以 ISO-8601 标 准 以 及 时 区 为 "Z" 的 UTC 
时 间 表 示 形 式 ， 包 含 日 斯 和 时 间 的 完整 精度 。 返 回 的 字符 串 格式 形 如 : 





yyyy-mm-ddThh:mm:ss.sssZz 





参阅 


Date.parse()、Date.toString() 


Date.toJSON 
ECMAScript 5 
JSON 序 列 化 一 个 Date 对 象 
概要 
date.toJSON(key) 
参数 
key 
JSON.stringify() 会 传递 这 个 参数 ， 但 是 toJSON 方 法 会 忽略 它 。 
返回 


date 的 一 个 字符 串 表 示 形 式 ， 值 为 调用 它 的 toISOString() 方 法 的 结 
果 。 


描述 


JSON.stringifyO 使 用 该 方法 将 一 个 Date 对 象 转换 为 一 个 字符 串 。 它 
不 是 一 个 通用 的 方法 。 


参阅 

Date.toISOString()、JSON.stringify() 
Date.toLocaleDateString() 

以 本 地 格式 的 字符 串 形式 返回 一 个 Date 的 日 期 部 分 

概要 

date.toLocaleDateString() 


返回 


date 的 日 期 部 分 的 一 个 与 具体 实现 相关 的 、 人 类 可 读 的 字符 串 表 示 
形式 ， 使 用 本 地 时 区 以 及 本 地 习惯 格式 。 


参阅 


Date.toDateString()、Date.toLocaleString()、 
Date.toLocaleTimeString()、Date.toString()、Date.toTimeString() 


Date.toLocaleString() 
将 一 个 Date 转 换 为 一 个 本 地 格式 的 字符 串 
概要 
date.toLocaleString() 
返回 


由 date 指 定 的 日 期 与 时 间 的 一 个 字符 串 表 示 形 式 。 日 期 与 时 间 使 用 
本 地 时 区 以 及 本 地 的 习惯 表示 。 


用 法 

toLocaleString() 使 用 本 地 时 区 ， 将 一 个 日 期 转换 为 一 个 字符 串 。 这 
个 方法 也 使 用 本 地 习惯 来 格式 化 日 期 及 时 间 ， 上 所 以 在 不 同 的 国家 或 平台 
上 ， 格 式 可 能 会 不 一 样 。toLocaleString() 一 般 返 回 的 是 用 户 首 选 的 日 期 
及 时 间 格 式 。 

参阅 


Date.toISOString()、Date.toLocaleDateString()、 
Date.toLocaleTimeString()、Date.toString()、Date.toUTCString() 


Date.toLocaleTimeString() 
返回 使 用 本 地 格式 表示 的 Date 的 时 间 部 分 
概要 


date.toLocaleTimeString() 
返回 


一 个 与 实现 相关 的 、 人 类 可 读 的 表示 date 的 时 间 部 分 的 字符 串 ， 使 
用 本 地 时 区 以 及 本 地 习惯 格式 。 


参阅 


Date.toDateString()、Date.toLocaleDateString()、 
Date.toLocaleString()、Date.toString()、Date.toTimeString() 


Date.toString() 

将 一 个 Date 转 换 为 一 个 字符 串 

概要 

date.toString() 

返回 

date 的 一 个 人 类 可 读 的 字符 串 表示 形式 ， 使 用 本 地 时 区 。 

描述 

toString() 返 回 date 的 一 个 人 类 可 读 的、 与 实现 相关 的 字符 串 表 示 形 
式 。 和 toUTCString() 不 同 ，toString0) 使 用 本 地 时 区 。 与 toLocaleString() 
不 同 ，toStringO 可 能 不 使 用 本 地 特定 的 格式 来 表示 日 期 及 时 间 。 

参阅 

Date.parse() 

Date.toDateString() 

Date.toISOString() 


Date.toLocaleString() 


Date.toTimeString() 


Date.toUTCString() 


Date.toTimeString() 
以 字符 串 形 式 返回 一 个 Date 的 时 间 部 分 
概要 
date.toTimeString() 
返回 


一 个 与 实现 相关 的 、 人 类 可 读 的 表示 date 的 时 间 部 分 的 字符 串 ， 使 
用 本 地 时 区 表示 。 


参阅 

Date.toString()、Date.toDateString()、Date.toLocaleTimeString() 
Date.toUTCString() 

将 一 个 Date 转 换 为 字符 串 (全球 时 间 ) 

概要 

date.toUTCString() 

返回 

date 的 一 个 人 类 可 读 的 以 全 球 时 间 表示 的 字符 串 。 

描述 

toUTCString0 返 回 qate 的 以 全 球 时 间 表 示 的 与 实现 相关 的 字符 串 。 


参阅 


Date.toISOString()、Date.toLocaleString()、Date.toString() 


Date.UTC() 


Vl 


99 


将 一 个 Date 说 明 转 为 蝇 秒 形式 

概要 
Date.UTC(year,month,day,hours,minutes,seconds,ms) 
参数 

year 


以 4 位 数 格式 表示 的 年 份 。 如 果 这 个 参数 在 0 一 99 之 间 〈 包 括 0 和 
， 则 它 将 加 上 1900， 当 做 1900 一 1999 之 间 的 年 份 处 理 。 


month 

月 份 ， 指 定 为 0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 。 

day 

对 应 月 中 的 日 期 值 ， 指 定 为 1 一 31 之 间 的 一 个 整数 。 注 意 这 个 参数 


的 最 小 值 为 1， 而 其 他 参数 的 最 小 值 是 0。 这 个 参数 是 可 选 的 。 


hours 


小 时 ， 指 定 为 0〈 午 夜 ) 一 23《〈 晚 上 11 点 ) 之 间 的 一 个 整数 。 这 个 


参数 是 可 选 的 。 


的 。 


minutes 


小 时 中 的 分 钟 值 ， 指 定 为 0 一 59 之 间 的 一 个 整数 。 这 个 参数 是 可 选 


seconds 


分 钟 中 的 秒 钟 值 ， 指 定 为 0 一 59 之 间 的 一 个 整数 。 这 个 参数 是 可 选 


上 
ms 


曼 秒 值 ， 指 定 为 0 一 999 之 间 的 一 个 整数 。 这 个 参数 是 可 选 的 ， 在 
ECMAScript 标 准 化 之 前 ， 这 个 参数 会 被 忽略 。 


返回 

指定 的 全 球 时 间 的 时 秒表 示 形 式 。 也 就 是 说 ， 这 个 方法 返回 1970- 
01-01 午 夜 GMT) 与 指定 时 间 的 毫秒 数 。 

描述 

Date.UTCO 是 一 个 静态 方法 ; 须 通 过 Date() 构 造 函 数 调 用 它 ， 而 不 
是 通过 有 具体 的 Date 对 象 调用 。 


Date.UTC() 的 参数 指定 一 个 日 期 及 时 间 ， 将 当做 UTC 解 析 ; 使 用 
GMT 时 区 。 指 定 的 UTC 时 间 将 转换 为 训 秒 格式 ， 可 用 于 DateO 构 造 函 数 
方法 和 Date.setTime() 方 法 。 


DateO 构 造 函数 方法 和 Date.UTCO 所 能 接受 的 日 期 及 时 间 参 数 完全 
相同 。 不 同 之 处 在 于 ，Date(0) 构 造 函 数 使 用 本 地 时 间 ， 而 Date.UTCO 使 
用 全 球 时 间 (GMT)〉 。 可 以 使 用 类 似 下 面 的 代码 使 用 UTC 定义 来 创建 
一 个 Date 对 象 : 








d=new Date(Date.UTC(1996, 4,8,16,30)); 





参阅 
Date、 Date.parse()、Date.setTimel() 
Date.valueOf() 
将 一 个 Date 转 为 又 秒表 示 形 式 


重 写 Object.valueOf() 


概要 

date.valueOf() 

返回 

date 的 坚 秒 表示 形式 。 返 回 值 与 Date.getTime(O 的 返回 值 相同 。 
decodeURI() 

解码 一 个 URI 中 的 字符 

概要 

decodeURI(uri) 

参数 

uri 

一 个 包含 已 编码 的 URI 或 其 他 待 解码 的 文本 的 字符 串 。 

返回 

uri 的 一 个 副本 ， 其 中 所 有 十 六 进 制 转 义 序列 都 已 替换 为 它们 代表 的 


异常 

URIError 

表示 uri 中 的 一 个 或 多 个 转 义 序列 格式 有 误 ， 不 能 正确 解码 。 
描述 


decodeURIO 是 一 个 全 局 函数 ， 返 回 它 的 uri 参 数 的 一 份 解码 后 的 副 
本 。 它 是 encodeURI() 的 逆 操 作 ， 更 多 细 市 可 参阅 该 函数 的 参考 页 面 。 


参阅 


decodeURIComponent()、encodeURI()、encodeURIComponent()、 
escape()、unescape() 


decodeURIComponent() 
解码 一 个 URI 组 件 中 的 字符 
概要 
decodeURI(s) 
参数 
s 
一 个 包含 已 编码 的 URI 组 件 或 其 他 竺 解码 的 文本 的 字符 串 。 
返回 


s 的 一 个 副本 ， 其 中 所 有 的 十 六 进 制 转 义 序列 都 已 痊 换 为 它们 所 代 
表 的 字符 。 


异常 

URIError 

表示 s 中 的 一 个 或 多 个 转 义 序列 格式 有 误 ， 不 能 正确 地 解码 。 

描述 

decodeURIComponentO 是 一 个 全 局 函数 ， 返 回 它 的 参数 的 一 个 已 解 
码 的 副本 。 它 是 encodeURIComponentO 的 逆 操 作 ， 更 多 细节 可 参阅 该 函 
数 的 参考 页 面 。 

参阅 


decodeURI()、encodeURI()、encodeURIComponent()、escape()、 
unescapel() 


encodeURI() 
转 义 一 个 URI 中 的 字符 
概要 
encodeURI(uri) 
参数 
uri 


一 个 包含 URI 或 其 他 每 编码 的 文本 的 字符 串 。 


返回 

uri 的 一 个 副本 ， 其 中 茶 些 字符 已 极 蔡 换 为 十 六 进 制 转 义 序列 。 
异常 

URIError 

表示 wri 包含 非法 的 Unicode 代 理 项 对 ， 不 能 编码 。 

描述 


encodeURIO 是 一 个 全 局 函数 ， 返 回 它 的 uri 参 数 的 一 个 编码 后 的 副 
本 。ASCII 字 母 和 数字 以 及 下 面 的 ASCII 标 点 字符 将 不 会 编码 : 








-_ lt() 











由 于 encodeURI(O) 的 意图 是 编码 完整 的 URI， 因 此 下 面 这 些 在 URI 中 
有 特殊 含义 的 ASCIH 标 点 字符 也 不 会 被 转 义 : 





;/?:@&=+$,# 





uri 中 的 其 他 字符 将 被 转换 为 对 应 的 UTF-8 编 码 ， 并 将 结果 的 一 、 二 





或 三 个 字 节 编码 为 一 个 %xx 格 式 的 十 六 进 制 转 义 序列 。 在 这 种 编码 机 制 
中 ，ASCII 字 符 将 被 莹 换 为 一 个 单独 的 %xx 转 义 序列 ， 编 码 在 \u0080~ 
\u07ff 之 间 的 字符 将 被 蕉 换 为 两 个 转 义 序列 ， 其 他 所 有 的 十 六 位 的 
Unicode 字 符 则 将 被 蔡 换 为 三 个 转 义 序列 。 


使 用 这 个 方法 来 编码 URI 时 ， 必 须 确保 该 URI 的 组 件 ( 如 查询 字符 
串 ) 都 个 包 合 如 “2 和 “党 "等 的 URI 分 隔 字符 。 如 果 这 些 组 件 必 须 包 舍 这 
类 字符 ， 则 应 该 使 用 encodeURIComponent0 来 对 每 个 组 件 进行 单独 编 
仁 。 


decodeURIO 是 这 个 方法 的 逆 方 法 。 在 ECMAScript 第 3 版 之 前 ， 可 以 
使 用 escape() 和 unescape() 方 法 (现在 这 两 个 方法 已 弃 用 ) 来 执行 类 似 的 
编码 和 解码 。 


示例 








// 返 回 http://www.isp.com/app.cgi?arg1=1&arg2=he11o%20wor1d 
encodeURI("http://www.isp.com/app.cgi?arg1i=1&arg2=hello world"); 
encodeURI("\u900a9");// 版 权 字符 将 编码 为 %C2%A9 





参阅 


decodeURI()、decodeURIComponent()、encodeURIComponent()、 
escape()、unescape() 


encodeURIComponent() 
转 义 URI 组 件 中 的 字符 
概要 
encodeURIComponent(s) 
参数 


一 个 包含 URI 一 部 分 或 其 他 每 编码 文本 的 字符 串 。 


返回 

s 的 一 个 副本 ， 某 些 字符 已 蔡 换 为 十 六 进 制 转 义 序列 。 

异常 

URIError 

表示 s 包 含 非法 的 Unicode 代 理 项 对 ， 不 能 编码 。 

描述 

encodeURIComponentO 是 一 个 全 局 函数 ， 返 回 它 的 参数 s 的 一 个 编 


人 码 后 的 副本 。ASCII 字 母 和 数字 以 及 下 面 这 些 ASCII 标 点 字符 将 不 会 编 
伍 : 








—!~*"() 





所 有 其 他 字符 ， 包 括 如 “/”、“:” 以 及 只 "等 用 于 分 隔 URI 的 多 个 组 件 
的 标点 字符 ， 都 将 被 蔡 换 为 一 个 或 多 个 十 六 进 制 的 转 义 序列 。 关 于 编码 
机 制 的 描述 可 参阅 encodeURI()。 


注意 encodeURIComponent() 和 encodeURIO 之 间 的 差别 : 
encodeURIComponent() 假 设 它 的 参数 是 URI 的 一 部 分 (如 协议 、 主 机 
名 、 路 径 或 查询 字符 串 ) 。 因 此 ， 它 将 那些 用 于 分 隔 URI 不 同 部 分 的 标 
点 字符 也 转 义 了 。 


示例 




















encodeURIComponent ("hello wor1d?");// 返 回 heL1o%20wor1d%3F 





参阅 


decodeURI()、decodeURIComponent()、encodeURI()、escape()、 
unescapel() 


Error 


一 个 一 般 性 的 异常 

对 象 一 错误 

构造 阔 数 

new Error() 

new Error(message) 

参数 

message 

一 条 可 选 的 错误 消 恩 ， 用 于 提供 关于 该 寞 常 的 细节 。 

返回 

一 个 新 构建 的 Error 对 象 。 如 果 指 定 message 参 数 ， 则 该 Error 对 象 将 
把 它 用 做 它 的 message 属 性 的 值 ， 其 他 情况 下 ， 它 将 使 用 一 个 预定 义 的 
默认 字符 串 作为 该 属性 的 值 。 当 不 使 用 new 操 作 符 ， 直 接 将 Error() 构 造 
函数 像 一 个 函数 一 样 调用 时 ， 它 的 行为 和 带 new 操 作 符 调 用 时 一 样 。 

属性 





message 


提供 关于 该 异 稼 的 细节 的 一 条 错误 消息 。 这 个 属性 的 值 为 传 给 构造 
男 数 的 字符 串 或 一 个 预定 义 的 默认 字符 串 。 








Namne 


一 个 指定 该 异常 的 类 型 的 字符 串 。 对 Error 类 和 和 它 所 有 的 子 类 而 言 ， 
这 个 属性 指定 了 用 于 创建 该 实例 的 构造 函数 的 名 字 。 


方法 








toString() 


返回 一 个 表示 该 Error 对 象 的 预定 义 字 符 串 。 
描述 


Error 类 的 实例 表示 的 错误 或 异常 通常 与 throw 和 try/catch 语 句 一 起 使 
用 。name 属 性 指明 该 异常 的 类 型 ，message 属 性 则 提供 了 关于 该 异常 的 
人 类 可 读 的 细节 。 


JavaScript 解 释 器 永远 不 会 直接 抛 出 Error 对 象 ， 它 只 会 抛 出 Error 的 
某 个 子 类 的 实例 ， 如 SyntaxError 或 RangeError。 在 自己 的 代码 中 ， 抛 出 
Error 对 象 来 发 出 异常 信号 可 能 更 方便 ， 或 者 可 以 简单 地 使 用 一 个 原始 字 
符 串 或 数值 来 抛 出 一 条 错误 消息 或 一 个 错误 代码 。 


注意 ， 虽 然 ECMAScript 标 准 为 Error 类 定义 一 个 toString() 方 法 〈 并 
且 Error 的 所 有 子 类 都 继承 了 这 个 方法 ) ， 但 它 并 不 要 求 这 个 toString0 方 
法 返回 的 字符 串 包含 message 属 性 的 内 容 。 因 此 ， 不 要 期 望 toString() 方 
法 会 将 一 个 Error 对 象 转换 为 一 个 有 意义 的 、 人 类 可 读 的 字符 串 。 同 用 户 
显示 错误 消息 时 ， 应 该 显 式 地 使 用 该 Error 对 象 的 name 及 message 属 性 。 











示例 


可 以 像 下 面 这 样 发 出 异常 信号 : 








function factorial(x){ 
if(x=0)throw new Error("factorial:x must be>=0"); 
if(x==1)return 1;else return x*factorial(x-1); 


} 





如 果 捕 获 一 个 异常 ， 则 可 以 使 用 类 似 下 面 的 代码 向 用 户 显 示 〈( 这 儿 
使 用 客户 端的 Window.alert() 方 法 ) : 





try{&*(&&/* 这 儿 将 抛 出 一 个 异常 */》 
catch(e)t{ 
if(e instanceof Error){// 它 是 Error 或 其 子 类 的 实例 吗 ? 
alert(e.name+":"+e.message); 

} 

} 


























参阅 


EvalError、 RangeError、ReferenceFError、SyntaxError、TypeError、 
URIError 


Error.message 

人 类 可 读 的 错误 消息 

概要 

error.message 

描述 

Error 对 象 〈 或 Error 的 任何 子 类 的 实例 ) 的 message 属 性 用 于 包含 一 
个 人 类 可 读 的 字符 串 ， 提 供 了 关于 发 生 的 错误 或 异常 的 细节 。 如 果 问 
Error() 构 造 函 数 传 入 message 参 数 ， 则 该 参数 将 会 是 这 个 message 属 性 的 
值 。 如 果 没 有 传 入 message 参 数 ， 则 Error 对 象 的 这 个 属性 将 继承 预定 义 
的 默认 值 〈 可 能 是 空 字符 串 ) 。 
Error.name 

错误 的 类 型 

概要 

error.name 

描述 

Error 对 象 〈 或 Error 的 任何 子 类 的 实例 ) 的 name 属 性 定义 发 生 的 错 
误 或 异常 的 类 型 。 所 有 Error 对 象 都 从 它们 的 构造 函数 继承 这 个 属性 。 这 


个 属性 的 值 和 它们 的 构造 函数 的 名 字 相 同 。 也 就 是 说 ，SyntaxError 对 象 
的 name 属 性 为 "SyntaxError"，EvalError 对 象 的 name 属 性 为 "EvalError"。 





Error.toString() 


将 一 个 Error 对 象 转 为 字符 串 


重 写 Object.toString() 

概要 

error.toString() 

返回 

一 个 根据 实现 预定 义 的 字符 串 。 除 了 它 应 该 是 一 个 字符 串 外 ， 


ECMAScript 标 准 化 没有 指定 这 个 方法 的 返回 值 的 任何 信息 。 值 得 注意 
的 是 ， 返 回 的 字符 串 并 不 要 求 包含 错误 名 或 错误 消 妃 。 














eSCape() 
己 弃 用 
编码 一 个 字符 串 
概要 
escape(s) 
参数 
s 
待 “ 转 义 ”或 编码 的 字符 串 。 
返回 


. s 的 一 个 编码 后 的 副本 ， 其 中 茶 些 字符 已 替换 为 十 六 进 制 转 义 序 
列 。 


描述 


escape(0 是 一 个 全 局 函数 。 它 返回 一 个 包含 s 的 一 个 已 编码 版 本 的 新 
字符 串 。 字 符 串 本 里 并 未 修改 。 


在 escape() 返 回 的 字符 串 中 ，s 中 非 ASCII 字 母 、 数 字 以 及 标点 字符 





@ .和 /的 所 有 字符 都 已 蔡 换 为 %xx 或 %u xxxx( 其 中 x 为 
二 个 十 天 进 和 数字 ) 格式 的 转 义 序列 。\u0000~u0off 的 Unicode 字 符 蔡 
换 为 %xx 转 义 序列 ， 其 他 Unicode 字 符 则 将 替换 为 %u xxxx 序 列 。 


可 使 用 unescape() 函 数 来 解码 由 escape() 编 码 的 字符 串 。 

虽然 escape0 〇 函数 在 第 1 版 ECMAScript 中 成 为 标准 ， 但 在 第 3 版 
ECMAScript 中 弃 用 并 移 除 它 。ECMAScript 的 各 种 实现 大 多 还 支持 这 个 
方法 ， 但 这 并 不 是 必需 的 。 建 议 使 用 encodeURIO 和 
encodeURIComponent() 来 代 蔡 escape()。 


示例 








escape("Hello World!");// 返 回 "Hello%20wWor1d%21" 





参阅 

encodeURI()、encodeURIComponent() 
eval() 

执行 一 段 字符 串 中 的 JavaScript 代 码 

概要 

eval(code) 

参数 

code 


含 待 求 值 的 JavaScript 表 达 式 或 待 执 行 的 JavaScript 语 句 的 字符 


返回 
求 值 后 的 代码 的 值 ， 如 果 存 在 对 应 的 值 的 话 。 


已 A 
开 吊 


如 果 code 不 是 合法 的 JavaScript 代 码 ， 则 eval0 将 抛 出 一 个 
SyntaxError。 如 果 在 对 code 求 值 的 过 程 中 发 生 了 错误 ， 则 eval() 将 传播 这 
个 错误 。 


描述 


eval0 是 一 个 用 于 执行 一 段 JavaScript 代 码 字符 串 的 全 局 方法 。 如 果 
code 包 含 一 个 表达 式 ， 则 eval() 将 对 该 表达 式 求 值 并 返回 这 个 值 。 (一 
些 表 达 式 (如 看 起 来 像 语句 的 对 象 和 函数 直接 量 ) 在 传 入 evalO 时 必须 
包含 在 圆 括号 中 以 消除 多 义 性 。) 如果 code 包 含 一 条 或 多 条 JavaScript 语 
人 句 ， 则 eval0) 将 执行 这 些 语 句 ， 并 由 最 后 一 个 语句 返回 对 应 值 。 如 果 
code 不 返回 任何 值 ， 则 eval() 将 返回 undefined。 最 后 ， 如 果 code 抛 出 异 
常 ， 则 eval() 将 把 这 个 异常 传递 给 调用 函数 。 


在 ECMAScript 3 和 ECMAScript 5 中 ，eval() 的 行为 不 同 ， 甚 至 在 
ECMAScript 5 中 ， 在 严格 和 非 严 格 模式 下 它 的 行为 也 不 相同 ， 为 了 解释 
这 些 差异 ， 需 要 一 个 小 的 额外 话题 。 如 果 一 门 编程 语言 将 eval0 定 义 为 
一 个 操作 符 而 不 是 一 个 函数 ， 那 么 实现 高 效 的 解释 器 会 容易 很 多 。 
JavaScript 的 evalO 是 一 个 函数 ， 出 于 效率 的 考虑 ， 它 在 直接 、 类 似 操 作 
符 一 样 调用 和 非 直接 调用 eval0 之 间 做 了 区 分 。 直 接 调用 是 指 直接 使 用 
标识 符 eval0)， 如 果 去 掉 圆 括号 ， 看 起 来 eval0 耽 像 一 个 操作 符 。 其 他 形 
式 的 eval0 的 调用 都 是 非 直 接 调 用 。 如 果 将 eval0 函 数 赋值 给 一 个 名 字 不 
同 的 变量 ， 并 通过 该 变量 调用 它 ， 这 也 是 一 种 非 直 接 调用 。 类 似 地 ， 如 
果 将 eval0 作 为 全 局 对 象 的 一 个 方法 来 调用 ， 它 也 是 一 种 非 直接 调用 。 


根据 直接 和 非 直接 调用 的 差别 ， 可 以 将 eval0 的 行为 归纳 如 下 : 
直接 调用 ，ES3 及 ES5 非 严格 模式 


eval0 在 当前 词法 作用 域内 对 code 求 值 。 如 果 code 包 含 变 量 或 函数 声 
明 ， 则 将 在 本 地 作用 域 中 定义 它们 。 这 是 eval0 的 普通 用 例 。 


非 直接 调用 ，ES3 


ECMAScript 3 标准 化 允许 解释 器 对 任何 eval0 的 非 直接 调用 抛 出 一 
个 EvalError。ES3 的 实现 实际 上 一 般 没 有 这 么 做 ， 但 应 该 避免 非 直 接 调 

















非 直 接 调用 ，ES5 


ECMAScript 5 中 ， 对 eval0 的 非 直接 调用 不 再 抛 出 EvalError， 但 code 
必须 在 全 局 作用 域 中 求 值 ， 当 前 词法 作用 域内 的 任何 本 地 变量 都 将 忽 
略 。 在 ES5 中 ， 可 以 这 样 赋值 ，"var geval=eval;"， 然 后 使 用 geval() 来 在 
全 局 作用 域 中 对 code 求 值 。 


直接 或 非 直 接 调 用 ， 严 格 模式 


在 严格 模式 中 ，c ode 中 定义 的 变量 和 函数 将 在 一 个 私有 作用 域 中 定 
义 ， 这 个 私有 作用 域 仅 在 调用 该 eval0 期 间 有 效 。 这 意味 着 ， 在 严格 模 
式 下 直接 调用 eval0 将 不 能 改变 词法 作用 域 ， 在 严格 模式 下 的 非 直接 调 
用 不 能 更 改 全 局 作用 域 。 当 对 eval0 的 调用 在 严格 模式 下 ， 或 者 如 果 
code 以 "use strict" 指 令 开 始 时 ， 这 些 规则 将 生效 。 


在 JavaScript 这 门 语言 中 eval0 提 供 了 非常 强大 的 功能 ， 但 实际 项 目 
中 它 使 用 的 不 多 。 常 用 的 场景 包括 编写 作为 递归 的 JavaScript 解 释 器 的 程 
序 ， 以 及 编写 动态 生成 并 判断 JavaScript 代 码 的 程序 。 


对 于 大 多 数 期 望 参数 传 入 字符 吕 参 数 的 图 数 来 讲 ， 在 执行 真正 的 远 
辑 时 ， 不 管 传 入 的 参数 是 什么 类 型 都 会 首先 转换 为 字符 串 。eval() 则 不 
会 这 样 ， 如 有 果 传 入 的 参数 不 是 字符 串 原 始 值 ， 它 会 直接 返回 这 个 值 。 
此 ， 当 传 入 一 个 字符 串 对 象 给 eval0 时 就 需要 非常 小 心 了 ， 这 时 应 当 传 
入 一 个 字符 串 原始 值 才 对 。 


示例 














eval("1+2");// 返 回 3 
// 这 段 代码 使 用 客户 端 JavaScript 方 法 来 提示 用 户 输 入 一 个 表达 式 ， 
// 然 后 向 用 户 显 示 它 的 求 值 结果 

// 更 多 细节 可 参阅 客户 端 方法 Window.alert() 和 Window.prompt() 
try{ 

alert(" 结 果 : "+eval(prompt(" 请 输入 一 个 表达 式 : ",""))); 







































































catch(exception){ 
alert(exception); 


} 


EvalError 


当 eval0 使 用 错误 时 抛 出 
对 象 错误 ,EvalError 
构造 函数 

new EvalError() 

new EvalError(message) 
参数 

message 


一 条 可 选 的 错误 消 轧 ， 提 供 了 关于 该 异常 的 细节 。 如 果 指 定 ， 这 个 
参数 将 用 做 这 个 EvalError 对 象 的 message 属 性 的 值 。 
返回 


一 个 新 构造 的 EvalError 对 象 。 如 果 指 定 message 参 数 ， 则 Error 对 象 
将 把 它 用 做 其 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 预定 义 的 默 
认 字 符 串 作为 该 属性 的 值 。 当 不 这 new 操 作 符 ， 像 一 个 函数 一 样 调用 
EvalError() 构 造 函 数 时 ， 它 的 行为 和 带 new 操 作 符 调用 时 一 样 。 


属性 
message 


一 条 提供 该 异常 的 细节 的 错误 消息 。 这 个 属性 的 值 为 传 入 构造 函数 
的 字符 串 或 者 自 定义 实现 的 默认 字符 串 。 更 多 细节 可 参阅 


Error.message。 














Namne 


一 个 指定 该 异常 类 型 的 字符 串 。 所 有 EvalError 对 象 的 这 个 属性 都 继 
承 自 值 "EvalError"。 


描述 


当 全 局 函数 eval0 以 任意 其 他 名 字 调 用 时 ， 可 能 会 抛 出 EvalError 类 
的 一 个 实例 。 关 于 如 何 调用 这 个 函数 的 限制 ， 可 参阅 eval()。 关 于 异常 
的 抛 出 和 捕获 的 细节 ， 可 参阅 Error。 

参阅 

Error、 Error.message、 Error.name 
Function 

JavaScript 函 数 

对 象 - 函数 

概要 





function functionname(argument_name_1list )// 函 数 定义 语句 


{ 
body 
} 





function(argument_name_list){body}// 匿 名 函数 直接 量 
functionname(argument_value_1List)// 函 数 调用 

















new Function(argument_names...,body) 





参数 
argument_names... 


任意 多 个 字符 串 参 数 ， 每 个 字符 串 命 名 要 创建 的 Function 对 象 的 一 
个 或 多 个 参数 。 


body 
指定 函数 体 的 字符 串 。 它 可 以 含有 任意 多 条 JavaScript 语 句 ， 这 些 语 


句 之 间 用 分 号 隔 开 ， 并 且 可 以 引用 任意 参数 名 ， 这 些 参数 名 由 前 面 提 到 
的 传 给 构造 函数 的 参数 指定 。 





返回 
新 创建 的 Function 对 象 。 调 用 该 函数 会 执行 由 body 指 定 的 JavaScript 


异常 
SyntaxError 


表示 在 body 参 数 或 某 个 argument_names 参 数 中 存在 JavaScript 语 法 错 


属性 

arguments[ | 

传递 给 函数 的 参数 数组 。 不 推荐 使 用 。 
caller 


调用 该 函数 的 Function 对 象 的 引用 。 如 果 是 全 局 调用 ， 则 该 属性 为 
null。 不 推荐 使 用 。 


length 
声明 函数 时 指定 的 形 参 个 数 。 
prototype 


一 个 给 构造 函数 用 的 对 象 。 用 构造 函数 创建 的 所 有 对 象 会 共享 
prototype 对 象 定义 的 属性 和 方法 。 


方法 
applyQ) 
将 函数 作为 指定 对 象 的 方法 来 调用 。 传 递 给 它 的 是 指定 的 参数 数 


bind0) 


返回 一 个 新 函数 。 通 过 可 选 的 指定 参数 ， 作 为 指定 对 象 的 方法 调用 
该 方法 。 


call0) 

将 函数 作为 指定 对 象 的 方法 来 调用 。 传 递 给 它 的 是 指定 的 参数 。 
toString() 

返回 函数 的 字符 串 表 示 。 

描述 


函数 是 JavaScript 的 一 种 基本 数据 类 型 。 第 8 章 解 释 了 如 何 定 义 和 使 
用 函数 。 第 9 章 介 绍 了 方法 、 构 造 函 数 以 及 函数 的 prototype 属 性 等 相关 
主题 。 要 了 解 详 细 情 况 ， 请 阅读 这 两 章 。 注 意 ， 虽 然 可 以 使 用 这 里 介绍 
的 Function(0) 构 造 函 数 来 创建 函数 对 象 ， 但 这 样 做 效率 不 高 。 在 大 部 分 
情况 下 ， 推 荐 使 用 函数 定义 语句 或 函数 直接 量 来 定义 函数 。 


在 JavaScript ”1.1 及 后 续 版 本 中 ， 函 数 体会 自动 定义 一 个 局 部 变量 
arguments， 指 代 Arguments 对 象 。 该 对 象 是 一 个 值 数组 ， 元 素 是 传递 给 
函数 的 参数 值 。 不 要 将 这 一 属性 与 上 面 介绍 的 弃 用 的 arguments[] 属 性 相 
混 请 。 详 见 Arguments 的 参考 页 。 


参阅 














Arguments、 第 8 六 、 第 9 章 
Function.apply() 

将 函数 作为 一 个 对 象 的 方法 调用 

概要 


function.apply(thisobj,args) 


参数 


thisob}) 


调用 function 的 对 象 。 在 函数 体 中 ，thisobj 是 关键 字 this 的 值 。 如 果 
这 个 参数 为 null， 则 使 用 全 局 对 和 象 。 


args 
一 个 值 数组 。 它 的 元 素 是 传递 给 function 的 参数 值 。 
返回 


调用 函数 function 的 返回 值 。 
异 币 
TypeError 


如 果 调 用 该 函数 的 对 象 不 是 函数 ， 或 者 参数 args 不 是 数组 和 
Arguments 对 象 ， 则 抛 出 该 异常 。 


描述 


apply0 将 指定 的 函数 function 作 为 对 象 thisobj 的 方法 来 调用 ， 并 传 入 
在 args 数 组 中 包含 的 参数 。 它 返回 的 是 调用 function 的 返回 值 。 在 函数 体 
内 ， 关 键 字 this 指 代 thisobj 对 象 。args 人 参数 必须 是 数组 或 Arguments 对 
象 。 如 果 想 单独 指定 传递 给 函数 的 参数 ， 而 不 是 通过 数组 元 素来 指定 参 
数 ， 可 以 使 用 Function.call0 方 法 。 


示例 














// 将 默认 的 Object ,toString() 应 用 在 一 个 对 象 上 ， 

// 以 便 覆盖 该 对 象 上 的 toString ( ) 方 法 。 注 意 没 传 参数 

object,.prototype.toString.apply(o);// 用 apply() 调 用 Math.max( ) 方 法 来 查找 数组 中 的 最 大 元 素 
// 注 意 在 这 种 情况 下 ， 第 一 个 参数 无 所 谓 

var data=[1,2,3,4,5,6,7,8]; 

Max.max.apply(null, data); 






























































参阅 


Function.call() 


Function.arguments| | 


己 弃 用 
传递 给 函数 的 参数 
概要 


function.arguments[j] 
function.arguments.length 
描述 


Function 对 象 的 arguments 属 性 是 一 个 参数 数组 ， 它 的 元 素 是 传递 给 
阔 数 的 参数 。 它 只 在 函数 执行 时 才 定 义 。arugments.length 表 示 数 组 中 的 
元 素 个 数 。 


不 推荐 使 用 该 属性 ， 赞 成 使 用 Arguments 对 象 。 在 新 的 JavaScript 代 
码 中 ， 永 远 不 要 使 用 它 。 


参阅 

Arguments 
Function.bind() 

ECMAScript 5 

返回 一 个 作为 方法 调用 的 函数 

概要 

function.bind(o) 


function.bind(o,args...) 


参数 


O 


要 绑 定 到 函数 上 的 对 象 。 


args... 

要 绑 定 到 函数 上 的 零 个 或 多 个 参数 值 。 

返回 

一 个 新 阔 数 。 该 函数 会 当做 o 的 方法 来 调用 ， 并 癌 它 传 入 args 参 数 。 
描述 


bind0 方 法 返回 一 个 新 函数 ， 该 函数 会 当做 对 象 o 的 方法 来 调用 。 传 
递 给 该 函数 的 参数 由 两 部 分 组 成 ， 一 部 分 是 传递 给 bind0 的 args 数 组 指定 
的 参数 ， 剩 下 的 是 传 给 这 个 新 函数 的 所 有 值 。 

示例 


假设 f 是 一 个 函数 ， 我 们 像 下 面 这 样 调用 bind() 方 法 : 





var g=f.bind(o,1,2); 





这 样 ，g 就 一 个 新 函数 了 。 调 用 g(3) 等 价 于 : 





f.call(o,1,2,3); 





参阅 
Function.apply()、Function.call()、8.7.4 市 
Function.call() 


将 函数 作为 对 象 的 方法 调用 
概要 


function.call(thisobj,args.…) 
参数 
thisob}) 


调用 function 的 对 象 。 在 函数 体 中 ，thisobj 是 关键 字 this 的 值 。 如 果 
这 个 参数 为 null， 则 使 用 全 局 对 象 。 


args... 

任意 多 个 参数 ， 它 们 会 作为 参数 传递 给 function。 

返回 

调用 函数 function 的 返回 值 。 

异常 

TypeError 

如 果 调 用 该 函数 的 对 象 不 是 函数 ， 则 抛 出 该 异常 

描述 

call0 将 指定 的 函数 function 作 为 对 象 thisobj 的 方法 来 调用 ， 并 传 入 参 
数列 表 中 thisobj 之 后 的 参数 。 返 回 的 是 调用 function 的 返回 值 。 在 函数 体 
内 ， 关 键 字 this 指 代 thisobj 对 象 ， 如 果 thisobj 为 null， 则 使 用 全 局 对 象 。 


如 果 想 用 数组 来 指定 传递 给 函数 的 参数 ， 请 使 用 Function.apply0 方 
法 。 





示例 














// 将 默认 的 0bject toString() 应 用 在 一 个 对 象 上 
// 以 便 覆 盖 该 对 象 上 的 toString( ) 方 法 。 注意 没 传 参数 
Object .prototype.toString().call(o); 




















参阅 


Function.apply() 


Function.caller() 
己 弃 用 ; 在 严格 模式 下 未 定义 
调用 当前 函数 的 函数 
概要 
function.caller 
描述 


在 JavaScript 的 早期 版 本 中 ，Function 对 象 的 caller 属 性 是 对 调用 当前 
函数 的 函数 的 引用 。 


如 果 函 数 是 在 JavaScript 程 序 的 全 局 作用 域 中 调用 的 ， 则 caller 的 值 
为 null。 该 属 La 函数 内 部 使 用 。《〈 即 ， 只 有 在 执行 函数 时 ， 才 定 
义 caller 属 性 。 


Function.caller 属 性 不 属于 ECMAScript 标 准 ， 在 遵守 该 标准 的 实现 
中 ， 该 属性 不 是 必需 的 。 不 应 该 再 使 用 它 。 





Function.length() 

声明 的 参数 的 个 数 

概要 

function.length 

描述 

函数 的 length 属 性 指定 定义 函数 时 所 声明 的 形 参 的 个 数 。 实 际 调用 
函数 时 ， 传 入 的 参数 个 数 可 以 比 函数 的 length 属 性 多 ， 也 可 以 比 它 少 。 


不 要 将 Function 对 象 和 Arguments 对 象 的 length 属 性 混淆 ， 后 者 指定 的 古 
实际 传递 给 函数 的 参数 个 数 。 示 例 请 阅读 Arguments.length 参 考 页 。 





参阅 

Arguments.length 
Function.prototype() 

对 象 类 的 原型 

概要 

function.prototype 

描述 

prototype 属 性 会 在 函数 作为 构造 函数 时 使 用 。 它 指 代 作 为 整个 对 象 
类 的 原型 对 象 。 用 构造 函数 创建 的 任何 对 象 都 会 继承 prototype 对 象 引 用 
的 对 象 的 所 有 属性 。 


构造 函数 、prototype 属 性 和 JavaScript 中 的 类 定义 ， 请 阅读 第 9 章 中 
的 完整 讨论 。 


参阅 

第 9 章 
Function.toString() 

将 函数 转换 成 字符 串 

概要 

function.toString() 

返回 


表示 函数 的 字符 串 。 
名 


TypeError 

如 果 调 用 该 函数 的 对 象 不 是 函数 ， 则 抛 出 该 异常 。 

描述 

Function 对 象 的 toStringO 方 法 能 将 函数 转换 为 字符 串 ， 但 其 功能 与 
有 具体 实现 相关 。 在 大 部 分 实现 中 ， 比 如 Firefox 和 匡 中 的 实现 ， 该 方法 返 
回 的 字符 串 是 有 效 的 JavaScript 代 码 包含 关键 字 function、 人 参数 列表 
和 函数 体 的 完整 代码 等 。 在 这 些 实现 中 ，toString() 方 法 的 输出 是 全 局 
eval0) 函 数 的 有 效 输 入 。 然 而 ， 该 规范 并 不 需要 这 一 行为 ， 因 此 要 避免 
依赖 该 方法 。 
Global 

全 局 对 象 

对 象 - 全 局 


概要 














this 
全 局 属性 


全 局 对 象 不 是 一 个 类 ， 所 以 下 面 列 举 的 全 局 属性 在 自己 名 称 下 有 独 
立 的 参考 页 。 也 就 是 说 ， 在 "undefined" 名 称 下 可 以 找到 undefined 属 性 的 
详细 信息 ， 而 不 是 在 "Global.undefined" 下 寻找 。 注 意 ， 所 有 全 局 变量 也 
都 是 全 局 对 象 的 属性 : 





Infinity 

表示 正 无 穷 大 的 数值 。 
NaN 
表示 不 是 数值 的 值 。 


Undefined 


undefind 值 。 
全 局 函数 
全 局 对 象 是 一 个 对 象 ， 不 是 类 。 下 面 列举 的 全 局 函数 不 是 任何 对 象 


的 方法 ， 它 们 的 参考 页 出 现在 各 上 自 的 函数 名 下 。 例 如 ， 在 "parseIntO" 下 
可 以 找到 parseIntO 函 数 的 详细 信息 ， 而 不 是 到 "Global.parseIntO0" 下 碍 
找 : 





decodeURI() 

解码 使 用 encodeURIO 转 义 的 字符 串 。 
decodeURIComponent() 

解码 使 用 encodeURIComponent0 转 义 的 字符 串 。 
encodeURI() 

通过 转 义 特定 字符 对 URI 编 码 。 
encodeURIComponent() 

通过 转 义 特定 字符 对 URI 的 组 成 部 分 编码 。 
escape() 

用 转 义 序列 蔡 换 特 定 字 符 来 对 字符 串 编 码 。 
eval0) 


执行 JavaScript 代 码 字 符 串 ， 返 回 结 








isFinite() 
判断 一 个 值 是 否 无 穷 大 。 


isNaN() 





判断 一 个 值 是 否 是 非 数 值 。 

parseFloat() 

从 字符 串 中 解析 数值 。 

parseInt() 

从 字符 串 中 解析 整数 。 

unescapel() 

解码 使 用 escapeO 编 码 的 字符 串 。 

全 局 对 象 

除了 上 面 列 举 的 全 局 属性 和 全 局 函数 ， 全 局 对 象 还 定义 一 些 属性 ， 


。 来 引用 JavaScript 预 定义 的 所 有 其 他 对 象 。 这 些 属 性 大 部 分 都 是 构造 函 





Array 

Array0 构 造 函 数 。 
Boolean 
Boolean() 构 造 函 数 。 
Date 

Date() 构 造 函 数 。 
Error 

Error() 构 造 函 数 。 
EvalError 


EvalErrorO 构 造 函 数 。 


Function 

Function0 构 造 函 数 。 
JSON 

引用 一 个 对 象 ， 访 对象 定义 了 解析 和 序列 化 JSON 的 函数 。 
Math 

引用 一 个 对 象 ， 该 对 象 定义 了 数学 函数 。 
Number 

Number0O 构 造 函 数 。 

Object 

Object() 构 造 函 数 。 

RangeError 

RangeError0O 构 造 函 数 。 

ReferenceError 

ReferenceErrorO 构 造 函 数 。 

RegExp 

RegExp0O 构 造 函 数 。 

String 

String() 构 造 函 数 。 

SyntaxError 


SyntaxError(0) 构 造 函 数 。 


TypeError 

TypeError() 构 造 函 数 。 
URIError 
URIError() 构 造 函 数 。 
描述 


全 局 对 象 是 一 个 预定 义 对 象 ， 用 做 JavaScript 中 全 局 属性 和 全 局 函数 
的 占 位 符 。 通 过 全 局 对 象 ， 可 以 访问 所 有 其 他 预定 义 的 对 象 、 函 数 和 属 
性 。 全 局 对 象 不 是 任何 对 象 的 属性 ， 因 此 它 没 有 名 字 (之 所 以 选择 
Global 作 为 该 参考 页 的 标题 ， 只 是 为 了 方便 组 织 ， 并 不 是 说 全 局 对 象 的 
名 字 为 Global) 。 在 全 局 JavaScript 代 码 中 ， 可 以 用 关键 字 this 来 引用 全 
局 对 象 。 但 通常 不 必用 这 种 方式 来 引用 全 局 对 象 ， 因 为 全 局 对 象 是 作用 
域 链 的 头 ， 这 意味 着 所 有 不 合格 的 变量 和 函数 名 都 会 作为 全 局 对 象 的 属 
性 来 查询 。 例 如 ， 当 JavaScript 代 码 引 用 parseIntO 函 数 时 ， 它 引用 的 束 是 
全 局 对 象 的 parseInt 必 性。 全 局 对 象 是 作用 域 链 的 头 ， 还 意味 着 在 全 局 
JavaScript 代 码 中 声明 的 所 有 变量 都 将 成 为 全 局 对 象 的 属性 。 


全 局 对 象 只 是 一 个 对 象 ， 而 不 是 类 。 不 存在 Global0 构 造 函 数 ， 也 
就 无 法 实例 化 一 个 新 的 全 局 对 象 。 


当 JavaScript 代 码 谍 入 一 个 特定 环境 时 ， 全 局 对 象 通用 具有 与 该 特定 
环境 相关 的 额外 属性 。 实 际 上 ，ECMAScript 标 准 没 有 规定 全 局 对 象 的 
类 型 ，JavaScript 的 实现 或 谍 入 环境 可 以 使 用 任意 类 型 的 对 象 来 作为 全 局 
对 象 ， 只 要 该 对 象 定 义 了 这 里 列举 的 基本 属性 和 方法 。 


例如 ， 在 客户 端 JavaScript 中 ， 全 局 对 象 是 Window 对 象 ， 表 示 运 行 
JavaScript 代 码 的 Web 浏 览 器 窗口 。 











示例 


在 核心 JavaScript 中 ， 全 局 对 象 的 预定 义 属 性 都 是 不 可 枚 举 的 ， 因 此 
可 以 用 fowin 循 环 来 列 出 所 有 隐 式 或 显 式 声明 的 全 局 变量 ， 代 人 码 如 下 : 








var variables="",， 
for(var name in this){ 


variables+=name+"\n",; 





参阅 

第 四 部 分 的 Window; 第 3 章 
Infinity 

表示 无 穷 大 的 数值 属性 

概要 

Infinity 

描述 


Infinity 不 是 常量 ， 它 可 以 设置 为 任意 值 ， 有 时 你 得 特别 留意 这 一 点 。 
(然而 Number.POSITIVE _INFINITY 是 常量 。) 








参阅 

isFinite()、NaN、Number.POSITIVE_INFINITY 
isFinite() 

判断 数值 是 否 有 限 

概要 

isFinite(n) 

参数 

n 


要 检测 的 数组 。 


返回 


如 果 n 是 有 限 数 〈 或 者 可 以 转换 成 有 限 数 ) ， 那 么 返回 true。 如 果 n 
是 NaN 《〈 非 数值 ) 或 是 正 / 负 无 穷 大 ， 则 返回 false。 


参阅 


Infinity、isNaN()、NaN、Number.NaN、 
Number.NEGTIVE_INFINITY、 Number.POSITIVE_ INFINITY 


isNaN() 
检查 是 否 非 数值 
概要 
isNaN(x) 
参数 
x 
要 检测 的 值 。 
返回 


如 果 x 不 是 数值 ， 或 者 是 NaN 这 个 特殊 数值 时 ， 返 回 true。 如 果 x 是 
其 他 任何 数值 ， 则 返回 false。 


描述 


"NaN" 是 "not-a-number" (不 是 数值 ) 的 缩写 。 全 局 变量 NaN 保 存 的 
是 一 个 特殊 数值 “ 即 NaN) ， 代 表 无 效 数 值 〈 比 如 0/0) 。isNaN0O 检 测 
其 参数 是 否 不 是 数值 。 如 果 x 是 数值 ， 或 者 可 以 转换 为 数值 ， 但 不 是 
NaN， 则 返回 false。 如 何 x 不 是 数值 ， 或 者 不 可 转换 为 数值 ， 或 者 等 于 
NaN， 则 返回 true。 


NaN 有 一 个 独特 的 特性 : 它 不 等 于 任何 值 ， 也 不 等 于 自己 。 因 此， 
如 果 想 专门 测试 一 个 值 是 不 是 NaN 〈 不 是 普通 意义 上 的 非 数 值 ) ， 不 要 











使 用 x===NaN: 这 会 永远 为 false。 而 应 该 使 用 x!==x: 只 有 当 x 是 NaN 
时 ， 该 表达 式 才 为 true。 


使 用 isNaN() 的 常见 场景 是 用 来 检测 parseFloat() 和 parseInt() 的 结 
以 判断 它们 是 否 为 有 效 数 值 。 


示例 





ISNaN(0);//=>false 
isNaN(0/0);//=>true 
isNaN(parseInt("3"));//=>false 
isNaN(parseInt("hello"));//=>true 
isNaN("3");//=>false 
isNaN("hello");//=>true 
isNaN(true);//=>false 
isNaN(undefined);//=>true 





参阅 
isFinite()、NaN、Number.NaN、parseFloat()、parselInt() 


JSON 
ECMAScript 5 
JSON 解 析 与 字符 串 化 
描述 


JSON 是 一 个 简单 对 象 ， 用 做 ECMAScript 5 中 全 局 函数 JSON.parse0) 
与 JSON.stringify0 的 命名 空间 。JSON 不 是 构造 函数 。 在 ECMAScript 5 之 
前 ，JSON 解 析 与 序列 化 函数 的 兼容 版 本 可 以 从 这 里 下 载 : 
http://json.org/json2.js。 


"JSON" 表 示 JavaScript Object ”Notation 〈JavaScript 对 象 标记 ) 。 
JSON 是 一 种 数据 序列 化 格式 ， 基 于 JavaScript 的 直接 量 ， 可 以 表示 null 
值 、 布 尔 值 tue 和 false、 浮 点 数 〈( 使 用 JavaScript 数 值 直接 量 ) 、 字 符 串 
(使 用 JavaScript 字 符 串 直 接 量 ) 、 数 组 值 〈 使 用 JavaScript 数 组 直接 量 
语法 ) 以 及 字符 串 到 值 的 映射 (使 用 JavaScript 对 象 直接 量 语法 ) 。 
JSON 里 不 能 表示 原始 值 undefined、 数 值 NaN 和 Infinity。JavaScript 函 








数 、 日 期 、 正 则 表达 式 和 天 和 常 错误 在 JSON 中 也 不 文 持 。 


示例 





// 深 拷贝 可 被 JSON 序 列 化 的 对 象 或 数组 
function deepcopy(o){return JSON,parse(JSON,Sstringify(o))7} 





参阅 

JSON.parse()、JSON.stringify()、6.9 节 、http://json.org 
JSON .parsel() 

ECMAScript 5 

解析 JSON 格 式 的 字符 串 

概要 

JSON.parse(s) 

JSON.parse(s,reviver) 

参数 

s 

要 解析 的 字符 串 

reviver 

用 来 转换 解析 值 的 可 选 函数 。 

返回 

一 个 对 象 、 数 组 或 原始 值 。 该 返回 值 从 是 s 中 解析 的 (有 可 能 还 被 


reviver 修 改过 ) 。 


描述 


JSON.parse0) 是 一 个 全 局 函数 ， 用 来 解析 JSON 格 式 的 字符 串 。 
常 ， 会 传 入 一 个 字符 串 参 数 ，JSON.parse0) 则 返回 该 字 人 的 
JavaScript 值 。 


可 以 使 用 可 选 参数 reviver， 在 返回 解析 值 前 ， 对 其 进行 过 滤 或 后 期 
处 理 。 如 果 指 定 了 reviver 函 数 ， 该 函数 会 为 从 s 中 解析 的 每 一 个 原始 值 
(不 是 包含 这 些 原 始 信 的 对 象 或 数组 ) 调用 一 次 。 调 用 reviver 时 带 有 两 
个 参数 。 第 一 个 参数 是 属性 名 对 象 的 属性 名 或 转换 成 字符 串 的 数组 
序号 。 第 二 个 参数 是 对 象 属性 或 数组 元 素 的 原始 值 。reviver 会 作为 包含 
原始 值 的 对 象 或 数组 的 方法 来 调用 。 在 特殊 情况 下 ， 如 果 字 符 串 s 表 示 
的 是 原始 值 而 不 是 更 常见 的 对 象 或 数组 时 ， 那 么 该 原始 值 会 存放 在 一 个 
新 创建 对 象 的 属性 中 ， 属 性 名 是 空 字符 串 。 在 这 种 情况 下 ，reviver 会 在 
这 个 新 创建 的 对 象 上 调用 一 次 ， 第 一 个 参数 是 空 字符 串 ， 第 二 个 参数 则 
是 该 原始 值 。 


reviver 函 数 的 返回 值 会 成 为 属性 的 新 值 。 如 果 reviver 返 回 第 二 个 参 
数 ， 而 该 属性 保持 不 变 。 如 果 reviver 返 回 undefined (或 根本 没有 返回 任 
何 值 ) ， 则 会 从 对 象 或 数组 中 删除 该 属性 ， 处 理 完 后 才 会 由 
JSON.parse() 返 回 给 用 户 。 


示例 
JSON.parse0) 的 大 部 分 使 用 场景 都 很 寻常 : 























var data=JSON.parse(text); 





JSON.stringify0O 函 数 会 把 Date 对 象 转换 成 字符 串 ， 可 以 使 用 reviver 
函数 再 反问 转换 回来 。 下 面 这 个 例子 还 过 滤 属 性 名 ， 并 通过 返回 
undefined 来 从 结果 对 象 中 移 除 某 些 特定 属性 : 











var data JSON.parse(text,function(name,value){// 移 除 掉 所 有 属性 名 以 下 划 线 开头 的 属性 
if(name[0]=='_')return undefined;// 如 果 value 是 ISO-8601 日 期 格式 的 字符 串 ， 则 把 它 转换 为 
































Date 


/AA\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d.\d\d\dz$/.test(value)) 
return new Date(value);// 否 则 的 话 ， 就 原样 返回 








return value 


}); 





参阅 


JSON .stringify()、6.9 节 


JSON .stringify() 
序列 化 对 象 、 数 组 或 原始 值 
概要 
JSON .stringify(0) 


JSON .stringify(o,flter) 


JSON .stringify(o,flter,indent) 


参数 

0 

要 转换 成 JSON 字 符 串 的 对 象 、 数 组 或 原始 值 。 
filter 


可 以 是 一 个 可 选 函 数 ， 用 来 在 字符 串 化 前 对 值 做 一 些 蔡 换 。 也 可 以 
古 一 个 数组 ， 包 含 那 些 需 要 字符 串 化 的 属性 名 。 


indent 


可 选 参数 。 需 要 输出 格式 化 的 可 阅读 代码 时 ， 使 用 indent 参 数 可 以 
指定 缩 进 字符 串 或 用 来 缩 进 的 空格 个 数 。 如 果 省 略 该 参数 ， 返 回 的 字符 
串 将 不 融 任 何 额外 的 空格 ， 这 是 给 编译 器 看 的 ， 很 难 直 接 阅 读 。 

返回 


JSON 格 式 的 字符 串 ， 代 表 o 的 值 ， 同 时 通过 了 filter 的 过 滤 ， 以 及 根 
据 indent 进 行 了 格式 化 。 


描述 


JSON.stringify0 将 原始 值 、 对 象 或 数组 转换 成 一 个 JSON 格 式 的 字符 
串 ， 该 字符 串 随后 可 以 被 JSON.parse0) 解 析 。 通 常 ， 调 用 该 函数 时 只 带 
一 个 参数 ， 并 返回 相应 字符 串 。 


当 带 一 个 参数 调用 JSON.stringifyO0 时 ， 且 该 参数 值 仅 包含 对 象 、 数 
组 、 字 符 串 、 数 值 、 布 尔 值 和 null 值 时 ， 字 符 串 化 的 过 程 很 直接 明了 。 
然而 ， 当 需要 字符 串 化 的 值 包 含 类 的 实例 对 象 时 ， 字 符 串 化 的 过 程 就 比 
较 复 杂 了 。 当 JSON.stringify() 过 到 和 带 有 名 为 toJSON0O) 的 方法 的 对 象 ( 或 
数组 ) 时 ， 它 会 调用 该 对 象 上 的 toJSON0O 方 法 ， 并 使 用 该 方法 的 返回 值 
而 不 是 该 对 象 本 身 来 进行 字符 串 化 。 调 用 toJSONO 时 会 传 入 一 个 字符 串 
参数 ， 该 参数 是 对 象 的 属性 名 或 数组 序号 。Date 类 定义 了 一 个 toJSON() 
方法 ， 使 用 Date.toISOString() 方 法 来 将 Date 转 换 成 字符 串 。JavaScript 的 
其 他 内 置 对 象 都 没有 定义 toJSON0 方 法 ， 不 过 可 以 为 自己 的 类 定义 对 应 
方法 。 注 意 ， 虽 然 toJSONO0 的 方法 名 有 将 对 象 转换 为 JSON 的 含义 ， 但 
实际 上 toJSON0) 方 法 可 以 不 转换 调用 对 象 : 它 的 作用 仅仅 是 返回 一 个 
值 ， 用 来 在 字符 串 化 的 过 程 中 ， 蔡 换 原 始 对 象 。 


JSON.stringify() 的 第 二 个 参数 使 得 可 以 在 字符 串 化 的 过 程 中 添加 过 
滤 操 作 。 该 可 选 参数 可 以 是 函数 或 数组 ， 这 两 种 情况 提供 了 完全 不 同 的 
过 滤 功 能 。 如 果 该 参数 是 函数 ， 则 和 它 是 一 个 replacer 函 数 ， 与 上 面 描述 
的 toJSON(0) 方 法 有 点 燃 似 。 如 果 指 定 replacer 函 数 ， 该 函数 会 在 每 一 个 需 
要 字符 串 化 的 值 上 调用 。this 指 回 定 义 该 值 的 对 象 或 数组 。replacer 函 数 
的 第 一 个 参数 是 该 对 象 中 的 对 象 属性 名 或 数组 序号 ， 第 二 个 参数 则 是 值 
本 里。replacer 函 数 的 返回 值 会 蔡 换 挥 需要 字符 串 化 的 值 。 如 果 replacer 
函数 返回 undefined 或 没有 任何 返回 值 ， 则 会 在 字符 串 化 时 忽略 该 值 〈 以 
及 它 的 数组 元 素 或 对 象 属性 ) 。 


如 于 JSON.stringifyO 的 第 二 个 参数 是 一 个 字符 串 数 组 〈 或 数值 数组 
一 一 数值 会 转换 为 字符 串 ) ， 该 数组 会 作为 对 象 属性 名 。 属 性 名 不 在 该 
数组 中 的 任何 对 象 属性 在 字符 串 化 时 都 会 包 略 掉 。 此 外 ， 返 回 的 字符 串 
中 属性 的 顺序 ， 会 与 该 数组 中 的 属性 名 顺序 一 致 。 


JSON.stringify0) 返 回 的 通常 是 不 带 任 何 空格 或 换行 符 的 给 机 器 阅读 
的 字符 串 。 如 果 想 输出 可 读 性 更 好 的 字符 串 ， 需 要 指定 第 三 个 参数 。 如 
果 指 定 的 第 三 个 参数 是 介 于 1 一 10 之 间 的 数值 ， 则 JSON.stringify0O) 会 在 每 
一 “层级 ”的 输出 插入 换行 符 和 指定 个 数 的 空格 。 如 果 指 定 的 是 非 空 字 符 
串 ， 则 JSON.stringify0 会 插入 换行 符 和 该 字符 串 《〈 只 取 前 10 个 字符 ) 来 
































示例 








// 基 本 序列 化 

var text=JSON.stringify(data);// 精 确 指 定 要 序列 化 的 字段 

var text=JSON.stringify(address,["city","state", "country"]);// 指 定 replacer 函 数 ， 以 
使 得 可 序列 化 RegExp 对 象 

var text=JSON.stringify(patterns,function(key,value)t{ 

if(value.constructor===RegExp)return value.toString(); 

return value; 

} ) ;// 或 使 用 下 面 这 种 方式 来 实现 同样 的 蔡 换 : 

RegExp.prototype.toJSON=function(){return this.toString();} 















































参阅 


JSON.parse()、6.9 市 


Math 


Math.constant 
Math.function() 

常量 

Math.E 

常量 e， 自 然 对 数 的 底数 。 
Math.LN10 

10 的 自然 对 数 。 
Math.LN2 

2 的 自然 对 数 。 


Math.LOG10E 





e 以 10 为 底 的 对 数 。 
Math.LOG2E 

e 以 2 为 底 的 对 数 。 
Math.PI 

常量 rr。 
Math.SQRT1 2 
2 的 平方 根 的 倒数 。 
Math.SQRT2 

2 的 平方 根 。 

静态 函数 
Math.abs() 

计算 绝对 值 。 
Math.acos() 
计算 反 余弦 值 。 
Math.asin() 

计算 反正 弦 值 。 
Math.atan() 

计算 反正 切 值 。 
Math.atan2() 


计算 从 X 轴 到 指定 点 的 角度 。 


Math.ceil0) 
对 一 个 数字 同上 取 整 。 
Math.cos() 

计算 余弦 值 。 
Math.exp() 

计算 e 的 乘 方 。 
Math.floor() 

对 一 个 数字 向 下 取 整 。 
Math.log() 

计算 自然 对 数 。 
Math.max() 
返回 两 个 数 中 较 大 的 那个 。 
Math.min() 
返回 两 个 数 中 较 小 的 那个 。 
Math.pow() 
计算 xy。 
Math.random() 
计算 一 个 随机 数 。 
Math.round() 


站 舍 五 入 。 


Math.sin() 
计算 正弦 值 。 
Math.sqrt() 

计算 平方 根 。 
Math.tan() 

计算 正切 值 。 
描述 


Math 是 一 个 对 象 ， 其 属性 为 召 干 有 用 的 函数 和 律 量 。 这 些 函 数 和 肖 
量 的 引用 语法 如 下 : 


y=Math. sin(x); 
area=radius*radius*Math .PI; 





和 Date、String 不 同 ，Math 不 是 对 象 的 类 。 没 有 Math() 构 造 函 数 ， 
类 似 于 Math.sin0 这 样 的 函数 只 是 简单 的 函数 ， 而 不 是 对 茶 个 对 象 进行 操 
作 的 方法 。 

参阅 

Number 
Math.abs() 

计算 绝对 值 

概要 

Math.abs(x) 


参数 


x 
任意 数值 。 
返回 
x 的 绝对 值 。 
Math.acos() 
计算 反 余弦 值 
概要 
Math.acos(x) 
参数 
x 
-1.0 一 1.0 之 间 的 一 个 数字 。 
返回 
指定 值 x 的 反 余弦 值 。 返 回 值 将 介 于 0~~n 弧 度 之 间 。 
Math.asin() 
计算 反正 弦 值 。 
概要 
Math.asin(x) 
参数 
x 


-1.0 一 1.0 之 间 的 一 个 数字 。 


返回 

指定 值 x 的 反正 弦 值 。 返 回 值 将 介 于 -m2 一 m2 弧度 之 间 。 
Math.atan() 

计算 反正 切 值 

概要 

Math.atan(x) 

参数 

x 

任意 数值 。 

返回 

指定 值 x 的 反正 切 值 。 返 回 值 将 介 于 -m2 一 m2 弧度 之 间 。 
Math.atan2() 

计算 从 X 轴 到 指定 点 的 角度 

概要 

Math.atan2(y,x) 

参数 

y 

指定 点 的 Y 坐 标 。 

x 


指定 点 的 X 坐 标 。 


返回 值 


Xx 轴 正 半 轴 与 指定 点 (x,y) 之 间 沿 逆 时 针 方 向 的 夹 角 ， 值 介 于 -nn 一 nt 弧 
度 之 间 。 


描述 
Math.atan2() 函 数 计算 y/x 的 反正 切 值 。 可 以 将 参数 y 看 做 一 个 点 的 Y 


坐标 ， 将 参数 x 看 做 该 点 的 X 坐 标 。 注 意 本 函数 中 参数 的 顺序 : Y 坐 标 在 
X 坐 标 前 面 。 


Math.ceil() 
对 一 个 数字 向 上 取 整 
概要 
Math.ceil(x) 


参数 





X 

任意 数值 或 表达 式 。 

返回 

大 于 或 等 于 x 的 最 接近 的 整数 。 

描述 

Math.ceil0 执 行 同 上 取 整 运算 ， 也 就 是 说 ， 它 返回 大 于 或 等 于 函数 
参数 的 最 接近 的 整数 。Math.ceil0 和 Math.round0 不 同 ， 前 者 总 是 向 上 取 
整 ， 后 者 则 是 同上 或 同 下 取 整 到 最 接近 的 整数 。 也 要 注意 ，Math.ceil() 
不 会 将 负数 变 成 绝对 值 更 大 的 人 〖 数 ， 而 是 将 它们 辐 0 的 方 癌 取 整 。 


例 























a=Math.ceil(1.99);// 结 果 为 2.0 


b=Math,ceil(1.01) ;// 结 果 为 2.9 
c=Math.ceil(1.0);// 结 果 为 1.0 
d=Math.ceil(-1.99);// 结 果 为 -1.0 








Math.cos() 
计算 余弦 值 
概要 
Math.cos(x) 
参数 
x 


一 个 以 弧度 制度 量 的 角度 。 如 果 想 将 角度 制 转 为 弧度 制 ， 可 以 将 角 
度 制 的 值 乘 以 0.017 453 293(2m/360)。 


返回 
指定 值 x 的 余弦 值 。 返 回 值 将 介 于 -1.0 一 1.0 之 间 。 





Math.E 

数学 常数 e 

概要 

Math.E 

描述 

Math.E 是 数学 常数 e， 自 然 对 数 的 底数 ， 近 似 值 为 2.718 28。 
Math.exp() 

计算 ex 


概要 

Math.exp(x) 

参数 

x 

用 做 指数 的 数值 或 表达 式 。 

返回 

ex，e 的 x 次 方 ，e 为 目 然 对 数 的 确 数 ， 近 似 值 为 2.718 28。 
Math.floor() 

对 一 个 数字 向 下 取 整 

概要 

Math.floor(x) 

参数 

x 

任意 数值 或 表达 式 。 

返回 

最 接近 并 且 小 于 或 等 于 x 的 整数 。 

描述 


Math.floor() 执 行 回 下 取 整 操作 ;， 换 句 话 说 ， 它 返回 最 接近 并 且 小 于 
或 等 于 函数 参数 的 整数 值 。 


Math.floor() 将 一 个 浮 点 数 回 下 取 整 到 最 接近 的 整数 。 它 与 
Math.roundO 不 同 ， 后 者 会 加 上 或 向 下 取 整 到 最 接近 的 整数 。 也 要 注意 











Math.floorO0 对 负数 也 癌 下 《就 是 说 ， 数 字 将 更 小 ) 取 整 ， 而 不 是 向 上 
(更 靠近 0) 


例 





a=Math.floor(1.99);// 结 果 为 1.0 
b=Math .floor (1.01);// 结 果 为 1.0 
c=Math .floor (1.0);// 结 果 为 1.0 
d=Math.floor(-1.01);// 结 果 为 -2.0 








Math.LN10 
数学 常数 log.10( 即 In10) 
概要 
Math.LN10 
描述 


Math.LN10 即 logs10，10 的 自然 对 数 。 这 个 常量 的 近似 值 为 2.302 
585 092 994 045 901 1。 


Math.LN2 
数学 常量 log。2 
概要 
Math.LN2 
描述 


Math.LN2 即 log.2，2 的 自然 对 数 。 这 个 常量 的 近似 值 为 0.693 147 
180 559 945 286 23。 


Math.log() 


计算 自然 对 数 

概要 

Math.log(x) 

参数 

x 

任何 大 于 0 的 数值 或 表达 式 。 

返回 

X 的 自然 对 数 。 

描述 

Math.log() 计 算 logcx， 它 的 参数 的 自然 对 数 。 参 数 必须 大 于 0。 
可 以 按 下 面 的 公式 计算 以 10 为 底 或 以 2 为 底 的 对 数 。 


logiox = 1081oe * logex 


log,x = 10856 * logex 





这 两 个 公式 可 翻译 为 下 面 的 JavaScript 函 数 : 





function 1og10(x){treturn Math.LOG10E*Math.1log(x);} 
function log2(x){return Math.LOG2E*Math.1log(x);} 





Math.LOGI10E 
数学 常量 logi0e 
概要 


Math.LOG10E 


描述 
Math.LOG10E 是 logi0e 的 值 ， 即 常数 e 的 以 10 为 底 的 对 数 。 它 的 近似 
值 为 


0.434 294 481 903 251 816 67. 
Math.LOG2E 

数学 常量 log,e 

概要 

Math.LOG2E 

描述 

Math.LOG2E 是 loge 的 值 ， 即 常数 e 以 2 为 底 的 对 数 。 它 的 近似 值 为 

1.442 695 040 888 963 387。 
Math.max() 

返回 最 大 的 参数 

概要 





Math.max(args...) 


参数 


参数 中 最 大 的 值 。 如 果 没 有 参数 则 返回 -Infinity。 如 果 任 意 一 个 参 


数 是 NaN 或 不 可 转换 为 数字 ， 则 返回 NaN。 


Math.min() 
返回 最 小 的 参数 
概要 
Math.min(args...) 
参数 
args... 
任意 数量 的 参数 。 
返回 


定 参 数 中 最 小 的 值 。 如 果 没 有 参数 则 返回 Infinity。 如 果 任 意 一 个 
六 下 是 No 或 不 可 转换 为 数字 ， 则 返回 NaN。 


Math.PI 
数学 常量 
概要 
Math.PI 
描述 


Math.PI 是 常量 r， 圆 周 长 与 直径 的 比 。 它 的 近似 值 为 3.141 592 653 
589 79。 








Math.pow() 
计算 xy 


概要 

Math.pow(x,y) 

参数 

x 

乘 方 的 底数 。 

y 

乘 方 的 指数 。 

返回 

x 的 y 次 方 ，XY。 

描述 

Math.pow0 计 算 x 的 y 次 方 。 可 以 同 Math.pow0 传 递 任何 值 。 不 过 ， 
如 果 结 果 为 虚数 或 复数 ， 则 Math.pow0 将 返回 NaN。 实 践 中 ， 这 意味 着 
如 果 x 是 负数 ， 则 y 应 该 是 正 的 或 负 的 整数 。 同 样 ， 也 不 要 息 记 过 大 的 指 
数 很 容易 导致 浮 点 淤 出 并 返回 一 个 Infinity 值 。 
Math.random() 

返回 一 个 伪 随 机 数 

概要 

Math.random() 

返回 

一 个 大 于 等 于 0.0 并 小 于 1.0 的 伪 随 机 数 。 
Math.round() 





四 全 五 大 

概要 
Math.round(x) 
参数 

x 

任意 数字 。 

返回 

最 接近 x 的 整数 。 
描述 


Math.round() 将 它 的 参数 向 上 或 向 下 取 整 到 最 接近 的 整数 。 它 将 0.5 
向 上 取 整 。 例 如 ， 它 将 2.5 取 整 为 3， 将 -2.5 取 整 为 -2。 


Math.sin() 
计算 正弦 值 
概要 
Math.sin(x) 


参数 





X 


一 个 角度 ， 单 位 为 弧度 制 。 可 以 通过 乘 以 0.017 453 293(2m360) 的 方 
式 ， 将 角度 转换 为 弧度 。 


返回 
XxX 的 正弦 值 。 返 回 值 将 介 于 -1.0 一 1.0 之 间 。 


Math.sqrt() 
计算 平方 根 
概要 
Math.sqrt(x) 
参数 
x 
一 个 大 于 等 于 0 的 数值 。 
返回 
x 的 平方 根 。 如 果 x 小 于 0 则 返回 NaN。 
描述 


Math.sqrtO 计 算 给 定数 字 的 平方 根 。 注 意 ， 然 而 ， 也 可 以 使 用 
Math.pow0 来 计算 某 个 数字 的 任意 根 。 比 如 : 


Math.cuberoot=function(x){return Math.pow(x,1/3);} 
Math.cuberoot(8);// 返 回 2 


Math.SQRT1 2 


数学 常量 1/V2 
概要 
Math.SQRT1 2 


描述 


Math.SQRT1 2 是 1 2 的 值 ，2 的 平方 根 的 倒数 。 这 个 常数 的 近似 


值 为 0.707 106 781 186 547 6 。 


Math.SQRT2 


Math.SQRTI2 


描述 





Math.SQRT2 是 常量 Y< ， 即 2 的 平方 根 。 这 个 常量 的 近似 值 为 1.414 
213 562 373 095 。 


Math.tan() 
计算 正切 值 
概要 
Math.tan(x) 
参数 
x 


一 个 角度 ， 单 位 为 弧度 制 。 可 以 通过 乘 以 0.017 453 293(2rV360) 的 方 
式 ， 将 角度 转换 为 弧度 。 


返回 

给 定 角 度 x 的 正切 值 。 
NaN 

非 数 字 属 性 


概要 

NaN 

描述 

NaN 是 一 个 全 局 属性 ， 指 同一 个 特殊 的 非 数 字 值 。NaN 属 性 不 可 用 
for/in 循 环 枚 举 ， 也 不 能 用 delete 操 作 符 删除 。 注 意 ，NaN 不 是 常量 ， 不 
可 将 它 设置 为 任何 其 他 值 ， 有 些 操作 应 谨慎 地 避免 。 


要 检查 一 个 值 是 否 为 数字 ， 可 使 用 isNaNO， 因 为 NaN 总 是 与 其 他 值 
不 相等 ， 甚 至 与 它 自身 也 不 相等 。 


参阅 














Infinity、isNaN()、Number.NaN 


Number 
数字 
对 象 - 数 字 
构造 函数 
new Number(value) 
Number(value) 
参数 
value 
正在 创建 的 Number 对 象 的 数值 ， 或 将 转换 为 一 个 数字 的 值 。 
返回 


当 Number() 使 用 new 操 作 符 用 做 构造 函数 时 ， 它 将 返回 一 个 新 构造 
的 Number 对 象 。 当 Number() 当 做 函数 调用 而 没有 new 操 作 符 时 ， 它 将 传 


入 的 参数 转换 为 一 个 原始 的 数值 并 返回 这 个 值 〈 如 果 转 换 失 败 则 返回 
NaN ) 


兴 是. 
Number.MAX VALUE 

能 表示 的 最 大 数字 。 

Number.MIN VALUE 

能 表示 的 最 小 数字 。 

Number.NaN 

非 数字 值 。 

Number.NEGATIVE_INFINITY 

负 无 穷 ， 当 洲 出 时 返回 。 
Number.POSITIVE_INFINITY 

正 无 穷 ， 当 溢出 时 返回 。 

广 读 

toString() 

使 用 指定 的 进 制 ， 将 一 个 数字 转换 为 字符 串 。 
toLocaleString() 

将 一 个 数字 转换 为 本 地 数字 格式 的 字符 串 。 
toFixed() 

将 一 个 数字 转换 为 包含 指定 小 数位 数 的 字符 串 。 


toOEXponential() 


将 一 个 数字 转换 为 指数 记 数 法 ， 在 小 数 点 后 有 指定 位 数 。 
toPrecision() 


将 一 个 数字 转换 为 字符 串 ， 使 用 指定 数目 的 有 效 数 字 。 根 据 数 字 的 
大 小 以 及 指定 的 有 效 数 字 位 数 ， 可 能 会 采用 指数 或 浮 点 记 数 法 。 


valueOf() 
返回 一 个 Number 对 象 的 原始 值 。 
描述 


数字 是 JavaScript 中 基本 的 原始 数据 类 型 。JavaScript 也 文 持 Number 
对 象 ， 它 是 一 个 原始 数值 的 包装 对 象 。 在 需要 时 ，JavaScript 会 自动 在 原 
台 形 式 和 对 象形 式 之 间 转 换 。 可 以 通过 Number0 构 造 函数 来 显 式 地 创建 
一 个 Number 对 象 ， 虽 然 很 少 需要 这 样 做 。 


Number0 构 造 函 数 也 可 以 不 带 new 操 作 符 使 用 ， 此 时 它 将 作为 一 个 
转换 函数 。 以 这 种 方式 调用 时 ， 它 将 尝试 将 传 入 的 参数 转换 为 一 个 数 
字 ， 并 返回 转换 结果 一 个 原始 数值 或 NaN) 。 


Number() 构 造 函 数 也 用 做 5 个 常用 的 数字 常量 的 占 位 符 : 可 表示 的 
最 大 及 最 小 的 数字 ， 正 、 负 无 穷 大 ， 以 及 特殊 的 NaN 值 。 注 意 ， 这 些 值 
是 Number0 构 造 函 数 本 身 的 属性 ， 而 不 是 各 个 数字 对 象 的 属性 。 例 如 ， 
可 以 像 下 面 这 样 使 用 MAX_VALUE 属 性 : 











var biggest=Number .MAX_VALUE 


但 不 可 以 这 样 : 





var n=new Number(2); 
var biggest=n.MAX_VALUE 


但 除 此 之 外 ，Number 对 象 的 toString0 和 其 他 方法 也 是 每 个 Number 
对 象 的 方法 ， 而 不 是 Number0O 构 造 函数 的 方法 。 上 面 提 到 过 ， 在 需要 时 
JavaScript 会 自动 将 原始 数值 转换 为 Number 对 象 ， 这 就 是 说 ， 可 以 对 于 


原始 数值 以 及 Number 对 象 使 用 Number 方 法 。 





Var Value=1234 
var binary_value=n.toString(2); 


参阅 

Infinity、 Math、NaN 
Number.MAX VALUE 

最 大 的 数值 

概要 

Number.MAX_VALUE 

描述 


Number.MAX_VALUE 是 JavaScript 中 可 以 表示 的 最 大 的 数 。 它 的 值 
约 为 1.79E+308。 





Number.MIN_VALUE 
最 小 的 数值 
概要 
Number.MIN_VALUE 
描述 


Number.MIN_VALUE 是 JavaScript 中 可 以 表示 的 最 小 的 数 〈 指 非常 
接近 于 0， 而 不 是 最 大 的 负数 ) 。 它 的 值 约 为 5E-324。 


Number.NaN 
特殊 的 非 数字 值 





概要 


Number.NaN 
描述 


Number.NaN 是 一 个 特殊 的 值 ， 表 示 某 些 数学 操作 〈 如 对 负数 取 平 
方 根 ) 的 结果 不 是 一 个 数字 。parseInt() 和 parseFloat() 在 不 能 解析 指定 的 
字符 串 时 也 会 返回 这 个 值 ， 类 似 地 ， 可 以 在 那些 正常 情况 下 返回 有 效 数 
字 的 函数 中 返回 Number.NaN 来 报告 一 个 错误 。 


JavaScript 将 Number.NaN 值 输出 为 NaN。 注 意 ，NaN 值 与 任意 其 他 
数字 总 是 不 等 ， 包 括 NaN 本 有 身 。 因 此 ， 不 能 通过 与 Number.NaN 比 较 的 
方法 来 检查 某 个 值 是 否 为 非 数 字 值 ， 而 应 该 使 用 isNaNO 函 数 代 蔡 。 在 
ECMAScript v1 及 后 续 的 版 本 中 ， 也 可 以 使 用 预定 义 的 全 局 属性 NaN 来 
代 蔡 Number.NaN。 











参阅 
isNaN()、NaN 
Number.NEGATIVE INFINITY 
训 万 兴 
概要 
Number.NEGATIVE_INFINITY 
描述 
Number.NEGATIVE_INFINITY 是 一 个 特殊 的 数值 ， 当 一 个 算术 操 


作 或 数学 函数 产生 了 一 个 绝对 值 比 JavaScript 中 能 表示 的 最 大 的 数 还 要 大 
(也 就 是 说 ， 比 -Number.MAX_VALUE 还 要 小 ) 的 负数 时 返回 该 值 。 





JavaScript 将 NEGATIVE_INFINTY 值 显示 为 -Infinity。 这 个 值 在 数学 
上 表现 得 就 像 无穷 大 一 样 ， 例 如 ， 任 何 数 字 乘 以 无 穷 大 仍然 是 无 穷 大 ， 
同时 任何 数字 除 以 无 穷 大 将 得 到 0。 在 ECMAScript v1 及 之 后 的 版 本 中 ， 


也 可 以 使 用 -Infinity 来 代替 Number.NEGATIVE_INFINITY。 
参阅 

Infinity、 isFinite() 

Number.POSITIVE INFINITY 

二 广大 

概要 

Number.POSITIVE_INFINITY 

描述 

Number.POSITIVE_INFINITY 是 一 个 特殊 的 数值 ， 当 一 个 算术 操作 
或 数学 函数 产生 了 一 个 比 JavaScript 中 所 能 表示 的 最 大 的 数 还 要 大 (也 就 
是 说 ， 比 Number.MAX_VALUE 还 要 大 ) 的 值 时 返回 该 值 。 注 意 ， 如 果 
数字 “下 溢 ”， 或 者 说 比 Number.MIN_VALUE 还 要 小 时 ，JavaScript 将 把 
它 转换 为 0。 

JavaScript 将 POSITIVE_INFINITY 显 示 为 Infinity。 这 个 值 在 数学 上 
表现 得 就 像 无 穷 大 一 样 ， 例 如 ， 任 何 数字 乘 以 无 穷 大 仍然 是 无 穷 大 ， 同 
时 任何 数字 除 以 无 穷 大 将 得 到 0。 在 ECMAScript v1 及 之 后 的 版 本 中 ， 也 
可 以 使 用 预定 义 的 全 局 属性 mmfinity 来 代替 
Number.POSITIVE_INEFINITY。 

参阅 


Infinity、isFinite() 
Number.toExponentiall() 

使 用 指数 记 数 法 格式 化 一 个 数字 

概要 


number.toExponential(digits) 

参数 

digits 

小 数 点 之 后 出 现 的 数字 的 数目 。 值 可 能 在 0 一 20 之 间 ， 包 括 0 及 20。 
不 同 的 实现 环境 可 能 会 文 持 范围 更 大 的 值 。 如 果 省 略 这 个 参数 ， 则 需要 
多 少数 字 将 显示 多 少数 字 。 

返回 

以 指数 记 数 法 表示 的 一 个 数字 的 字符 串 格 式 ， 小 数 点 前 有 一 个 数 
字 ， 小 数 点 后 面 有 digits 个 数字 。 数 字 的 小 数 部 分 将 根据 需要 四 舍 五 入 
或 补 0， 以 便 与 指定 的 长 度 相符 。 

异常 

RangeError 


digits 参 数 太 小 或 太 大 。0 一 20 之 间 的 值 〈 包 括 0 和 20) 不 会 产生 
RangeError。 不 过 ， 不 同 的 实现 环境 可 能 会 文 持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 


示例 





var n=12345 .6789 ; 

n.toExponential(1);// 返 回 1.2e+4 
n.toExponential(5);// 返 回 1.23457e+4 
n.toExponential(10);// 返 回 1.2345678900e+4 
n.toExponential();// 返 回 1.23456789e+4 









































参阅 


Number.toFixed()、Number.toLocaleString()、Number.toPrecision()、 
Number.toString() 


Number.toFixed() 

使 用 定点 记 数 法 格式 化 一 个 数字 

概要 

number.toFixed(digits) 

参数 

digits 

小 数 点 之 后 要 显示 的 数字 的 数量 ， 值 可 能 在 0 一 20 之 间 ， 包 括 0 和 
20， 不 同 的 实现 环境 可 能 文 持 更 大 或 更 小 的 值 。 如 果 省 略 这 个 参数 ， 则 
相当 于 传 入 了 0。 

返回 

一 个 数字 的 字符 串 格式 ， 不 使 用 指数 记 数 法 ， 在 小 数 点 后 有 指定 的 
digits 个 数字 。 根 据 需 要 ， 这 个 数字 将 四 舍 五 入 ， 或 者 小 数 部 分 宰 0， 以 


便 符 合 指定 的 长 度 。 如 果 数 字 大 于 le+21， 则 这 个 方法 将 简单 地 调用 
Number.toString0 并 返回 一 个 指数 记 数 法 格式 的 字符 串 。 





异 首 
RangeError 


digits 参 数 太 小 或 太 大 。0 一 20 之 间 的 值 〈 包 括 0 和 20) 不 会 产生 
RangeError。 不 过 ， 不 同 的 实现 环境 可 能 会 文 持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 


示例 





var N=12345.6789; 
n.toFixed();// 返 回 12346: 注意 四 舍 五 入 ， 没 有 小 数 部 分 
n.toFixed(1);// 返 回 12345.7: 注意 四 舍 五 入 

n,.toFixed(6);// 返 回 12345.678900: 注意 末尾 添加 的 9 





















































(1.23e+20) .toFixed(2);// 返 回 123000000000000000000.00 
(1.23e-10) .toFixed(2)// 返 回 0.00 




















参阅 


Number.toExponential()、Number.toLocaleString()、 
Number.toPrecision()、Number.toString() 


Number.toLocaleString() 
将 一 个 数字 转换 为 本 地 格式 的 字符 串 
概要 
number.toLocaleString() 
返回 


根据 本 地 惯例 格式 化 当前 数字 为 一 个 字符 串 ， 与 具体 的 实现 有 关 ， 
例如 可 能 会 影响 小 数 点 使 用 的 标点 符号 或 者 和 干 位 分 隅 符 。 


异常 
TypeError 

这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
参阅 


Number.toExponential()、Number.toFixed()、Number.toPrecision()、 
Number.toString() 


Number.toPrecision() 
格式 化 一 个 数字 的 有 效 数字 
概要 


number.toPrecision(precision) 


参数 

Precision 

返回 的 字符 串 中 包含 的 有 效 数 字 位 数 。 值 可 能 在 1 一 21 之 间 ， 包 括 1 
和 21。 不 同 的 实现 环境 可 能 文 持 更 大 或 更 小 的 精度 值 。 如 条 省 略 这 个 参 
数 ， 则 将 调用 toString0 方 法 来 将 当前 数字 转换 为 一 个 十 进 制 的 值 。 

返回 


一 个 包含 precision 位 有 效 数 字 的 数字 字符 串 。 如 果 precision 足 够 
大 ， 包 括 当 前 数字 的 所 有 整数 部 分 ， 则 返回 值 将 使 用 定点 记 数 法 表示 。 
其 他 情况 下 ， 将 使 用 指数 记 数 法 ， 小 数 点 之 前 有 一 个 数字 ， 小 数 点 之 后 
nt pe 1 个 数字 。 根 据 需 要 ， 这 个 数字 将 四 舍 五 入 或 末尾 补 0。 


异 首 
RangeError 


precision 参 数 太 小 或 太 大 。1 一 21 之 间 的 值 ， 包 括 1 和 21， 不 会 产生 
RangeError。 不 过 ， 不 同 的 实现 环境 可 能 文 持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
示例 





var n=12345.6789 ; 

n.toPrecision(1);// 返 回 le+4 
n.toPrecision(3);// 返 回 1.23e+4 
n.toPrecision(5);// 返 回 12346: 注意 四 售 五 入 
n.topPrecision(10);// 返 回 12345.67890: 注意 末尾 补 的 0 


























参阅 


Number.toExponential()、Number.toFixed()、 
Number.toLocaleString()、Number.toString() 


Number.toString() 
将 一 个 数字 转换 为 字符 串 
概要 
number.toString(radix) 
参数 
radix 


可 选 参数 ， 指 定数 字 转 换 后 的 进 制 。 如 果 省 略 ， 将 使 用 10。 不 过 需 
要 注意 ， 如 果 指 定 了 这 个 参数 ， 并 且 值 不 是 10， 那 么 ECMAScript 标 准 
允许 返回 任意 值 。 

返回 

当前 数字 在 指定 进 制 下 的 字符 串 形式 。 





异 沼 

TypeError 

这 个 方法 在 一 个 非 Number 对 象 上 调用 。 

描述 

Number 对 象 的 toString(0 方 法 将 一 个 数字 转换 为 字符 串 。 当 radix 参 
数 省 略 或 值 为 10 时 ， 数 字 将 转换 为 一 个 十 进 制 的 数字 字符 串 。 虽 然 
ECMAScript 标 准 不 要 求实 现 处 理 radix 的 其 他 值 ， 但 常用 的 所 有 实现 都 
可 以 接受 2 一 36 之 间 的 值 。 

参阅 


Number.toExponential()、Number.toFixed()、 
Number.toLocaleString()、Number.toPrecision() 


Number.valueOf() 
返回 原始 的 数字 值 
重 写 Object.valueOfO 
概要 
number.valueOf() 
返回 
当前 Number 对 象 的 原始 数字 值 。 很 少 需要 显 式 地 调用 这 个 方法 。 
腊 律 
TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
参阅 
Object.valueOf() 
Object 
包含 所 有 JavaScript 对 象 的 特性 的 超 类 
构造 函数 
new Object() 
new Object(value) 
参数 
value 


这 个 可 选 的 参数 指定 一 个 原始 的 JavaScript 值 一 一 一 个 数字 、 布 尔 值 


了 符 串 ， 这 些 值 将 分 别 转换 为 一 个 Number、Boolean 或 String 对 象 。 


返回 
如 果 没 有 传 入 value 参 数 ， 则 这 个 构造 函数 将 返回 一 个 新 创建 的 


Object 实例 。 如 果 传 入 一 个 原始 value 值 ， 则 构造 函数 将 创建 并 返回 一 个 
原始 值 的 Number、Boolean 或 String 对 象 封装 。 如 果 不 带 new 操 作 符 ， 将 
0 ， 则 它 的 行为 将 和 使 用 new 操 作 符 时 一 


属性 

constructor 

引用 当前 对 象 的 构造 冰 数 (一 个 JavaScript 函 数 )。 

方法 

hasOwnProperty() 

检查 对 象 是否 拥 有 一 个 指定 名 字 的 本 地 定义 《而 不 是 继承 ) 的 属 


isPrototypeOf() 
检查 当前 对 象 是 不 是 指定 对 象 的 原型 。 








propertyIsEnumerable() 


检查 指定 名 字 的 属性 是 否 存 在 并 且 可 以 用 for/in 循 环 枚 举 。 








toLocaleString() 


返回 该 对 象 的 一 个 本 地 化 的 字符 串 表 示 。 这 个 方法 的 默认 实现 只 是 


简单 地 调用 toString0， 不 过 了 于 类 可 以 履 盖 它 ， 以 便 提 供 本 地 化 实现 。 


toString() 





返回 该 对 象 的 一 个 字符 串 表 示 。Object 类 实现 的 这 个 方法 非常 宽 


泛 ， 不 能 提供 很 多 有 用 的 信息 。Object 的 子 类 通 稍 会 通过 
toString() 方 法 来 将 它 履 新 ， 以 便 提 供 更 多 有 用 的 输出 信息 


valueOf() 

返回 当前 对 象 的 原始 值 ， 如 果 存 在 原始 值 的 话 。 对 类 型 为 Object 的 
对 象 来 说 ， 这 个 方法 只 是 简单 地 返回 该 对 象 本 身 。Object 的 子 类 “〈 如 
Number、Boolean) 则 重 载 这 个 方法 ， 以 便 返 回 与 该 对 象 相 关 的 原始 
值 。 

静态 方法 


在 ECMAScript 5 中 ，Object 构 造 函 数 也 为 以 下 全 局 函数 提供 了 命令 
空间 : 


Object.create() 

使 用 指定 的 原型 及 属性 创建 一 个 新 的 对 象 。 

Object.defineProperties() 

创建 或 配置 指定 对 象 的 一 个 或 多 个 属性 。 

Object.defineProperty() 

创建 或 配置 指定 对 象 的 某 个 属性 。 

Object.freeze() 

将 指定 对 象 设置 为 不 可 改变 。 

Object.getOwnPropertyDescriptor() 

查询 指定 对 象 的 指定 属性 的 特性 。 

Object.getOwnPropertyNames() 
0 


Object.getPrototypeOf() 
返回 指定 对 象 的 原型 。 
ObjectisExtensible() 

检查 当前 对 象 是 否 能 添加 到 新 的 属性 中 。 





Object.isFrozen() 
检查 当前 对 象 是 否 已 冻结 。 

Object.isSealed() 

检查 指定 对 象 是 否 为 封闭 的 (sealed) 。 

Object.keys() 

返回 一 个 包含 指定 对 象 的 所 有 非 继承 可 枚 举 属 性 名 的 数组 。 








Object.preventExtensions() 


阻止 同 指 定 对 象 添 加 新 的 属性 。 


Object.seal() 
阻止 同 指定 对 象 添 加 新 属性 或 删除 现 有 属性 。 
描述 


Object 类 是 JavaScript 语 言 的 内 置 数据 类 型 。 它 是 所 有 其 他 JavaScript 
对 象 的 超 类 ， 因 此 ，Object 类 的 所 有 方法 和 行为 都 被 其 他 对 象 继承 了 。 
JavaScript 中 对 象 的 基本 行为 的 讲解 在 第 6 章 。 


除了 上 面 显 示 的 Object0 构 造 函 数 ， 也 可 以 用 6.1 市 介绍 的 Object 直 
接 量 语法 来 创建 并 初始 化 对 象 。 


参阅 


Array、 Boolean、Function、Function.prototype、Number、String、 
第 6 草 


Object.constructor 

对 象 的 构造 函数 

概要 

object.constructor 

描述 

所 有 对 象 的 constructor 属 性 都 指 癌 用 做 当前 对 象 的 构造 函数 的 那个 
函数 。 例 如 ， 如 采 使 用 Array0 构 造 冰 数 创建 一 个 数组 a， 则 a.constructor 


是 一 个 Array: 





a=new Array(1,2,3);// 创 建 一 个 对 象 
a.constructor==Array// 值 为 true 





constructor 属 性 经 常用 于 检测 未 知 对 象 的 类 型 。 给 定 一 个 未 知 的 
值 ， 可 以 使 用 typeof 操 作 符 来 检查 它 是 一 个 原始 值 还 是 一 个 对 象 。 如 果 
它 是 一 个 对 象 ， 则 可 以 使 用 constructor 属 性 来 检查 对 象 的 类 型 。 例 如 ， 
下 面 的 函数 用 于 检查 给 定 的 值 是 否 是 一 个 数组 : 














function isArray(x){ 
return((typeof x=="object")&&(x.constructor==Array)); 
} 





不 过 ， 需 要 注意 ， 这 个 技术 只 对 核心 JavaScript 中 的 内 置 对 象 有 效 ， 
对 那些 宿主 对 象 〈 如 客户 端 JavaScript 的 Window 对 象 等 ) 而 言 则 未 必 有 
效 。Object.toString() 方 法 提供 了 另外 一 种 判断 未 知 对 象 类 型 的 方法 。 


参阅 





Object.toString() 


Object.create() 


使 用 指定 的 原型 和 属性 来 创建 一 个 对 象 

概要 

Objectcreate(proto) 

Object.create(proto, descriptors) 

参数 

proto 

新 创建 对 象 的 原型 ， 可 为 null。 

descriptors 

一 个 可 选 对 象 ， 把 属性 名 映射 到 属性 描述 符 。 
返回 

一 个 新 创建 的 对 象 ， 继 承 自 proto， 同 时 拥有 descriptors 所 描述 的 属 
异常 


TypeError 
如 果 proto 不 是 对 象 也 不 是 null， 或 者 指定 descriptors 但 它 引 发 


Object.definePropertiesO) 抛 出 了 一 个 TypeError。 


描述 


Object.create0 创 建 并 返回 一 个 新 的 以 proto 为 原型 的 对 象 。 这 意味 着 


新 对 象 将 继承 proto 的 属性 。 


如 果 指 定 可 选 的 descriptors 参 数 ， 则 Objects.create0 将 把 它 指定 的 属 


性 添加 到 新 对 象 中 ， 等 同 于 调用 Object.defineProperties()。 使 用 两 个 参数 


调用 Object.create(p,d) 等 同 于 : 





Object.defineProperties(Object.create(p),d); 





关于 descriptors 参 数 的 更 多 细节 可 参考 Object.defineProperties()， 关 
于 属性 描述 符 对 象 的 更 多 解释 可 参阅 
Object.getOwnPropertyDescriptor() 。 


注意 ，Object.create() 不 是 在 具体 的 对 象 上 调用 的 方法 : 它 是 一 个 全 
局 国 数 ， 需 要 传 入 一 个 对 象 。 


示例 











// 创 建 一 个 对 象 ， 有 xXx、y 属 性 ， 同 时 继承 属性 z 

Var p=0bject.create({z:0},{ 
x:{value:1,writable:false,enumerable:true,configurable:true}, 
y:{value:2,writable:false,enumerable:true,configurable:true}, 




















了 





参阅 


Object.defineProperty()、Object.defineProperties()、 
Object.getOwnPropertyDescriptor()、6.1 节 、6.7 市 


Object.defineProperties() 
创建 或 配置 对 象 的 多 个 属性 
概要 
Object.defineProperties(0,descriptors) 
参数 
0 
要 在 其 上 创建 或 配置 属性 的 对 象 。 


descriptors 


将 属性 名 映射 到 属性 摘 述 符 的 对 象 。 

返回 

对 象 o。 

寞 第 

TypeError 

如 果 o 不 是 一 个 对 象 ， 或 不 能 创建 或 配置 某 个 指定 的 属性 ， 束 抛 出 
该 异常 。 这 个 函数 不 是 原子 性 的 它 可 能 在 创建 或 配置 几 个 属性 之 后 ， 
同时 还 有 列 的 属性 未 创建 或 配置 时 抛 出 异常 。 关 于 可 能 导致 TypeError 的 
属性 配置 错误 可 参阅 6.7 节 。 

描述 

Object.definePropertiesO 在 对 象 o 上 创建 或 配置 由 descriptors 指 定 及 摘 
述 的 属性 。descriptors 中 的 属性 名 也 就 是 要 在 o 上 创建 或 配置 的 属性 名 ， 
同时 指定 对 应 的 属性 的 值 。 

Object.defineProperties() 的 行为 非常 类 似 Object.defineProperty()， 可 


参 疝 这 个 函数 以 便 了 解 更 多 细节 。 关 于 描述 符 对 象 的 更 多 细节 可 参阅 
Object.getOwnPropertyDescriptor()。 








示例 

















// 把 只 读 属性 x 和 y 添 加 到 新 创建 的 对 象 中 

Var p=0bject.defineProperties({},{ 
x:{value:0,writable:false,enumerable:true,configurable:true}, 
y:{value:1,writable:false,enumerable:true,configurable:true}, 


}); 











参阅 


Object.create()、Object.defineProperty()、 
Object.getOwnPropertyDescriptor()、6.7 市 


Object.defineProperty() 
创建 或 配置 对 象 的 一 个 属性 
概要 
Object.defineProperty(o,name,desc) 
参数 
0 
将 在 其 上 创建 或 配置 属性 的 对 象 。 
name 
将 创建 或 配置 的 属性 的 名 字 。 
desc 
一 个 属性 描述 符 对 象 ， 描 述 要 创建 的 新 属性 或 对 现 有 属性 的 修改 。 
返回 
对 象 o。 


已 A 
开 吊 





TypeError 


如 果 o 不 是 一 个 对 象 ， 或 者 指定 属性 不 能 创建 《比如 o 不 可 扩展 ) 或 
配置 “比如 该 属性 已 经 存在 ， 并 且 不 可 配置 ) 。 关 于 可 能 导致 这 个 函数 
抛 出 TypeError 的 属性 配置 错误 列表 可 参阅 6.7 节 。 


描述 
Object.definePropertyO 使 用 属性 描述 符 desc 来 创建 或 配置 对 象 o 中 名 


为 name 的 属性 。 关 于 属性 描述 符 对 象 的 描述 ， 可 参阅 
Object.getOwnPropertyDescriptor()。 





如 果 o 还 不 存在 名 为 name 的 属性 ， 则 这 个 函数 将 简单 地 使 用 desc 中 
指定 的 属性 和 值 来 创建 一 个 新 的 属性 。 对 于 desc 中 未 指定 的 属性 ， 对 应 
的 属性 值 将 设置 为 false 或 null。 


如 果 name 为 o 中 一 个 已 经 存在 的 属性 名 ， 则 Object.defineProperty() 将 
通过 改变 它 的 值 或 属性 来 配置 这 个 属性 。 在 这 种 情况 下 ，desc 只 需要 包 
含 要 改变 的 属性 ， 不 包含 的 属性 将 不 会 改变 。 


注意 这 不 是 在 具体 的 对 象 上 调用 的 方法 ， 它 古 一 个 全 局 函数 ， 必 须 
传 入 一 个 对 象 。 


示例 




















function constant(o,n,v){// 定 义 一 个 值 为 v 的 常量 o.n 
Object.defineProperty(o,n,{value:v,writable:false 
enumerable:true,configurable:false}); 


} 





参阅 


Object.create()、Object.defineProperties()、 
Object.getOwnPropertyDescriptor()、6.7 市 


Object.freezel() 
将 一 个 对 象 设置 为 不 可 改变 
概要 


Object.freeze(o) 


参数 


冻结 的 对 象 。 
回 


让 烛 


现在 处 于 冻结 状态 的 参数 对 象 0。 
描述 


Object.freeze() 将 o 设 置 为 不 可 扩展 (参阅 
Object.preventExtensions()) ， 同 时 就 像 Object.seal0 那 样 ， 将 它 鸣 所 有 和 目 
有 属性 设置 为 不 可 配置 。 除 此 之 外 ， 它 也 将 所 有 非 继承 的 数据 属性 设置 
为 只 读 。 这 意味 着 不 能 疝 o 添 加 新 属性 ， 同 时 已 有 的 属性 也 不 能 设置 或 
删除 。 谍 结对 象 是 一 个 永久 性 的 操作 ， 一 旦 冻结 ， 就 不 能 解冻 。 


注意 ，Object.freeze0 只 设置 数据 属性 的 可 写 特 性 ， 那 些 有 对 应 setter 
函数 的 属性 不 会 受到 影响 。 还 要 注意 ，Object.freeze0) 不 会 影响 继承 属 
性 。 





注意 这 个 方法 不 可 以 在 具体 的 对 象 上 调用 ， 它 是 一 个 全 局 函数 ， 必 
须 传 入 一 个 对 象 。 


参阅 


Object.defineProperty()、Object.isFrozen()、 
Object.preventExtensions()、QObject.seal()、6.8.3 市 


Object.getOwnPropertyDescriptor() 
查询 一 个 属性 的 特性 
概要 
Object.getOwnPropertyDescriptor(oname) 
参数 
0 
待 查 询 其 属性 特性 的 对 象 。 
name 


竺 查询 的 属性 名 《或 数组 元 素 的 索引 ) 。 





返回 


指定 对 象 指定 属性 的 一 个 属性 描述 符 对 象 ， 如 果 不 存 在 指定 属性 则 
返回 undefined。 


描述 


Object getOwnPrepertyDescriptor0 返 回 指定 对 象 指 定 属性 的 一 个 属 
性 描述 符 。 属 性 描述 符 是 一 个 对 象 ， 描 述 该 属 性 的 特性 和 值 。 细 节 可 参 
向 下 面 的 小 节 。 注 意 ， 这 个 方法 不 可 以 在 具体 的 对 象 上 调用 ， 它 是 一 个 
全 局 函数 ， 必 须 传 入 一 个 对 象 。 


属性 描述 符 


属性 描述 符 是 一 个 普通 的 JavaScript 对 象 ， 描 述 某 个 属性 的 特性 (有 
时 也 包括 值 ) 。 有 两 种 JavaScript 属 性 。 数 据 属性 有 一 个 值 以 及 三 个 性 
质 : 可 枚 举 性 (enumerable) 、 可 写 性 〈writable) 以 及 可 配置 性 
Cconfigurable) 。 访 问 器 属性 (accessor ”property) 有 一 个 getter 和 /或 
setter 方 法 ， 以 及 可 枚 举 性 和 可 配置 性 。 


数据 属性 的 描述 符 类 似 这 样 : 








{ 

value:/* 任 意 JavaScript 值 */ 
writable:;/*true 或 false*/ 
enumerable:/*true 或 false*/ 
configurable:/*true 或 false*/ 
} 





访问 器 属性 的 描述 符 类 似 这 样 : 





{ 

get:/*function 或 undefined: 蔡 换 属性 值 */， 
set:/*function 或 undefined: 替换 可 写 性 */， 
enumerable:/*true 或 false*/， 
configurable:/*true 或 false*/ 

} 


























参阅 


Object.definePropertyO、 6.7 贡 


Object.getOwnPropertyNames() 
返回 非 继承 属性 的 名 字 
概要 
Object.getOwnPropertyNames(o) 
参数 
0 
个 科学 
返回 
mr 所 有 非 继 承 属 性 的 名 字 的 数组 ， 包 括 那些 不 可 枚 举 的 


描述 

Object.getOwnPropertyNames0 返 回 一 个 包含 o 的 所 有 非 继承 属性 的 
名 字 的 数组 ， 包 括 那 些 不 可 枚 举 的 属性 。 关 于 只 返回 可 枚 举 属性 的 名 字 
的 方法 可 参考 Objects.keys()。 


注意 ， 这 个 方法 不 可 在 对 象 上 调用 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 
一 个 对 象 。 


示例 





Object .getownPropertyNames([])/V/=>[" Length"]:"Length" 不 可 枚 举 





参阅 
Object.keys()、6.5 市 


Object.getPrototypeOf() 


数 ， 


返回 一 个 对 象 的 原型 
概要 
Object.getPrototypeOf(o) 
参数 

0 

= 

返回 

0 的 原型 对 象 。 

描述 


Object.getPrototypeOf() 返 回 它 的 参数 的 原型 。 注 意 这 是 一 个 全 局 浮 
必须 传 入 一 个 对 象 。 它 不 是 在 对 象 上 调用 的 方法 。 


示例 





var p={;// 一 个 原始 对 象 

Object ,getPrototypeof(p)/V/=>0Object,prototype 
var o=0bject,create(p)// 一 个 继承 自 p 的 对 象 
Object ,getPrototypeof(o)/V/=>pp 








参阅 


Object.create()、 第 6 章 


Object.hasOwnProperty() 





检查 一 个 属性 是 否 是 继承 的 
概要 


object.hasOwnProperty(propname) 


参数 


propname 
包含 对 象 的 属性 名 的 字符 串 。 
返回 





如 果 对 象 有 一 个 指定 名 字 的 非 继承 的 属性 则 返回 true; 如 果 该 对 象 

没有 指定 名 字 的 属性 ， 或 者 这 个 属性 是 从 它 的 原型 对 象 继承 而 来 的 ， 则 
返回 false。 
摘 述 


如 同 第 9 章 描 述 的 ，JavaScript 对 象 可 以 有 目 己 的 属性 ， 也 可 以 从 它 
们 的 原型 对 象 那儿 继承 属性 。hasOwnProperty() 方 法 提供 一 个 识别 继承 
属性 和 非 继 承 的 本 地 属性 的 方法 。 


示例 











var o=new 0bject();// 创 0 
0.X=3.14;// 定 义 一 个 非 继承 的 本 地 属 攻 
o. hasownproperty(n xX) ns x 是 0 的 本 地 属性 
0.hasOownProperty("y");// 返 回 false: 0 没有 属性 y 

0.hasownProperty("toString");// 返 回 false: toString 属 性 是 继承 属性 


Ts 

































































[ 王 




















参阅 
Function.prototype、Object.propertyIsEnumerable()、 第 9 章 


Object.isExtensibje() 


ECMAScript 5 
判断 某 个 对 象 上 是 否 可 以 添加 新 属性 
概要 


Object.isExtensible(o) 


符 检 查 可 扩展 性 的 对 象 。 


遍 
加 





如 果 可 以 癌 该 对 象 添加 新 属性 则 返回 true; 否则 返回 false。 
描述 


如 果 可 以 同一 个 对 象 添加 新 的 属性 ， 则 称 它 为 可 扩展 的 。 所 有 对 象 
在 创建 后 都 是 可 扩展 的 ， 直 到 它们 被 传 入 Object.preventExtensions()、 
Object.seal0 或 Object.freeze0)。 


注意 这 不 是 对 象 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 一 个 对 象 。 
示例 








var o={]};// 新 创建 一 个 对 象 
Object.isExtensible(o)//=>true: 它 是 可 扩展 的 
0bject.preventExtensions(o);// 将 它 设 置 为 不 可 扩展 
Object.isExtensible(o)//=>false: 现在 它 不 可 扩展 了 




















参阅 


Object.isFrozen()、Object.isSealed()、Object.preventExtensions()、 
6.8.3 节 


Object.isFrozen() 
判断 对 象 是 否 不 可 改变 
概要 


Object.isFrozen(o) 


参数 





O 


待 检测 的 对 象 。 

返回 

如 末 o 已 冻结 并 不 改变 则 为 tue; 否则 为 false。 
描述 


如 果 一 个 对 象 的 所 有 非 继 承 属性 《〈 除 了 那些 带 setter 方 法 的 ) 都 为 只 
读 ， 或 者 它 是 封闭 的 (sealed) ， 则 它 处 于 冻结 状态 。 如 果 可 以 同一 个 
对 象 添加 新 的 〈 非 继承 的 ) 属性 ， 并 且 不 可 删除 现 有 的 〈 非 继承 的 ) 属 
性 ， 则 称 它 为 封闭 的 。ObjectisFrozen0 检 测 它 的 参数 是 否 为 冻结 状态 。 
对 象 一 旦 冻结 就 不 能 再 解冻 。 

冻结 一 个 对 象 的 常用 方法 为 将 它 传 给 Object.freeze()。 也 可 以 这 样 冻 
结 一 个 对 象 : 将 它 传 给 Object.preventExtensions()， 然 后 用 
Object.defineProperty() 来 将 它 所 有 的 属性 设置 为 只 读 并 且 不 可 删除 的 。 


注意 这 不 是 在 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 图 数 ， 必 须 传 入 一 
个 对 象 。 


参阅 





Object.defineProperty()、Object.freeze()、Object.isExtensible()、 
Object.isSealed()、Object.preventExtensions()、OQObject.seal()、6.8.3 节 


Object.isPrototypeOf() 
判断 当前 对 象 是 否 为 男 一 个 对 象 的 原型 
概要 
object.isPrototypeOf(o) 
参数 


O 


任意 对 象 。 

返回 

人 回 true; 如 果 o 不 是 一 个 对 象 ， 或 object 不 
是 o 的 原型 则 返回 false。 

描述 


如 第 9 草 擂 述 的 ， JavaScript 对 象 从 它们 的 原型 对 象 中 继承 属性 。 对 
象 的 原型 通过 prototype 属 性 指向 创建 并 初始 化 该 对 象 的 构造 函数 。 
isPrototypeOfO 方 法 提供 一 种 判断 某 个 对 象 是 否 为 另 一 个 对 象 的 原型 的 
方法 。 这 个 技术 可 用 于 判断 对 象 的 类 。 


示例 











var o=new 0bject();// 创 建 一 个 对 象 

Object .prototype.isPrototype0f(0)//true: 0 是 一 个 对 象 
Function.prototype.isPrototypeof(o.toString);//true: toString 是 一 个 函数 
Array.prototype.isPrototypeof([1,2,3]);//true: [1,2,3] 是 一 个 数组 

// 执 行 类 似 检 测 的 另 一 种 方法 

(0o.constructor==0bject);//true:0o 是 由 0bject( ) 构 造 函 数 创建 的 
(0o.toSstring.constructor==Function);//true:0o.toString 是 一 个 函数 

// 原 型 对 象 也 有 自己 的 原型 。 下 面 的 调用 返回 true， 说 明 函 数 对 象 
// 不 仅 从 Function.prototype 而 且 从 0bject.prototype 继 承 属 性 。 
Object .prototype.isprototypeof(Function.prototype); 



















































































参阅 

Function.prototype、Object.constructor、 第 9 章 
Object.isSealed() 

判断 一 个 对 象 的 属性 是 否 可 添加 或 删除 

概要 

Object.isSealed(o) 

参数 


口 


竺 检测 的 对 象 

返回 

如 果 o 是 封闭 的 则 为 true; 否则 为 false。 
描述 


如 果 不 可 以 同一 个 对 象 添 加 新 的 《〈 非 继承 的 ) 属性 ， 并 且 现 有 的 
〈 非 继承 的 ) 属性 不 可 删除 ， 则 称 它 为 封闭 的 。Object.isSealed() 检 测 它 
的 参数 是 否 为 封闭 对 象 。 对 象 一 旦 封闭 ， 将 没有 办 法 解 封 。 封 闭 一 个 对 
象 的 常用 方法 是 将 它 传 递 给 Object.seal0 或 Object.freeze0。 也 可 以 这 样 封 
闭 一 个 对 象 : 将 它 传 入 Object.preventExtensions()， 再 使 用 
Object.defineProperty() 来 将 将 它 的 所 有 属性 设置 为 不 可 删除 的 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 
不 


参阅 








Object.defineProperty()、Object.freeze()、Object.isExtensible()、 
Object.isFrozen()、QObject.preventExtensions()、Object.seal()、6.8.3 市 


Object.keys() 
返回 自 有 的 可 枚 举 属性 名 
概要 
Object.keys(0) 
参数 
0 


一 个 对 象 。 


返回 

一 个 包含 o 的 所 有 可 枚 举 自 有 “【 非 继承 ) 属性 的 名 字 的 数组 。 

描述 

Object.keys0O 返 回 指定 对 象 o 的 属性 名 组 成 的 数组 。 这 个 数组 只 包含 
那些 可 枚 举 并 且 直 接 定义 在 o 上 的 属性 的 名 字 ， 不 包含 继承 的 属性 。 

(关于 取得 不 可 枚 举 的 属性 名 的 方法 可 参阅 

Object.getOwnPropertyNames()。) 返回 数组 中 的 属性 名 的 顺序 即 它们 通 
过 forvin 循 环 枚 举 时 的 顺序 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 
入 一 个 对 象 。 


示例 





Object ,keySs({x:1,yY:2})V/=>["x"，"y"] 





参阅 

Object.getOwnPropertyNames()、5.5.4 节 、6.5 节 
Object.preventExtensions() 

禁止 在 一 个 对 象 上 添加 新 的 属性 

概要 


Object.preventExtensions(o) 


符 设 置 可 扩展 性 的 对 象 。 
返回 


传 入 的 参数 对 象 o。 

描述 

Object.preventExtensions() 将 o 的 可 扩展 性 设置 为 false， 之 后 将 不 能 
同 它 添加 新 的 属性 。 这 是 一 个 永久 性 的 改变 : 一 旦 一 个 对 象 设置 为 不 可 
扩展 的 ， 它 就 再 也 不 能 改 为 可 扩展 的 。 


注意 Object.preventExtensions(0) 不 会 影响 原型 链 ， 不 可 扩展 的 对 象 仍 
然 可 以 获得 新 的 继承 属性 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 
入 一 个 对 象 。 


参阅 

Object.freeze()、Object.isExtensible()、QObject.seal()、6.8.3 节 
Object.propertyIsEnumerable() 

检测 菏 个 属性 是 否 在 for/in 循 环 中 可 见 

概要 





object.propertyIsEnumerable(propname) 
参数 

propname 

包含 对 象 的 指定 属性 名 的 一 个 字符 串 。 
返回 


如 果 对 象 有 一 个 名 为 propname 的 非 继 承 属性 ， 并 且 该 属性 可 枚 举 ， 
则 返回 true， 这 意味 着 这 个 属性 可 以 通过 该 对 象 的 fovin 循 环 枚 举 。 


描述 





forin 语 句 志 有 历 给 定 对 象 的 可 枚 举 属 性 。 对 象 的 属性 不 全 是 可 枚 举 
的 : 那些 由 JavaScript 代 码 添 加 到 对 象 中 的 属性 是 可 枚 举 的 ， 但 那些 内 置 
对 象 的 预定 义 的 属性 〈 如 方法 ) 通常 不 可 枚 举 。propertyIsEnumerable() 
方法 提供 了 一 个 区 分 可 枚 举 与 不 可 枚 举 属性 的 方法 。 不 过 需要 注意 ， 
ECMAScript 标 准 规定 propertyIsSEnumerable() 不 检查 原型 链 ， 也 就 是 说 ， 
这 个 方法 只 适用 于 对 象 的 本 地 属性 ， 除 此 之 外 ， 没 有 可 用 于 测试 继承 属 
性 的 可 枚 举 性 的 方法 。 


示例 








Var o=new 0bject();// 创 建 一 个 对 象 

0.X=3.,14;// 定 义 一 个 属性 

o. propertyIsEnumerable(" x");//true: 属 性 x 是 本 地 属性 并 且 可 枚 举 
0.propertyIsEnumerable("y");//false:0 没 有 属性 y 
o.propertyIsEnumerable("toString");//false: toString 属 性 是 承继 来 的 
Object.prototype.propertyIsEnumerable("toString");//false: 不 可 枚 举 




































































参阅 

Function.prototype、Object.hasOwnProperty()、 第 6 章 
Object.seal() 

阻止 添加 或 删除 对 象 的 属性 

概要 

Object.seal(o) 

参数 

0 

待 封闭 的 对 象 。 

返回 

现在 处 于 封闭 状态 的 参数 对 象 o。 

描述 


Object.seal() 将 o 设 置 为 不 可 扩展 (参阅 
Object.preventExtensions0) ) ， 同 时 将 它 的 所 有 自 有 属性 设置 为 不 可 配置 
的 。 它 的 效果 为 阻止 添加 新 的 属性 以 及 阻止 删除 现 有 属性 。 封 闭 一 个 对 
象 是 永久 性 的 : 对 象 一 旦 封闭 ， 就 不 再 能 解 封 。 

注意 ，Object.seal0 不 仅 将 属性 设置 为 只 读 的 ， 这 是 Object.freeze0 的 
功能 。 还 要 注意 ，Object.seal() 不 会 影响 继承 属性 。 如 果 一 个 封闭 对 象 的 
原型 链 中 有 一 个 非 封 闭 对 象 ， 那 么 还 可 以 添加 或 删除 对 应 的 继承 属性 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 
入 一 个 对 象 。 


参阅 





Object.defineProperty()、Object.freeze()、Object.isSealed()、 
Object.preventExtensions()、6.8.3 节 


Object.toLocaleString() 

返回 对 象 的 本 地 化 的 字符 串 表 示 

概要 

object.toString() 

返回 

一 个 表示 该 对 象 的 字符 串 。 

摘 述 

这 个 方法 用 于 返回 一 个 表示 当前 对 象 的 字符 串 ， 使 用 合适 的 本 地 化 
格式 。Object 类 提供 的 默认 的 toLocaleString() 方 法 只 是 简单 地 调用 
toString() 方 法 ， 并 返回 后 者 返回 的 非 本 地 化 的 字符 串 。 不 过 要 注意 ， 其 
他 类 (包括 Array、Date 以 及 Number) 都 各 自 定义 自己 的 这 个 方法 的 版 


本 ， ee 定义 自己 的 类 时 ， 可 能 也 需要 履 盖 这 
上 万 \ 二 


参阅 


Array.toLocaleString()、Date.toLocaleString()、 
Number.toLocaleString()、Object.toString() 


Object.toString() 

定义 一 个 对 象 的 字符 串 表示 形式 

概要 

object.toString() 

返回 

一 个 表示 该 对 象 的 字符 串 。 

描述 

在 JavaScript 程 序 中 一 般 不 会 经 常 显 式 地 调用 toString0 方 法 。 一 般 情 
况 下 ， 在 对 象 中 定义 这 个 方法 ， 系 统 会 在 需要 时 自动 调用 它 以 便 将 该 对 
象 转 为 字符 串 。 

当 对 象 在 一 个 字符 串 上 下 文中 使 用 时 ，JavaScript 系 统 会 调用 相应 的 


toString() 方 法 来 将 该 对 象 转 为 字符 串 。 例 如 ， 把 一 个 对 象 传 入 期 望 参 数 
为 字符 串 的 函数 时 ， 这 个 对 象 会 转 为 字符 串 。 








alert(my_object); 





类 似 地 ， 当 使 用 “+” 操 作 符 将 对 象 与 字符 串 连接 时 ， 对 象 也 会 转化 
为 字符 串 。 





var msg='My object is:'+my_object; 





调用 toString() 方 法 时 没有 参数 ， 返 回 值 应 该 是 一 个 字符 串 。 为 了 便 
ee 


在 JavaScript 中 定义 目 定 义 类 时 ， 为 这 个 类 定义 一 个 toString0 方 法 是 
一 个 不 错 的 实践 。 如 果 没 有 定义 这 个 方法 ， 则 对 象 会 从 Object 类 继承 默 
认 的 toString0) 方 法 。 默 认 方 法 返回 的 字符 串 格 式 形 如 : 





[objectclass] 


其 中 class 是 该 对 象 的 类 : 值 
为 "Object"、 "String"、"Number"、"Function"、"Window"、 "Document" 等 
有 时 候 可 以 用 默认 的 toString0 方 法 的 这 个 行为 来 判断 未 知 对 象 的 类 型 或 
类 。 不 过 ， 由 于 大 多 数 对 象 都 有 目 定 义 版 本 的 toString0， 因 此 一 般 需 要 
在 对 象 上 显 式 地 调用 Object.toString() 方 法 ， 类 似 这 样 : 


Object .prototype.toString.apply(o); 


注意 ， 这 个 判断 未 知 对 象 的 技术 只 适用 于 内 置 对 象 。 自 定义 的 对 象 
类 有 一 个 "Object" 类 ， 在 这 种 情况 下 ， 可 以 使 用 Object.constructor 属 性 来 
获得 关于 这 个 对 象 的 更 多 信息 。 


在 调试 JavaScript 程 序 时 ，toString() 方 法 可 能 会 非常 有 用 ， 可 以 用 它 
输出 对 象 并 查看 它们 的 值 。 因 此 ， 为 所 创建 的 每 个 对 象 定义 一 个 
toString0) 方 法 是 个 不 错 的 主意 。 


里 然 toString0 方 法 通 第 由 系统 自动 调用 ， 但 有 了 时 也 需要 手动 调用 它 
们 。 比 如 ， 有 时 需要 将 某 个 对 象 显 式 转化 为 字符 串 ， 但 JavaScript 没 有 自 
动 做 这 个 转换 时 : 











y=Math .sqrt(x);// 计 算 一 个 数字 
ystr=y .toString();// 将 它 转 化 为 一 个 字符 串 





ee 在 这 个 例子 中 ， 数 字 有 一 个 可 用 于 强制 转换 的 内 置 toString0) 
二 


其 他 情况 下 ， 即 使 在 JavaScript 会 目 动 转换 的 上 下 文中 ， 也 可 以 选择 
使 用 toString0。 显 式 地 使 用 toString0 有 助 于 使 代码 更 加 清晰 : 


alert(my_obj.toString())， 





参阅 
Object.constructor、 Object.toLocaleString()、Object.valueOf() 


Object.valueOf() 
给 定 对 象 的 原始 值 
概要 
object.valueOf() 
返回 


与 指定 对 象 关联 的 原始 值 ， 如 果 存 在 这 样 一 个 值 的 话 。 如 果 没 有 与 
该 对 象 关 联 的 值 ， 则 返回 对 象 本 身 。 


描述 


对 象 的 valueOfO 方 法 返回 与 该 对 象 关联 的 原始 值 ， 如 果 存 在 这 样 一 
个 值 的 话 。 类 型 为 Object 的 对 象 没 有 原始 值 ， 这 个 方法 只 是 简单 地 返回 
该 对 象 本 里 。 


不 过 ， 对 类 型 为 Number 的 对 象 而 言 ，valueOfO 将 返回 该 对 象 表示 的 
原始 数字 值 。 类 似 地 ，Boolean 对 象 会 返回 一 个 关联 的 原始 布尔 值 ， 
String 对 象 则 返回 一 个 关联 的 字符 串 。 


valueOf() 方 法 很 少 需要 手动 调用 ， 在 需要 原始 值 时 ，JavaScript 会 自 
动 调用 这 个 方法 。 事 实 上 ， 由 于 有 对 valueOf() 方 法 的 自动 调用 ， 甚 至 很 
难 区 分 原始 值 和 它们 的 关联 对 象 。 例 如 ， 虽 然 typeof 操 作 符 能 告诉 你 字 
符 串 和 String 对 象 之 间 的 不 同 ， 但 在 实际 应 用 的 JavaScript 代 码 中 两 者 完 
全 辣 以 等 价 ; 


Number、Boolean 以 及 String 对 象 的 valueOfO 方 法 将 这 些 包 闭 对 象 转 
化 为 它们 所 表示 的 原始 值 。 传 入 数字 、 布 尔 值 、 字 符 串 到 ObjectO 构 造 
函数 时 则 进行 相反 的 操作 : 它 将 原始 值 包装 到 一 个 合适 的 对 象 包装 中 。 
在 绝 大 多 数 情 况 下 ，JavaScript 会 自动 处 理 这 种 原始 值 到 对 象 的 转换 ， 所 








以 很 少 需 要 这 样 调用 ObjectO 构 造 函 数 。 


在 有 些 情况 下 ， 你 可 能 想 为 自己 的 对 象 自 定义 一 个 valueOf0 方 法 。 
例如 ， 你 可 能 需要 定义 一 个 JavaScript 对 象 来 表示 复数 (一 个 实数 加 上 一 
个 虚数 ) 。 作 为 这 个 对 象 类 型 的 一 部 分 ， 你 可 能 需要 定义 执行 加 法 、 乘 
法 等 的 方法 《参阅 例 9-3) 。 但 你 可 能 也 想 丢 弃 复 数 的 虚 部 以 便 像 普通 
为 了 实现 这 些 功能 ， 你 可 能 需要 写 类 似 下 面 的 代 











Complex.prototype.valueOof=new Function("return this.real"); 








为 Complex 对 象 类 型 定义 这 个 valueOf() 方 法 后 ， 就 可 以 ， 例 如 ， 将 
一 个 复数 对 象 传 入 Math.sqrt()， 以 便 计 算 这 个 复数 的 实 部 的 平方 根 。 


参阅 

Object.toString() 
parseFloat() 

将 一 个 字符 串 转 为 数字 

概要 

parseFloat(s) 

参数 

s 

待 解析 并 转化 为 数字 的 字符 串 。 

返回 


解析 后 的 数字 ， 如 果 s 不 是 以 一 个 有 效 数 字 开 头 则 返回 NaN。 在 
JavaScript 1.0 中 ， 如 果 s 不 能 解析 为 数字 则 返回 0 而 不 是 NaN。 


描述 








parseFloat0 解 析 并 返回 s 中 出 现 的 第 一 个 数字 。 当 parseFloatO 在 s 中 
遇 到 一 个 不 是 该 数字 的 有 效 部 分 的 字符 时 ， 解 析 将 终止 ， 返 回 获得 的 
值 。 如 果 s 不 是 以 parseFloat() 能 解析 的 一 个 数字 开头 ， 则 函数 将 返回 非 
数字 值 NaN。 可 以 使 用 isNaN(O) 函 数 来 测试 返回 值 。 如 有 果 只 想 解 析 数 字 的 
整数 部 分 ， 可 使 用 parseIntO 代 蔡 parseFloat()。 

参阅 


isNaN()、parselInt() 


parselnt() 

将 一 个 字符 串 转换 为 整数 

概要 

parseInt(s) 

parseInt(sradix) 

参数 

s 

要 解析 的 字符 串 。 

radix 

一 个 可 选 的 整数 参数 ， 表 示 该 数字 将 解析 到 的 进 制 。 如 果 这 个 参数 
省 略 或 值 为 0， 则 该 数字 将 解析 为 十 进 制 ， 如 果 它 以 0x 或 0X 开 头 则 将 解 
ea 如 果 这 个 参数 小 于 2 或 大 于 36， 则 parseIntO 将 返回 

返回 


解析 过 的 数字 ， 如 果 s 不 以 一 个 有 效 的 整数 开头 则 返回 NaN。 在 
JavaScript 1.0 中 ，parseInt0 在 不 能 解析 s 时 返回 0 而 不 是 NaN。 


描述 


parseInt() 解 析 并 返回 s 中 出 现 的 第 一 个 数 子 〈 可 以 以 一 个 减 写 开 
头 ) 。 当 parseIntO 在 s 中 遇 到 一 个 不 是 指定 的 进 制 的 有 效 数 字 的 字符 
时 ， 解 析 将 终止 ， 同 时 返回 得 到 的 值 。 如 果 s 不 是 以 parseIntO 能 解析 的 
一 个 字符 开头 ， 则 本 函数 将 返回 非 数 字 值 NaN。 可 以 使 用 isNaNO 函 数 来 
测试 返回 的 值 。 


radix 参 数 指定 要 使 用 的 进 制 。 使 用 10 将 让 parseIntO 解 析 十 进 制 数 ; 
值 8 则 指定 解析 一 个 八进制 数 〈 使 用 数字 0 一 7) ;， 值 16 则 指定 一 个 十 六 
使 用 数字 0 一 9 以 及 字母 A~F。radix 可 以 是 2 一 36 之 间 的 任意 
值 。 





如 果 radix 是 0 或 未 指定 ， 则 parseInt() 将 尝试 判断 自 s 解 析出 的 数字 的 
进 制 。 如 果 s 以 0x 开 涉 〈 之 前 可 以 有 一 个 减 写 ) ， 则 parseIntO 将 把 s 剩 余 
J 在 其 他 情况 下 ，parseInt() 将 把 s 解 析 为 
一 个 十进制 数 。 


示例 





parseInt("19",10);// 返 回 19(10+9) 
parseInt("11",2);// 返 回 3(2+1) 
parseInt("17",8);// 返 回 15(8+7) 
parseInt("1f",16);// 返 回 31(16+15) 
parseInt("10");// 返 回 10 
parseInt("0x10");// 返 回 16 






































参阅 

isNaN()、parseFloat() 
RangekError 

当 一 个 数字 超出 合法 的 范围 时 抛 出 

对 象 一 错误 -RangeError 

构造 函数 


new RangeError() 


new RangeError(message) 
参数 
message 


提供 关于 异常 的 细节 信息 的 可 选 错误 消 恩 。 如 有 果 指 定 ， 则 这 个 参数 
将 用 做 当前 RangeError 对 象 的 message 属 性 的 值 。 


返回 

一 个 新 构造 的 RangeError 对 象 。 如 果 指 定 message 参 数 ， 则 Error 对 象 
将 把 它 作为 其 message 属 性 的 值 ; 在 其 他 情况 下 ， 它 将 使 用 预 设 的 默认 
值 作为 这 个 属性 的 值 。 不 使 用 new 操 作 符 ， 像 调用 函数 一 样 调用 
RangeError0 构 造 函 数 时 ， 它 的 行为 和 使 用 new 操 作 符 调用 时 一 样 。 

属性 

message 


提供 了 关于 当前 异常 的 细节 的 错误 消息 。 这 个 属性 的 值 为 传 入 构造 
函数 的 字符 串 或 者 预定 义 的 默认 字符 串 。 细 节 可 参阅 Error.message。 





DaqlIne 


一 个 指定 异常 类 型 的 字符 串 。 所 有 RangeError 对 象 的 这 个 属性 都 继 
承 上 自 值 "RangeError"。 


描述 

当 一 个 数值 不 在 合法 的 范围 内 时 ， 将 抛 出 RangeError 类 的 一 个 实 
例 。 例 如 ， 将 数组 的 长 度 设 置 为 负数 将 抛 出 一 个 RangeError。 关 于 抛 出 
及 捕获 异常 的 细节 可 参阅 Error。 


参阅 





Error、 Error.message、Error.name 


ReferenceError 





读 取 不 存在 的 变量 时 抛 出 
构造 函数 

new ReferenceError() 

new ReferenceError(message) 
参数 

message 


一 条 可 选 的 错误 消息 ， 用 于 提供 关于 该 异常 的 细节 。 如 采 指 定 ， 这 
个 参数 将 用 做 当前 ReferenceError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构造 的 ReferenceError 对 象 。 如 果 指 定 message 参 数 ， 则 对 应 
的 Error 对 象 将 把 它 用 做 自己 的 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 
使 用 预定 义 的 默认 字符 串 作 为 message 属 性 的 值 。 不 使 用 new 操 作 符 ， 像 
调用 函数 一 样 调用 ReferenceError0O 构 造 函 数 时 ， 它 的 行为 和 使 用 new 操 
作 符 调用 时 一 样 。 


属性 





message 


一 条 提供 关于 该 异 第 的 细 市 的 错误 消 轧 。 这 个 属性 的 值 为 传 入 构造 
函数 的 字符 串 或 者 是 预定 义 的 默认 字符 串 。 细 节 可 参阅 Error.message。 





DaqlIne 


一 个 指定 异常 类 型 的 字符 串 。 所 有 ReferenceError 对 象 的 这 个 属性 都 
继承 自 值 "ReferenceError"。 


描述 


试图 读 一 个 不 存在 的 变量 的 值 时 将 抛 出 一 个 ReferenceError 类 。 关 于 
异 稼 的 抛 出 和 捕获 的 细节 可 参阅 Error。 





参阅 

Error、 Error.message、Error.name 
RegExp 

用 于 模式 匹配 的 正则 表达 式 

直接 量 语法 

/pattern/attributes 

构造 函数 

new RegExp(pattern,attributes) 

参数 

pattern 

一 个 指定 正则 表达 式 的 模式 的 字符 串 或 另 一 个 正则 表达 式 。 

attributes 

一 个 可 选 字符 串 ， 包 含 任意 "g"、"i" 以 及 "m" 属 性 ， 分 别 指定 全 局 、 
区 分 大 小 写 以 及 多 行 匹 配 。 在 ECMAScript 标 准 化 之 前 "m" 属 性 不 可 用 。 
人 则 这 个 参数 必须 省 

返回 

一 个 新 的 RegExp 对 象 ， 内 容 为 指定 的 模式 及 标志 。 如 果 pattem 参 数 
古 一 个 正则 表达 式 而 不 是 一 个 字符 串 ， 则 RegExp() 构 造 函 数 将 使 用 和 指 
定 的 RegExp 一 样 的 模式 及 标志 来 创建 一 个 新 的 RegExp 对 象 。 如 果 不 市 
new 操 作 符 ， 像 调用 函数 一 样 调用 RegExp()， 则 它 的 行为 和 带 new 操 作 
从 调用 时 一 样 ， 不 过 ， 当 pattem 是 一 个 正则 表达 式 时 有 所 不 同 ， 在 这 种 
情况 下 ， 它 只 是 简单 地 返回 pattern， 而 不 会 新 创建 一 个 RegExp 对 象 。 


已 A 
开 吊 


SyntaxError 


如 果 pattern 不 是 一 个 合法 的 正则 表达 式 ， 或 attributes 参 数 包 含 
除 "g"、 "以 及 "m" 外 的 字符 。 


TypeError 

如 果 pattern 是 一 个 RegExp 对 象 ， 同 时 没有 省 略 attributes 参 数 。 
实例 属性 

global 





当前 RegExp 对 象 是 否 有 "g" 属 性 。 
ignoreCase 


当前 RegExp 对 象 是 否 有 "i" 属 性 。 





lastIndex 
最 后 匹配 的 字符 的 位 置 ， 用 于 在 字符 串 中 找到 多 个 匹配 的 情况 。 


multiline 





当前 RegExp 对 象 是 否 有 "m" 属 性 。 


source 
对 应 正则 表达 式 的 源 文 本 。 
2 

exec() 

执行 强大 的 、 通 用 的 模式 匹配 。 
test() 


测试 一 个 字符 串 是 否 包 含 某 个 模式 。 


描述 

RegExp 对 象 代表 一 个 正则 表达 式 ， 这 是 一 个 用 于 在 字符 串 上 执行 
强大 的 模式 匹配 的 工具 。 关 于 正则 表达 式 的 语法 及 使 用 的 完整 细节 可 参 
阅 第 10 章 。 


参阅 





第 10 章 。 
RegExp.exec!() 

通用 的 模式 匹配 

概要 

regexp.exec(string) 

参数 

string 

要 搜索 的 字符 串 。 

返回 


一 个 包含 匹配 结果 的 数组 ， 如 果 没 有 找到 匹配 内 容 则 为 nol。 返回 
的 数组 的 格式 的 描述 见 下 面 。 


抛 出 

TypeError 

如 果 在 非 RegExp 对 象 上 调用 这 个 方法 。 
描述 


exec() 是 所 有 RegExp 和 String 模 式 匹 配方 法 中 最 强大 的 一 个 。 它 是 一 
个 通用 的 方法 ， 某 些 地 方 用 起 来 比 RegExp.test()、String.search()、 





String.replace() 以 及 String.match() 更 复杂 。 


exec() 在 string 中 搜索 匹配 regexp 的 文本 。 如 果 它 找到 一 个 匹配 项 ， 

它 将 返回 一 个 由 匹配 结果 组 成 的 数组 ;和 否则， 它 将 返回 null。 返 回 数组 
的 元 素 0 是 匹配 的 文本 。 元 素 1 是 匹配 regexp 中 第 一 个 带 圆 括号 的 子 表达 
式 的 文本 ， 如 果 存 在 这 样 的 子 表 达 式 的 话 。 元 素 2 包含 匹配 第 二 个 子 表 
达 式 的 文本 ， 依 次 类 推 。 和 通常 一 样 ， 数 组 的 length 属 性 指定 该 数组 中 
包含 的 元 素 个 数 。 除 了 数组 元 素 和 length 属 性 外 ，exec() 返 回 的 值 还 有 另 
外 两 个 属性 。index 属 性 指定 匹配 的 文本 的 第 一 个 字符 的 位 置 。input 属 
性 则 指 代 string。 ee 本 函数 返回 的 
数组 和 String.match() 方 法 返回 的 数组 一 样 。 


在 一 个 非 全 局 的 模式 上 调用 exec() 时 ， 它 将 执行 搜索 并 返回 前 面 描 
述 的 结果 。 不 过 ， 如 果 regexp 是 一 个 全 局 正则 表达 式 ，exec() 的 行为 将 
稍微 复杂 一 点 。 它 从 regexp 的 lastIndex 属 性 指定 的 位 置 开 始 搜索 ， 当 它 
找到 一 个 匹配 项 时 ， 它 将 lastIndex 设 置 为 该 匹配 之 后 的 第 一 个 字符 的 位 
置 。 这 意味 着 可 以 重复 调用 exec()， 以 便 循环 遍历 一 个 字符 串 中 所 有 的 
匹配 项 。 如 果 exec0 找 不 到 匹配 项 ， 它 将 返回 null 并 将 lastIndex 重 置 为 
0。 如 果 在 成 功 地 找到 一 个 字符 串 的 匹配 项 后 ， 立 刻 开始 搜索 一 个 新 的 
字符 串 ， 就 必须 小 心地 手动 将 lastIndex 重 置 为 0。 


注意 ，exec() 总 是 包含 它 返 回 的 数组 中 的 每 一 个 匹配 项 的 全 部 细 
节 ， 无 论 regexp 是 否 为 一 个 全 局 模式 。 这 是 exec0 和 String. matchO 个 后 ` 同 的 
地 方 ， 后 者 在 使 用 全 局 匹配 时 只 返回 很 少 的 信息 。 要 想 获 得 一 个 全 局 模 
式 的 完整 四 配 信 息 ， 唯 一 的 方法 是 在 一 个 循环 中 重复 调用 exec() 方 法 。 


示例 


a 可 以 在 一 个 循环 中 使 用 execO 来 在 一 个 字符 串 中 找到 所 有 [匹配 项 。 
多 如 























var pattern=/\bJava\w*\b/g; 

var text="JavaScript is more fun than Java or JavaBeans!"; 
Var result,; 

while((result=pattern.exec(text))!=null){ 
alert("Matched'"+result[0]+ 

"at position"+result.index+ 

"next search begins at position"+pattern.lastIndex); 


参阅 


RegExp.lastIndex、 RegExp.test()、String.match()、String.replace()、 
String.search()、 第 10 章 


RegExp.global 
正则 表达 式 是 否 为 全 局 匹配 
概要 





regexp.global 
描述 


gobal 是 RegExp 对 象 的 一 个 只 读 的 布尔 值 属 性 。 它 指定 一 个 特殊 的 
ee 也 就 是 说 ， 创 建 它 时 是 否 市 有 "g" 属 
性 。 





RegExp.ignoreCase 

一 个 正则 表达 式 是 否 忽 略 大 小 写 

概要 

regexp.ignoreCase 

描述 

ignoreCase 是 RegExp 对 象 的 一 个 只 读 的 布尔 值 属 性 。 它 指定 一 个 正 
则 表达 式 是 否 执行 忽略 大 小 写 的 匹配 ， 也 就 是 说 ， 创 建 它 时 是 否 带 
有 "i" 属 性 。 
RegExp.lastIndex 

下 一 个 匹配 开始 的 位 置 

概要 


regexp.lastIndex 
描述 


lastIndex 是 RegExp 对 象 的 一 个 可 读 / 写 的 属性 。 对 设置 "g" 属 性 的 正 
则 表达 式 而 言 ， 它 的 值 为 一 个 数字 ， 指 定 RegExp.exec() 和 RegExp.test() 
方法 最 后 一 个 匹配 项 之 后 的 第 一 个 字符 的 位 置 。 这 些 方法 使 用 这 个 属性 
作为 它们 下 一 次 搜索 的 开始 位 置 。 这 允许 重复 调用 这 些 方法 ， 来 循环 裔 
历 一 个 字符 串 中 的 所 有 匹配 项 。 注 意 ， 那 些 没有 设置 "g" 属 性 的 非 全 局 
模式 对 应 的 RegExp 对 象 不 会 使 用 lastIndex。 

这 个 属性 是 可 读 / 写 的 ， 所 以 可 以 在 任何 时 候 设置 它 ， 以 便 定 义 下 
一 次 搜索 在 目标 字符 串 中 的 开始 位 置 。execO0 和 test0 在 没 找到 匹配 项 

(或 男 一 个 匹配 项 ) 时 会 自动 将 lastIndex 设 置 为 0。 如 果 在 一 次 成 功 的 匹 

配 之 后 搜索 一 个 新 的 字符 串 ， 一 般 需 要 显 式 地 把 这 个 属性 设置 为 0。 


参阅 














RegExp.exec()、RegExp.test() 


RegExp.source 
正则 表达 式 的 文本 
概要 
regexp.source 
描述 
source 是 RegExp 对 象 的 一 个 只 读 字 符 串 属性 。 它 的 值 为 该 RegExp 模 


式 的 文本 内 容 。 这 个 文本 不 包括 正则 表达 式 直接 量 中 的 分 隔 斜 杠 ， 也 不 
合 "g"、" 以 及 "m" 属 性 。 





RegExp.test() 


测试 一 个 字符 串 是 否 匹 配 一 个 模式 


概要 


regexp.test(string) 


参数 

string 

符 测 试 的 字符 器。 
返回 


如 果 string 包 含 匹 配 regexp 的 文本 则 返回 true; 否则 返回 false。 


异常 
TypeError 

如 果 在 一 个 非 RegExp 对 象 上 调用 这 个 方法 。 
描述 


test(O) 用 于 测试 字符 串 string 是 否 包 含 匹 配 regexzp 的 文本 。 如 果 包 含 ， 
它 返回 true; 否则 ， 它 返回 false。 调 用 一 个 RegExp 对 象 rz 的 test0) 方 法 并 传 
入 字符 串 s 等 同 于 下 面 的 表达 式 : 





(r.exec(s)!=null) 





示例 





var pattern=/java/i,; 
pattern.test("JavaScript" );// 返 回 true 
pattern.test("ECMAScript");// 返 回 false 























参阅 


RegExp.exec()、RegExp.lastIndex、String.match()、String.replace()、 
String.substring()、 第 10 章 


RegExp.toString() 

将 一 个 正则 表达 式 转换 为 字符 串 

重 写 Object.toString() 

概要 

regexp.toString() 

返回 

regexp 的 字符 串 表示 。 

异常 

TypeError 

如 果 在 一 个 非 RegExp 对 象 上 调用 这 个 方法 。 

描述 

RegExp.toString() 方 法 使 用 正则 表达 式 直接 量 的 格式 返回 一 个 正则 
表达 式 的 字符 串 表 示 。 注 意 ， 这 个 方法 的 实现 上 并 不 要 求 添加 转 义 序 
列 ， 以 便 保证 返回 的 字符 串 是 合法 的 正则 表达 式 直 接 量 。 设 想 由 表达 式 
new ”RegExp(""，"g") 创 建 的 正则 表达 式 ，RegExp.toString() 的 一 个 实现 
可 能 会 返回 Mg; 它 也 可 能 添加 一 个 转 义 序列 并 返回 N/g。 
String 

字符 串 文 持 


构造 沙 数 





new String(s)// 构 造 函数 
function String(s)// 转 换 函 数 





参数 


S 

符 存 储 到 一 个 String 对 象 中 或 转换 为 一 个 原始 字符 串 的 值 。 

返回 

当 使 用 new 操 作 符 将 String0 作 为 一 个 构造 函数 使 用 时 ， 它 将 返回 一 
个 String 对 象 ， 内 容 为 字符 串 s 或 s 的 字符 串 表 示 。 当 不 带 new 操 作 符 调用 
和 

属性 

length 

该 字符 串 中 的 字符 数 。 

万 法 

charAt() 

取出 一 个 字符 串 中 指定 位 置 的 字符 。 

charCodeAt() 


返回 一 个 字符 串 中 指定 位 置 的 字符 的 编码 。 


concat() 
将 一 个 或 多 个 值 连接 成 一 个 字符 串 。 
indexOf() 

在 指定 字符 串 中 寻找 一 个 字符 或 子 串 。 
lastIndexOf() 


在 指定 字符 串 中 同 后 寻找 一 个 字符 或 子 串 。 


localeCompare() 

使 用 本 地 定义 的 顺序 比较 字符 串 。 
match() 

使 用 正则 表达 式 执行 模式 匹配 。 
replace() 

使 用 正则 表达 式 执 行 碍 找 与 蔡 换 操作 。 
search() 

在 一 个 字符 串 中 查找 匹配 某 个 正则 表达 式 的 子 串 。 
slice() 

返回 字符 串 的 一 个 切片 或 子 串 。 
split() 


在 指定 的 分 隔 符 字符 串 或 正则 表达 式 处 断 开 ， 将 一 个 字符 串 分 割 为 
由 字符 串 组 成 的 数组 。 


substr() 


提取 字符 串 的 一 个 子 串 ，substring() 的 一 个 变 体 。 





substring() 


提取 字符 串 的 一 个 子 串 。 


toLowerCasel() 
返回 指定 字符 串 的 一 份 副本 ， 其 中 所 有 的 字符 都 已 转换 为 小 写 。 
toString() 


返回 原始 的 字符 串 值 。 


toUpperCase() 

返回 指定 字符 串 的 一 份 副 本 ， 其 中 所 有 的 字符 都 已 转换 为 大 写 。 

trim0) 

返回 指定 字符 串 的 一 份 副本 ， 其 中 前 后 的 空白 字符 都 已 删除 。 

valueOf() 

返回 原始 的 字符 串 值 。 

静态 方法 

String.fromCharCode0) 

使 用 作为 参数 传 入 的 字符 编码 创建 一 个 新 的 字符 串 。 

HTML 方法 

从 早期 的 JavaScript 开 始 ，String 类 就 定义 了 若干 方法 ， 将 字符 串 置 
入 HTML 标 签 以 返回 一 个 修改 的 字符 串 。 这 些 方法 一 直 没 有 成 为 
ECMAScript 的 标准 ， 但 在 客户 端 或 服务 器 端的 JavaScript 代 码 中 动态 生 


成 HIML 时 非常 有 用 。 如 有 果 想 使 用 非 标 准 的 方法 ， 可 以 使 用 类 似 这 样 的 
代码 来 创建 一 个 粗 体 的 红色 的 超 链 接 的 HTML 源 码 : 








Var s="click here!",; 
var html=s.bold().1link("javascript:alert('hello')").fontcolor("red"); 





ee 由 于 这 些 不 是 标准 方法 ， 因 此 在 接 下 来 的 页 面 中 它们 没有 单独 的 参 
条 目 : 


anchor(name) 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 aname= 之 环境 中 。 
bigQ) 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <big 二 环境 中 。 


blink() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 二 blink 二 环境 中 。 
bold() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 生 b> 环 境 中 。 
fixed() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <tt 二 环境 中 。 
fontcolor(color) 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 二 font color= 之 环境 中 。 
fontsize(size) 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 二 font size= 之 环境 中 。 
italics() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <i> 环 境 中 。 
link(url) 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <a href= 过 环境 中 。 
small() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <small 二 环境 中 。 
strike() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 二 strike 二 环境 中 。 
sub() 


返回 该 字符 串 的 一 个 副本 ， 在 一 个 和 sub> 环 境 中 。 


sup() 

返回 该 字符 串 的 一 个 副本 ， 在 一 个 <sup 二 环境 中 。 

描述 

String 是 JavaScript 中 的 一 种 原始 数据 类 型 。String 类 类 型 提供 了 寿 干 
操作 原始 池 符 串 值 的 方法 。String 对 象 的 length 属 性 指定 该 字符 串 中 的 学 
符 的 个 数 。String 关 也 定义 在 干 操作 字符 串 的 方法 ， 例 如 ， 有 一 些 从 字 
符 串 中 提取 字符 或 子 串 的 方法 ， 还 有 一 些 从 字符 串 中 搜索 字符 或 子 串 的 
方法 。 注 意 ，JavaScript 的 字符 串 是 不 可 变 的 : String 类 的 所 有 方法 都 不 
允许 改变 东 个 字符 串 的 内 容 。 那 些 像 String.toUpperCase0 之 关 的 方法 返 
回 一 个 全 新 的 字符 串 ， 而 没有 修改 原始 字符 串 。 

在 ECMAScript 5 以 及 许多 早 于 ES5 的 JavaScript 实 现 中 ， 字 符 串 的 行 
为 类 似 于 每 个 元 素 为 一 个 单字 符 的 字符 串 中 只 读数 组 。 例 如 ， 要 提取 字 
符 串 s 的 第 三 个 字符 ， 可 以 使 用 s[2] 来 代 蔡 s.charAt(2)。 在 一 个 字符 串 上 
使 用 fovin 语 句 时 ， 它 将 壳 历 该 字符 串 中 的 每 一 个 字符 。 

参阅 

第 3 疙 。 
String.charAtl() 

取得 一 个 字符 串 中 第 "np" 个 字符 

概要 

string.charAt(n) 

参数 

n 

锅 望 返回 的 字符 在 字符 串 string 中 的 索引 。 

返回 


字符 串 string 的 第 n 个 字符 。 

描述 

String.charAt() 返 回 字 符 串 string 中 的 第 n 个 字符 。 字 符 串 的 第 一 个 字 
符 的 编号 为 0。 如 果 n 不 在 0 一 string.length-1 之 间 ， 这 个 方法 将 返回 一 个 
空 字符 如 。 注 意 ，JavaScript 中 并 没有 字符 数据 类 型 ， 所 以 返回 的 字符 实 
际 上 有 是 一 个 长 度 为 1 的 字符 串 。 

参阅 

String.charCodeAt()、String.indexOf()、String.lastIndexOf() 
String.charCodeAt() 

取得 字符 串 中 第 n 个 字符 的 编码 

概要 

string.charCodeAt(n) 

参数 

n 
返回 编码 的 字符 的 索引 。 
回 


string 中 第 n 个 字符 的 Unicode 编 码 。 返 回 的 值 是 一 个 16 位 的 整数 ， 值 
在 0 一 65 535 之 间 。 


描述 

charCodeAt() 类 似 charAt()， 不 同 之 处 是 它 返 回 指 定位 置 的 字符 的 编 
人 码 ， 而 不 返回 包含 该 字符 的 子 串 。 如 果 n 为 负数 或 大 于 等 于 字符 串 的 长 
度 ， 则 charCodeAtO 将 返回 NaN。 


关于 从 Unicode 编 码 创 建 字 符 串 的 方法 可 参阅 


ey 


启 





String.fromCharCode()。 
参阅 
String.charAt()、String.fromCharCode() 
String.concat() 
连接 字符 串 
概要 
string.concat(value,...) 
参数 
value,... 
一 个 或 多 个 待 连接 为 字符 串 的 值 。 
返回 
由 每 个 参数 连接 为 string 而 组 成 的 新 的 字符 串 。 
在 述 
concat() 将 它 的 每 个 参数 转换 为 字符 串 《如 果 必 要 的 话 ) 并 将 它们 
0 到 string 的 末尾 。 它 返回 最 后 的 连接 结果 。 注 意 string 本 身 没 


String.concatO 与 Array.concat0 类 似 。 注 意 使 用 “+" 操 作 符 来 执行 字 
符 串 连接 经 常 更 简单 一 些 。 


参阅 


a 


Array.concat() 


String.fromCharCodel() 


从 字符 编码 创建 一 个 字符 串 

概要 

String.fromCharCode(c1,c2,…) 

参数 

Cl,c2,... 

指定 待 创建 字符 串 中 的 字符 的 Unicode 编 码 ， 一 个 或 多 个 整数 。 

返回 

一 个 新 的 字符 串 ， 内 容 为 指定 编码 对 应 的 字符 。 

描述 

这 个 静态 方法 提供 一 个 通过 指定 每 个 字符 的 Unicode 编 码 数 字 来 创 
建 字 符 串 的 方式 。 注 意 ， 作 为 一 个 静态 方法 ，fromCharCode() 是 String() 
构造 函数 的 一 个 属性 ， 实 际 上 不 是 字符 串 或 String 对 象 的 方法 。 


String.charCodeAtO 与 这 个 方法 对 应 ， 它 提供 一 个 取得 指定 字符 串 中 
单个 字符 的 编码 的 方法 。 


示例 














// 创 建 字符 串 "he11o" 
var s=String.fromCharCode(104,101,108,108,111); 











参阅 

String.charCodeAt0 
String.indexOf() 

搜索 一 个 字符 串 


概要 
string.indexOf(substring) 
string.indexOf(substring,start) 
参数 

substring 

要 在 string 中 搜索 的 子 串 。 


Start 


一 个 可 选 的 整数 参数 ， 指 定 该 次 搜索 在 字符 串 string 中 的 开始 位 
置 。 合 法 的 值 为 0( 字 符 串 中 的 第 一 个 字符 的 位 置 ) 到 string.length- 
1 字符 串 中 最 后 一 个 字符 的 位 置 ) 。 如 果 省 略 了 这 个 参数 ， 则 搜索 将 
从 给 定 字 符 串 的 第 一 个 字符 开始 。 


返回 

在 字符 串 string 中 start 位 置 之 后 ，substring 第 一 次 出 现 的 位 置 ， 如 果 
没有 找到 则 返回 -1 

描述 


String.indexOfO 搜 索 指定 的 字符 串 string， 从 前 到 后 搜索 ， 检 碍 它 是 
否 包 含 指定 的 子 串 substring。 搜 索 开始 于 string 中 的 start 位 置 ， 如 果 没 有 
指定 start 则 从 string 的 开头 开始 搜索 。 如 果 发 现 了 子 串 substring， 册 
String.indexOfO 将 返 回 substring 在 string 中 第 一 次 出 现时 第 一 个 字符 所 在 
的 位 置 。string 中 字符 的 位 置 从 0 开始 编号 。 


如 果 在 string 中 没有 找到 substring， 则 String.indexOf() 返 回 -1 


参阅 








String.charAt()、String.lastIndexOf()、String.substring() 


String.lastIndexOf() 


从 后 面 开始 搜索 一 个 字符 串 

概要 

string.lastIndexOf(substring) 

string.lastIndexOf(substring,start) 

参数 

substring 

要 在 字符 串 string 中 搜索 的 子 串 。 

start 

一 个 可 选 的 整数 参数 ， 指 定 string 中 搜索 开始 的 位 置 。 合 法 值 为 
0 该 字符 串 中 第 一 个 字符 的 位 置 ) 到 string.length-1( 该 字符 串 中 最 后 
一 个 字符 的 位 置 ) 。 如 果 省 略 这 个 参数 ， 它 将 从 字符 串 string 的 最 后 一 
个 字符 开始 搜索 。 

返回 


子 串 substring 在 字符 串 string 的 start 位 置 之 前 最 后 一 次 出 现 的 位 置 ， 
如 有 果 没 有 找到 则 返回 -1。 


描述 


String.lastIndexOfO 从 字符 串 string 的 结尾 开始 搜索 到 开头 ， 检 查 它 
是 否 包 含 子 串 substring。 搜 索 开 始 于 字符 串 string 中 的 start 位 置 ， 如 果 没 
有 指定 start 则 开始 于 string 的 尾部 。 如 果 找 到 子 串 substring， 则 
String.lastIndexOf() 将 返回 该 子 串 的 第 一 个 字符 的 位 置 。 由 于 本 方法 从 字 
符 串 string 的 末尾 搜索 到 开头 ， 因 此 找到 的 第 一 个 匹配 子 串 将 是 string 中 
start 位 置 前 的 最 后 一 个 匹配 。 


如 果 没 有 找到 指定 子囊 ， 则 String.lastIndexOfO 将 返回 -1。 


注意 ， 虽 然 String.lastIndexOf() 从 字符 串 string 的 末尾 搜索 到 开始 ， 
它 仍然 将 string 中 的 字符 从 开头 开始 编号 。string 中 的 第 一 个 字符 的 位 置 








为 0， 最 后 一 个 的 位 置 为 string.length-1。 

参阅 

String.charAt()、String.indexOf()、String.substring() 
String.length 

"A 

概要 

string.length 

描述 

String.length 属 性 是 一 个 只 读 的 整数 ， 指 明 指 定 的 字符 串 string 中 的 
字符 个 数 。 对 任意 字符 串 s 来 说 ， 最 后 一 个 字符 的 索引 都 是 s.length-1。 


字符 串 的 length 属 性 不 会 在 fovin 循 环 中 枚 举 ， 也 不 可 通过 delete 操 作 符 删 
除 。 





String.localeComparel() 
使 用 本 地 特定 的 顺序 比较 两 个 字符 串 
概要 
string.localeCompare(target) 
参数 
target 
要 与 string 使 用 区 分 地 区 设置 的 方式 比较 的 字符 串 。 
返回 
一 个 表示 比较 结果 的 数字 。 如 果 string 比 target“ 小 ”>， 则 


localCompare0 将 返回 一 个 比 0 小 的 数 。 如 果 string 比 target“ 大 ”， 则 本 方 
法 将 返回 一 个 比 0 大 的 数 。 如 果 这 两 个 字符 串 相同 ， 或 者 根据 本 地 顺序 
约定 无 法 区 分 ， 则 本 方法 返回 0。 


描述 

当 在 字符 串 上 使 用 “<” 或 “二 ”操作 符 时 ， 它 们 只 比较 这 些 字符 的 
Unicode 编 码 ， 而 不 考虑 本 地 的 顺序 。 这 种 方式 产生 的 顺序 并 不 总 是 正 
确 。 比 如 ， 在 西班牙 语 中 ， 字 母 "ch" 习 惯 上 当做 一 个 单独 的 字母 ， 排 在 
字符 "c" 和 "d" 之 间 。 

localeCompare() 提 供 了 一 个 根据 默认 的 本 地 排序 来 比较 字符 串 的 方 
法 。ECMAScript 标 准 没 有 指定 本 地 化 比较 如 何 完 成 ， 这 个 函数 利用 底 
层 的 操作 系统 提供 的 排序 。 

示例 


下 面 的 代码 将 使 用 本 地 化 顺序 来 排序 一 个 字符 串 数组 : 














var strings;// 待 排序 的 字符 串 数组 ， 己 在 别处 初始 化 
strings.sort(function(a,b){return a.localeCompare(b)}); 




















String.match() 
找到 一 个 或 多 个 正则 表达 式 匹 配 结 
概要 
string.match(regexp) 
参数 
regexp 


一 个 指定 要 匹配 的 模式 的 RegExp 对 象 。 如 果 这 个 参数 不 是 一 个 
RegExp 对 象 ， 则 它 将 先 被 传 入 RegExpO 构 造 函 数 ， 后 转换 为 RegExp 对 
象 。 


返回 


一 个 包含 匹配 结果 的 数组 。 数 组 的 内 容 取 决 于 regexp 是 否 设 置 
了 "g" 属 性 。 关 于 返回 值 的 细节 在 下 面 的 描述 部 分 。 


描述 


match() 在 字符 串 string 中 寻找 一 个 或 多 个 regexp 的 匹配 结果 。 这 个 方 
法 的 行为 取决 于 regexp 是 否 有 "g" 属 性 (关于 正则 表达 式 的 完整 细节 请 参 
阅 第 10 章 ) 。 


如 果 regexp 没 有 "g" 属 性 ，match() 将 只 在 string 中 执行 一 次 匹配 。 如 
果 没 有 找到 [匹配 结果 ，match() 将 返回 null。 在 其 他 情况 下 ， 它 将 返回 一 
个 包含 它 所 发 现 的 匹配 结果 的 信息 的 数组 。 该 数组 的 元 素 0 为 匹配 文 
本 ， 剩 下 的 元 系 为 匹配 正则 表达 式 中 的 圆 括号 子 表达 式 的 文本 。 除 了 这 
些 常 规 的 数组 元 素 ， 这 个 返回 的 数组 还 有 两 个 额外 的 对 象 属性 。 其 中 
index 属 性 指明 了 匹配 文本 在 string 中 的 开始 位 置 ，input 属 性 则 是 对 该 
string 本 号 的 引用 。 


如 果 regexp 有 "g" 标 志 ， 则 match() 将 执行 一 次 全 局 搜索 ， 在 string 中 
寻找 所 有 [匹配 的 子 串 。 如 果 没 有 找到 匹配 结果 则 返回 nul， 如 果 找 到 一 
个 或 多 个 匹配 结果 则 返回 一 个 数组 。 然 而 ， 全 局 匹配 返回 的 数组 的 内 容 
与 非 全 局 匹配 返回 的 数组 内 容 很 不 一 样 。 在 全 局 匹配 的 情况 下 ， 数 组 元 
系 包 售 string 中 的 每 一 个 匹配 子 串 ， 同 时 返回 的 数组 没有 index 和 input 属 
性 。 注 意 对 于 全 局 匹配 ，match0 不 会 提供 关于 圆 括号 子 表达 式 的 信息 ， 
也 不 会 记录 每 个 匹配 子 串 在 string 中 的 位 置 。 如 果 和 希望 在 全 局 搜索 时 取 
得 这 些 信息 ， 可 以 使 用 RegExp.exec()。 

















示例 


下 面 的 全 局 匹配 将 找 出 一 个 字符 串 中 的 所 有 数字 : 





"1 plus 2 equals 3".match(A\d+/g9)// 返 回 ["1","2","3"] 














下 面 的 非 全 局 匹配 使 用 更 复杂 的 带 有 圆 括号 子 表达 式 的 正则 表达 
式 。 它 思 配 一 个 URL， 其 了 了 表达 式 则 允 配 对 应 的 协议 、 主 机 以 及 该 URI 
4 路 径 部 分 : 


var url=/(\w+):\/\/([\Ww.]+)\/(\S*)/; 

Var text="Visit my home page at http://www.isp.com/~david",; 
var result=text.match(url1); 

if(result!=null){ 

var fullurl=result[0];// 包 含 "http://www.isp.com/~david" 

var protocol=result[1];// 包 含 "http" 

var host=result[2];// 包 含 "www.isp.com" 

var path=result[3];// 包 含 "~david" 











参阅 


RegExp、 RegExp.exec()、RegExp.test()、String.replace()、 
String.search()、 第 10 章 


String.replacel() 
替换 匹配 给 定 正 则 表达 式 的 《一 个 或 多 个 ) 子 串 
概要 
string.replace(regexp,replacement) 
参数 
regexp 
指定 了 要 蔡 换 的 模式 的 RegExp 对 象 。 如 果 这 个 参数 是 一 个 字符 


串 ， 它 将 用 做 一 个 要 搜索 的 直接 量 文本 模式 它 将 不 会 先 转化 为 
RegExp 对 象 。 





replacement 


一 个 内 容 为 瞧 换 文本 的 字符 串 ， 或 者 一 个 函数 ， 用 于 在 调用 时 生成 
对 应 的 蔡 换 文本 。 细 市 可 参阅 描述 部 分 。 


返回 
一 个 新 的 字符 串 ， 其 中 匹配 regexp 的 第 一 个 或 所 有 的 地 方 已 伏 换 为 


replacement。 


描述 


replace(0 在 字符 串 string 上 执行 得 找 与 蔡 换 的 操作 。 它 在 string 中 搜索 
一 个 或 多 个 匹配 regexp 的 子 串 并 使 用 replacement 蔡 换 。 如 果 regexp 指 定 
全 局 属性 "g"， 则 replace() 将 蔡 换 所 有 [匹配 的 子囊。 在 其 他 情况 下 ， 它 只 
替换 第 一 个 匹配 的 子 串 。 


replacement 可 以 是 一 个 字符 串 或 一 个 函数 。 如 果 它 是 一 个 字符 串 ， 
则 每 个 匹配 子 捉 部 将 蔡 换 为 该 子 串 。 注意 replacement 字 符 串 中 的 $ 字 符 
1 就 像 下 表 显 示 的 ， 它 表示 模式 匹配 中 的 一 个 字符 串 将 在 从 
用 。 


字符 替换 

$1，$，,,,，$99 ”匹配 第 1 ~99 个 regexp 中 的 圆 括号 子 表达 式 的 文本 
由 匹配 7egexp 的 子囊 

$ 匹配 子 串 的 左边 文本 

4 匹配 子 串 的 右边 文本 

$4 美元 符号 


ECMAScript 第 3 版 定义 replace() 的 replacement 参 数 可 以 用 一 个 函数 
来 代 蔡 字符 串 。 在 使 用 函数 的 情况 下 ， 这 个 函数 将 在 每 个 匹配 结果 上 调 
用 ， 它 返回 的 字符 串 则 将 作为 蔡 换 文本 。 传 入 该 水 数 的 第 一 个 参数 是 丐 
配 该 模式 的 字符 串 。 接 下 来 的 参数 是 匹配 该 模式 中 的 某 个 圆 括号 子 表 达 
式 的 字符 串 ， 可 能 有 0 个 或 多 个 这 样 的 参数 。 下 一 个 参数 则 是 一 个 整 
数 ， 指 定 String 中 出 现 匹 配 结果 的 位 置 ， 最 后 一 个 参数 是 string 本 里。 


示例 


确保 单词 "JavaScript" 的 大 小 写 是 正确 的 : 








text.replace(/javascript/i,"Javascript"); 





将 一 个 单独 的 名 字 从 格式 "Doe,John" 转 换 为 "John Done" 格 式 : 





name.replace(/(\w+)\s*,\s*(\w+)/,"$2$1"); 





将 所 有 双 引 号 丛 换 为 成 对 的 前 后 单 引 号 : 








text.replace(/"([^"]*)"/g,"" "$1 四 





将 一 个 字符 串 中 所 有 单词 的 首 字 母 大 写 : 





text.replace(/\b\w+\b/g,function(word){ 
return word.substring(0,1).toUpperCase()+ 
word,.substring(1); 


}); 





参阅 


RegExp、 RegExp.exec()、RegExp.test()、String.match()、 
String.search()、 第 10 章 


String.search() 


根据 一 个 正则 表达 式 碍 找 
概要 





string.search(regexp) 

参数 

regexp 

一 个 RegExp 对 象 ， 指 定 要 在 字符 串 string 中 得 找 的 模式 。 如 果 这 个 
参数 不 是 一 个 RegExp， 它 将 先 传 入 RegExp() 构 造 函 数 ， 后 转换 为 一 个 
RegExp 对 象 。 


返回 


string 中 第 一 个 匹配 regexp 的 子 串 的 开始 位 置 ， 如 果 没 有 找到 匹配 则 
返回 -1。 


描述 


search() 在 string 中 寻找 匹配 regexp 的 子 串 ， 并 返回 匹配 子 串 的 第 一 
个 字符 的 位 置 ， 如 果 没 有 找到 则 返回 -1。 


search() 不 执行 全 局 匹配 ， 它 会 忽略 g 标 志 。 它 也 会 忽略 regexp 的 
lastIndex 属 性 ， 总 是 从 string 的 开始 位 置 开 始 搜 索 ， 这 意味 着 它 总 是 返回 
string 中 第 一 个 匹配 子 串 的 位 置 。 


示例 














Var S="JavaScript is fun'"， 
s.search(/script/i)// 返 区 
s.search(/a(.)a/)// 返 回 1 











上 








参阅 


RegExp、 RegExp.exec()、RegExp.test()、String.match()、 
String.replace()、 第 10 章 


String.slice() 
提取 二 个 子囊 
概要 
string.slice(startend) 
参数 
Start 


切片 开始 的 字符 串 索引 。 如 果 为 负 ， 则 将 从 该 字符 囊 的 尾部 开始 计 
个。 也 就 是 说 ，-1 表 未 最 后 一 个 字符 2 表示 个 数 第 一 个 字符 ， 以 此 类 


end 


紧 跟着 切片 结尾 的 字符 串 索 引 。 如 果 不 指定 ， 则 切片 将 包括 从 start 
到 当前 字符 串 结尾 的 所 有 字符 。 如 果 这 个 参数 是 负 的 ， 则 将 从 该 字符 串 
的 尾部 开始 计算 。 

返回 


一 个 新 的 字符 串 ， 内 容 为 string 中 自 start 位 置 开 始 并 且 包 含 start 位 
置 ， 直 到 但 不 包 仿 end 位置 的 所 有 字符 。 


描述 


slice() 返 回 一 个 字符 串 ， 内 容 为 string 的 一 个 切片 或 子囊 。 它 不 修改 


string。 





String 的 方法 slice()、substring() 以 及 弃 用 的 substr0 都 返回 一 个 字符 
串 的 指定 部 分 。slice() 比 substring0 更 灵活 ， 因 为 它 允 许 负 参数 值 。 
slice() 与 substr() 的 不 同 之 处 是 ， 前 者 通过 两 个 字符 位 置 来 定义 一 个 子 
串 ， 而 后 者 使 用 一 个 位 置 和 一 个 长 度 。 也 请 注意 ，String.slice0 和 
Array.slice() 非 党 类 似 。 








示例 





Var s="abcdefg"; 
slice(0,4)// 返 回 "abcd" 

slice(2,4)// 返 回 " 

slice(4)// 返 回 "efg" 

slice(3, -1)// 返 回 "def" 

slice(3, -2)// 返 回 "de" 

slice(-3, -1)// 应 该 返回 "ef"; 但 在 IE 4 中 返回 "abcdef" 
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bug 


IE4 中 如 果 start 为 负数 将 出 现 错误 (不 过 之 后 的 下 版 本 中 没有 这 个 问 
题 ) 。 它 不 是 从 字符 串 的 尾部 开始 计算 ， 而 是 从 位 置 为 0 的 字符 开始 。 


参阅 





Array.slice()、String.substring() 


String.split() 

将 一 个 字符 串 切 分 为 一 个 由 字符 串 组 成 的 数组 

概要 

string.split(delimiter, limit) 

参数 

delimiter 

string 切 分 处 的 字符 串 或 正则 表达 式 。 

limit 

这 个 可 选 的 整数 指定 已 返回 数组 的 最 大 长 度 。 如 果 指 定 ， 则 最 多 返 
回 数 量 为 这 个 数字 的 子 串 。 如 果 没 有 指定 ， 则 将 切 分 整个 字符 串 ， 无 论 
结果 数组 有 多 长 。 

返回 

一 个 由 字符 串 组 成 的 数组 ， 通 过 在 由 delimiter 界 定 的 边界 处 切 分 
string 为 子 串 创建 。 返 回 数组 中 的 子 串 不 包含 delimiter 本 喘 ， 除 非 是 下 面 
描述 部 分 中 提 到 的 例外 情况 。 

描述 

split() 方 法 创建 并 返回 一 个 数组 ， 内 容 为 至 多 limit 个 给 定 的 字符 串 
string 的 子 串 。 这 些 子 串 是 这 样 创建 的 ， 从 string 的 开头 搜索 到 结尾 ， 在 
所 有 匹配 delimiter 的 文本 的 前 方 及 后 方 断 开 。 分 割 文本 不 包含 在 返回 的 
子 串 中 ， 除 了 在 本 市 结尾 处 提 到 的 例外 。 

注意 ， 如 果 分 隔 符 〈delimiter) 匹配 给 定 字 符 串 的 开头 内 容 ， 则 返 
回 数组 的 第 一 个 元 又 将 是 空 字 符 串 一 一 出 现在 分 隅 符 之 前 的 文本 。 类 似 


地 ， 如 果 分 隔 符 匹配 该 字符 串 的 末尾 ， 则 返回 数组 的 最 后 一 个 元 系 〈 假 
设 与 limit 不 冲突 ) 将 是 空 字符 串 。 

















如 果 没 有 指定 delimiter， 则 字符 串 string 将 不 会 切 分 ， 返 回 的 数组 将 
只 包 合 一 个 未 切 分 的 字符 串 元 素 。 如 果 delimiter 为 空 字符 串 或 是 一 个 匹 
配 空 字符 串 的 正则 表达 式 ， 则 字符 串 string 将 在 每 个 字符 之 间断 开 ， 返 
回 的 数组 将 与 string 拥 有 一 样 的 长 度 ， 当 然 ， 这 是 在 假设 没有 指定 更 小 
的 limit 的 情况 下 。〔 注 意 这 是 一 个 特例 ， 因 为 第 一 个 字符 之 前 和 最 后 一 
个 字符 之 后 的 空 字符 不 匹配 。) 


束 像 前 面 提 到 的 ， 本 方法 返回 的 数组 中 的 子囊 不 包含 用 来 切 分 该 字 
符 串 的 分 隔 文本 。 不 过 ， 如 果 delimiter 是 一 个 包含 圆 括号 表达 式 的 正则 
表达 式 ， 则 匹配 这 些 圆 括号 表达 式 的 子囊 (但 不 是 匹配 整个 正则 表达 式 
的 文本 ) 将 包含 在 返回 的 数组 中 。 


注意 String.split0 方 法 是 Array.join() 方 法 的 反方 法 。 








示例 


在 处 理 高 度 结构 化 的 字符 串 时 ，splitO0 方 法 非常 有 用 。 例 如 : 
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split0) 方 法 另 一 个 种 用 的 场景 是 解析 命令 或 类 似 的 字符 串 ， 方 法 是 
将 它们 在 空白 处 断 开 为 单词 : 





var words=sentence.split("''); 





用 正则 表达 式 作为 分 隔 符 将 字符 串 切 分 为 单词 更 容易 : 





var words=sentence.split(/\s+/); 





要 将 一 个 字符 串 切 分 为 由 字符 组 成 的 数组 ， 可 使 用 空 字符 串 作 为 分 
隔 符 。 如 果 只 想 将 字符 串 的 一 个 前 级 切 分 为 由 字符 组 成 的 数组 ， 可 以 使 
用 limit 参 数 : 








"hello" split("");// 返 口 ["h", "e", a SI "o"] 
"hello" .Split("",3);// 返 口 EL"h", "e", “二 > 


























如 琳 硕 望 返 回 的 数组 中 包 合 分 隔 符 或 分 隔 符 的 一 个 或 多 个 部 分 ， 可 
以 使 用 带 圆 括号 子 表 达 陈 的 正则 表达 式 。 例 如 ， 下 面 的 代码 将 一 个 字符 
串 在 HTML 标签 处 断 开 ， 同 时 在 返回 的 数组 中 包含 这 些 标 俭 : 








Var text="hello<b>world<=/b>>"， 
text.SplLit(/(<[A>]*>)V/); /返回 ["he1l1o" "<b>" "world" "</b>"，""] 

















参阅 

Array.join0、RegExp、 第 10 章 
String.substr() 

己 弃 用 

提取 一 个 子 串 

概要 

string.substr(start,length) 

参数 

start 


子 捉 的 开始 位 置 。 如 果 这 个 参数 是 负数 ， 则 将 从 string 的 尾部 开始 
计算 : -1 表示 最 后 一 个 字符 ，-2 表 示 倒 数 第 二 个 字符 ， 以 此 类 推 。 





length 


该 子 串 中 的 字符 数 。 如 果 省 上 略 这 个 参数 ， 则 返回 的 子 串 将 包含 从 开 
始 位 置 到 字符 串 结束 的 所 有 字符 。 


返回 


string 的 一 部 分 的 一 个 副本 ， 包 含 string 中 自 start 位 置 开 始 的 length 个 
字符 ， 如 果 未 指定 length 则 包含 自 start 到 结尾 的 所 有 字符 。 


描述 

substr() 从 string 中 提取 并 返回 一 个 子 串 。 它 并 不 修改 string 本 身 。 

注意 ，substr0 通 过 一 个 开始 字符 的 位 置 以 及 长 度 来 指定 期 望 取得 的 
子 串 。 这 与 String. substring() 和 String.splice() 不 同 并 且 有 时 会 很 有 用 ， 后 
两 者 是 通过 指定 两 个 字符 的 位 置 来 定义 一 个 子 串 。 不 过 需要 注意 ， 这 个 
方法 不 再 是 ECMAScript 的 标准 ， 因 此 已 弃 用 。 


示例 














var s="abcdefg"; 

s.substr(2,2); ， i 
s.substr(3);// 返 回 "d 
s.substr(-3,2); /7 碳 该 胃 | 'ef"; 但 在 IE 4 中 返回 "ab" 



































bug 


在 下 中 传 入 负 的 start 不 会 正常 工作 ， 它 们 不 是 从 string 的 尾部 开始 计 
算 字 符 位 置 ， 而 是 从 位 置 0 开始 。 


参阅 
String.slice()、String.substring() 
String.substring() 

返回 字符 串 的 一 个 子 串 

概要 

string.substring(from,to) 

参数 

from 


一 个 非 负 整 数 ， 指 定 要 提取 的 子 串 的 第 一 个 字符 在 string 中 的 位 


to 


一 个 非 负 整数 ， 比 要 提取 的 子 串 的 最 后 一 个 字符 的 位 置 大 1。 如 果 
省 略 这 个 参数 ， 则 返回 的 子 串 将 持续 到 string 的 结尾 。 


返回 

一 个 新 的 字符 串 ， 长 度 为 to-from， 内 容 为 string 的 一 个 子 串 。 新 字 
符 串 的 内 容 为 string 中 从 位 置 fom 到 to-1 的 字符 的 副本 。 

描述 

String.substring() 返 回 string 中 位 置 from 与 to 之 间 的 字符 组 成 的 子 串 。 
包含 位 置 from 处 的 字符 ， 但 不 包含 位 置 to 处 的 字符 。 


如 果 from 等 于 to， 则 这 个 方法 将 返回 一 个 空 〈 长 度 为 0 的 ) 字符 
趾 。 如 条 from 比 to 大 ， 这 个 方法 将 先 交 换 两 个 参数 的 值 ， 然 后 返回 它们 
之 间 的 子 串 。 

子 串 中 包含 位 置 from 处 的 字符 ， 但 不 包含 to 处 的 字符 ， 记 住 这 一 点 
很 重要 。 这 看 起 来 有 些 随意 或 违反 直觉 ， 不 过 这 个 体系 的 一 个 值得 注意 
的 特性 是 ， 返 回 的 子 串 的 长 度 总 是 等 本 to-from。 


注意 String.slice0 和 非 标准 的 String.substr0 也 能 从 字符 串 中 提取 子 
串 。 但 和 这 些 方法 不 同 ，String.substring0) 不 接受 负 参 数 。 


参阅 








String.charAt()、String.indexOf()、String.lastIndexOf()、 
String.slice()、String.substr() 


String.toLocaleLowerCasel() 
将 一 个 字符 串 转 为 小 写 
概要 


string.toLocaleLowerCase() 


返回 

string 的 一 个 副本 ， 其 中 字符 都 已 经 以 本 地 化 的 方式 转换 为 小 写字 
母 。 只 有 一 小 部 分 语言 〈 如 土耳其 语 ) 有 本 地 化 的 大 小 写 映 射 ， 所 以 这 
个 方法 一 般 和 toLowerCase0 返 回 的 内 容 相同 。 

参阅 


String.toLocaleUpperCase()、String.toLowerCase()、 
String.toUpperCase() 


String.toLocaleUpperCasel() 

将 一 个 字符 串 转 为 大 写 

概要 

string.toLocaleUpperCase() 

返回 

string 的 一 个 副本 ， 其 中 字符 都 已 经 以 本 地 化 的 方式 转换 为 大 写字 
母 。 只 有 一 小 部 分 语言 (如 土耳其 语 ) 有 本 地 化 的 大 小 写 映 射 ， 所 以 这 
个 方法 一 般 和 toLowerCase0 返 回 的 内 容 相 同 。 

参阅 


String.toLocaleLowerCase()、String.toLowerCase()、 
String.toUpperCase() 


String.toLowerCasel() 
将 一 个 字符 串 转 换 为 小 写 
概要 


string.toLowerCasel() 


返回 


string 的 一 个 副本 ， 如 果 其 中 有 大 写字 母 ， 则 大 写字 母 都 已 转换 为 
对 应 的 小 写 形 式 。 














String.toString() 

返回 对 应 字符 串 

重 写 Object.toString() 

概要 

string.toString() 

返回 

string 的 原始 字符 串 值 。 很 少 需要 调用 这 个 方法 。 

异常 

TypeError 

如 果 在 一 个 非 String 对 象 上 调用 这 个 方法 。 

参阅 

String.valueOf() 
String.toUpperCase() 

将 一 个 字符 串 转 换 为 大 写 

概要 

string.toUpperCasel() 

返回 





string 的 一 个 副本 ， 如 果 其 中 有 小 写字 母 ， 则 小 写字 母 都 已 转换 为 
对 应 的 大 写 形 式 。 





String.trim() 
去 掉 开头 和 结尾 处 的 空白 字符 
概要 





string.trim() 
返回 
string 的 一 个 副本 ， 其 中 开头 和 结尾 处 的 空白 字符 都 已 移 除 。 
参阅 
String.replace() 
String.valueOf() 
返回 对 应 的 字符 串 
重 写 Object.valueOf 
概要 
string.valueOf() 
返回 
string 的 原始 字符 串 值 。 
异常 
TypeError 
如 果 在 一 个 非 String 对 象 上 调用 这 个 方法 。 


参阅 


String.toString() 


SyntaxError 
抛 出 以 便 通 知 一 个 语法 错误 
构造 函数 
new SyntaxError() 
new SyntaxError(message) 
参数 
message 


一 条 可 选 的 错误 消息 ， 提 供 关 于 该 异常 的 详细 信息 。 如 果 指 定 ， 则 
这 个 参数 将 用 做 对 应 的 SyntaxError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构造 的 SyntaxError 对 象 。 如 果 指 定 message 参 数 ， 则 该 Error 
对 象 将 使 用 它 作 为 自己 的 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 
一 个 预定 义 的 默认 字符 串 作为 该 属性 的 值 。 当 不 使 用 new 操 作 符 将 
a 造 函 数 作 为 一 个 函数 调用 时 ， 它 的 行为 和 使 用 new 操 作 
符 时 一 样 。 


属性 





message 


一 条 提供 关于 该 异 帝 的 细节 的 错误 消 轧 。 这 个 属性 的 值 为 传 入 构造 
函数 的 字符 串 的 值 ， 或 者 为 预定 义 的 默认 字符 串 。 细 节 可 参阅 


Error.message。 





Namne 





一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 SyntaxError 对 象 的 这 个 属性 
的 都 继承 自 值 "SyntaxError"。 


描述 


在 JavaScript 代 码 中 ， AN 类 的 实例 用 于 在 通知 语法 错误 时 抛 
出 。eval0 方 法 、Function() 构 造 函 数 以 及 RegExp0 构 造 函 数 都 可 能 抛 出 
这 种 类 型 的 异常 。 关 于 异常 的 抛 出 及 捕获 的 细节 可 参阅 Error。 


参阅 





Error、 Error.message、Error.name 


Typekrror 
当 一 个 值 类 型 错误 时 抛 出 
构造 函数 
new TypeError() 
new TypeError(message) 
参数 
message 


一 条 可 选 的 错误 消息 ， 提 供 关 于 该 异 篆 的 细节 。 如 果 指 定 ， 这 个 参 
数 将 用 做 对 应 的 TypeError 对 象 的 messass 必 | 性 的 值 。 


返回 


一 个 新 构建 的 TypeError 对 象 。 如 果 指 定 message 参 数 ， 则 对 应 的 
Error 对 象 将 把 这 个 参数 用 做 它 的 message 属 性 的 值 ; 在 其 他 情况 下 ， 它 
将 使 用 预定 义 的 默认 字符 串 作 为 这 个 属性 的 值 。 当 不 带 new 操 作 符 将 
函数 当做 一 个 函数 调用 时 ， 它 的 行为 和 带 new 操 作 符 调 
用 时 一 


属性 





message 


一 条 提供 关于 该 民利 的 细节 的 错误 消 轧 。 这 个 属性 的 值 为 传 入 构造 
函数 的 字符 串 ， 或 者 为 一 个 预定 义 的 默认 字符 串 。 细 节 可 参阅 


Error.message。 





Namne 


一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 TypeEror 对 象 的 这 个 属性 都 
继承 自 值 "TypeError"。 


描述 


当 一 个 值 不 是 期 望 的 类 型 时 ， 将 抛 出 TypeError 类 的 一 个 实例 。 通 党 
在 访问 一 个 值 为 null 或 undefined 的 属性 时 会 发 生 这 个 错误 。 例 如 ， 如 果 
在 一 个 类 中 定义 某 个 方法 ， 但 在 另 一 个 类 的 实例 上 调用 这 个 方法 时 ， 或 
者 在 非 构 造 函 数 上 使 用 new 操 作 符 时 ， 都 会 发 生 这 个 错误 。 当 问 内 置 的 
函数 或 方法 传 入 多 于 预期 的 参数 时 ，JavaScript 实 现 也 允许 抛 出 
TypeError 对 象 。 关 于 抛 出 和 捕获 异常 的 细节 可 参阅 Error。 


参阅 








Error、 Error.message、 Error.name 


undefined 

未 定义 值 

概要 

undefined 

描述 

undefined 是 一 个 全 局 属性 ， 值 为 JavaScript 未 定义 的 值 。 当 试图 读 一 
个 不 存在 的 对 象 属性 时 ， 返 回 的 就 是 这 个 值 。undefined 属 性 不 可 在 


forin 循 环 中 枚 举 ， 也 不 可 使 用 delete 操 作 符 删除 。 注 意 ，undefined 不 是 
一 个 常量 ， 它 可 以 设置 成 其 他 值 ， 但 你 要 小 心 避免 这 样 的 操作 。 





测试 一 个 值 是 否 为 undefined 时 要 使 用 “===” 操 作 符 ， 因 为 “==” 操 作 
符 会 把 undefined 值 等 同 于 null。 


Unescape() 
己 弃 用 
解码 一 个 编码 的 字符 串 
概要 


unescape(s) 


参数 


[ep] 


竺 解码 的 字符 串 。 

返回 

解码 后 的 s 的 一 个 副本 。 

描述 

unescape() 是 一 个 全 局 函数 ， 用 于 解码 由 escape() 编 码 的 字符 串 。 它 
的 解码 方式 为 : 寻找 s 中 格式 为 %xx 及 %u xxxx〈 这 儿 x 是 一 个 十 六 进 制 
数字 ) 的 字符 序列 ， 并 将 它们 蔡 换 为 Unicode 字 符 \u00 xx 和 Nu xxxx。 

虽然 在 第 1 版 ECMAScript 中 标准 化 了 unescape0， 但 在 ECMAScript 
第 3 版 中 它 已 弃 用 并 移 除 。ECMAScript 的 实现 可 能 实现 了 这 个 函数 ， 但 
这 并 不 是 必需 的 。 应 该 使 用 decodeURIO 和 decodeURIComponent(O) 来 代替 
unescape()。 更 多 的 细 市 及 示例 可 参阅 escape()。 


参阅 





decodeURI()、decodeURIComponent()、escape()、String 


URIError 
URI 编 码 或 解码 方法 出 错时 抛 出 
对 象 -错误 -URIError 
构造 函数 
new URIError() 
new URIError(message) 
参数 
message 


一 条 可 选 的 错误 消息 ， 提 供 关 于 该 异常 的 详细 信息 。 如 果 指 定 ， 则 
这 个 参数 将 用 做 对 应 的 URIError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构建 的 URIError 对 象 。 如 采 指 定 message 参 数 ， 则 对 应 的 
Eror 对 象 将 把 它 用 做 其 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 一 
个 预定 义 的 默认 字符 串 作为 该 属性 的 值 。 当 不 带 hew 操 作 符 将 URIError() 
00 时 ， 它 的 行为 和 带 new 操 作 符 调用 时 一 


属性 





message 


一 条 提供 关于 该 异常 的 细 市 的 错误 消 恩 。 这 个 属性 的 值 为 传 入 构造 
函数 的 字符 串 ， 或 者 为 预定 义 的 默认 字符 串 。 细 市 可 参阅 


Error.message。 





Name 


一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 的 URIError 对 象 的 这 个 属性 
都 继承 自 值 "URIError"。 





描述 


调用 decodeURI() 或 decodeURIComponent() 时 ， 如 果 指 定 的 字符 串 包 
含 不 合法 的 十 六 进 制 编码 ， 则 将 抛 出 URIError 类 的 一 个 实例 。 同 样 ， 如 
果 指 定 的 字符 串 包含 不 合法 的 Unicode 代 理 项 对 encodeURI0O 或 
encodeURIComponent() 也 会 抛 出 这 个 异常 。 关 于 异常 的 扫 出 和 捕获 的 细 
节 可 参阅 Error 部 分 。 


参阅 





Error、 Error.message、Error.name 


器] 一 个 值 时 也 行 ， 只 要 不 是 数值 ， 比 如 new Array('1)。 





第 四 部 分 “客户 问 JavaScript 参 考 


本 书 这 个 部 分 是 一 份 客户 端 JavaScript 参 考 手 册 ， 包 含 若 干 重要 的 客 
户 端 JavaScript 对 象 的 条 目 ， 例 如 Windows、Document、Element、 
Event、XMLHTTPRequest、Storage、Canvas 以 及 File。 同 时 ， 也 有 
jQuery 库 的 一 个 条 目 。 这 些 条 目 根据 字母 顺序 进行 排序 ， 每 一 个 条 目 中 
都 有 该 对 象 文 持 的 第 量 、 属 性 、 方 法 以 及 事件 处 理 程序 的 完整 清单 。 


在 本 书 之 前 的 版 本 中 ， 每 个 方法 都 有 一 个 单独 的 参考 条 目 ， 但 在 这 
i 方法 描述 直接 包含 在 父 条 目 中 ， 因 此 组 织 上 更 为 紧凑 《未 省 略 
细 市 〉。 














客户 疹 JavaScript 人 参考 
ApplicationCache 

应 用 缓存 管理 API 

EventTarget 

ApplicationCache 对 象 是 Windows 对 象 的 applicationCache 属 性 的 值 ， 
它 定 义 一 个 API， 用 于 管理 已 缓存 应 用 的 更 新 。 简 单 的 缓存 应 用 可 不 必 
使 用 这 个 API， 如 同 20.4 节 描述 的 ， 创 建 〈 以 及 更 新 ， 如 果 有 必要 的 
话 ) 一 个 合适 的 组 存 清单 就 足够 了 。 那 些 需要 更 主动 地 管理 更 新 的 复杂 
缓存 应 用 可 以 使 用 下 面 列 举 的 属性 、 方 法 以 及 事件 处 理 程序 。 更 多 细节 
见 20.4.2 市 。 

常量 

status 属 性 可 以 取 以 下 值 。 

unsigned short UNCACHED=0 

当前 应 用 没有 manifest 属 性 : 未 缓存 。 

unsigned short IDLE=1 

清单 已 检查 ， 当 前 应 用 已 缓存 并 为 最 新 。 

unsigned short CHECKING=2 

浏览 右 正 在 检查 清单 文件 。 

Unsigned short DOWNLOADING=3 

浏览 器 正在 下 载 并 缓存 清单 中 的 文件 。 


unsigned short UPDATEREADY=4 











当前 应 用 的 一 个 新 版 本 已 下 载 并 缓存 。 
Unsigned short OBSOLETE=5 

清单 已 不 人 存在， 缓存 将 删除 。 

属性 

readonly unsigned short status 


要 这 个 属性 描述 当前 文档 的 缓存 状态 ， 它 可 以 取 上 面 列 出 的 茶 个 各 


大 
void swapCache() 


当 status 属 性 的 值 为 UPDATEREADY 时 ， 浏 览 器 正 维护 当前 应 用 的 
两 个 缓存 版 本 : 当前 正在 使 用 的 文件 来 自 老 版 本 缓存 ， 新 版 本 的 文件 刚 
下 载 完成 并 将 在 应 用 下 次 重新 加 载 时 使 用 。 可 以 调用 swapCache() 来 让 
浏览 器 马上 丢弃 老 缓存 并 使 用 新 缓存 中 的 文件 。 需 要 注意 的 是 ， 这 种 方 
式 可 能 导致 版 本 偏 天 的 问题 ， 从 老 缓 存 切 换 为 新 绥 存 的 较 安 全 的 方式 是 
使 用 Location.reload() 方 法 重新 加 载 当 前 应 用 。 











void update() 


一 般 情 况 下 ， 每 次 加 载 已 缓存 的 应 用 时 ， 浏 览 右 都 会 检查 该 应 用 的 
清单 文件 是 否 有 更 新 。 页 面 长 期 不 刷新 的 Web 应 用 可 以 使 用 这 个 方法 来 
更 频 或 地 检查 更 新 。 


事件 处 理 程序 


在 检查 清单 以 及 更 新 缓存 的 过 程 中 ， 浏 览 器 会 在 ApplicationCache 
上 触发 一 个 事件 序列 。 可 使 用 下 面 的 ApplicationCache 对 象 的 事件 处 理 
程序 属性 来 注册 事件 处 理 程序 ， 或 者 使 用 ApplicationCache 对 象 实现 的 
EventTarget() 方 法 。 这 些 事件 的 大 多 数 处 理 程序 都 传 入 一 个 简单 的 Event 
对 象 ， 但 进度 事件 的 处 理 程序 例外 ， 它 传 入 一 个 ProgressEvent 对 象 ， 此 
对 象 可 用 于 跟 踩 当前 已 下 载 的 字 节 数 。 











oncached 


在 应 用 首次 缓存 时 触发 。 这 是 事件 序列 中 的 最 后 一 个 事件 。 














onchecking 


当 浏 览 右 开始 检查 清单 文件 是 否 有 更 新 时 触发 。 在 所 有 的 应 用 缓存 
事件 序列 中 ， 这 都 是 第 一 个 事件 。 








ondownloading 


当 浏 览 器 开始 下 载 清香 文件 中 列 出 的 焉 源 时 触发 ， 无 论 这 是 该 应 用 
人 ` 是 一 次 更 新 。 这 个 事件 后 面 通 稼 会 跟 关 一 个 或 多 个 进度 事 








OILeITOT 


当 绥 存 更 新 过 程 中 出 现 错误 时 触发 。 比 如 ， 如 果 浏 览 器 挥 线 ， 或 者 
一 个 未 缓存 的 应 用 引用 一 个 不 存在 的 清单 文件 时 ， 就 会 触发 这 个 事件 。 


onnoupdate 


当 浏 览 器 认为 清单 没有 变化 并 且 绥 存 的 应 用 就 是 当前 应 用 时 触发 。 
这 古事 件 序 列 的 最 后 一 个 事件 。 








onobsolete 


当 己 缓存 应 用 的 清单 文件 不 复 存 在 时 触 上 用 。 这 会 引发 缓存 极 删 除 。 
这 古事 件 序 列 的 最 后 一 个 事件 。 








onprogress 


当 应 用 的 文件 正在 被 下 载 并 缓存 时 周期 性 地 触发 。 与 这 个 事件 关联 
的 事件 对 象 是 一 个 ProgressEvent。 





onupdateready 


当 应 用 的 一 个 新 版 本 下 载 完 成 并 缓存 (将 在 应 用 下 次 加 载 时 使 用 ) 
时 触 友 。 这 是 事件 序列 的 最 后 一 个 事件 。 








ArrayBuffer 

固定 长 度 的 字 节 序列 

ArrayBuffer 表 现 为 内 存 中 的 一 个 固定 长 度 的 序列 ， 但 它 没 有 定义 存 
取 这 些 字 节 的 方法 。ArrayBufferViews 类 似 于 TypedArray 类 ， 提 供 了 访 
问 及 解析 这 些 字 节 的 方法 。 

构造 函数 














new ArrayBuffer(unsigned long length) 


新 建 一 个 指定 字 节 数 的 ArrayBuffer。 新 ArrayBuffer 中 的 所 有 字 节 都 
初始 化 为 0。 


属性 





readonly unsigned long byteLength 

ArrayBuffer 的 长 上 度 ， 单 位 为 字 节 。 
ArrayBufferView 

基于 ArrayBuffer 的 类 型 的 通用 属性 

ArrayBufferView 是 一 个 超 类 ， 提 供用 于 访问 ArrayBuffer 对 象 字 节 内 
容 的 类 型 。 无 法 直接 创建 一 个 ArrayBufferView: 它 存在 的 意义 是 为 了 定 
义 如 TypedArray、DataView 等 子 类 型 的 通用 属性 。 


属性 





readonly ArrayButffer buffer 

当前 对 象 的 视图 所 包含 的 ArrayBuffer。 

readonly unsigned long byteLength 

通过 当前 视图 能 访问 到 的 缓存 部 分 的 长 度 ， 单 位 为 字 节 。 


readonly unsigned long byteOffset 

通过 当前 视图 能 访问 的 缓存 部 分 的 开始 位 置 ， 单 位 为 字 市 。 
Attr 

元 素 的 属性 

Attr 对 象 表示 一 个 ElementT 点 的 属性 。 可 通过 Node 接 口 的 attributes 
属性 取得 Attr 对 象 ， 或 者 调用 Element 接 口 的 getAttributeNode() 或 
getAttributeNodeNS() 方 法 。 

由 于 属性 值 可 以 完全 由 字符 串 表 示 ， 因 此 通常 不 需要 使 用 Attr 接 
口 。 在 多 数 情 况 下 ， 使 用 属性 最 简单 的 方法 是 使 用 Element.getAttribute() 
以 及 Element.setAttribute() 方 法 。 这 些 方法 使 用 字符 串 作 为 属性 值 ， 完 全 
不 需要 用 到 Attr 对 象 。 


属性 








readonly string localName 


属性 的 名 字 ， 不 包含 任何 命名 空间 前 级 。 





readonly string name 

属性 的 名 字 ， 包 含 命 名 空间 前 级 〈 如 果 存 在 的 话 )。 
readonly string namespaceURI 

标识 属性 命名 空间 的 URI， 如 果 不 存 在 的 话 为 空 Cnull) 。 
readonly string prefx 

属性 的 命名 空间 前 缀 ， 如 果 不 存 在 的 话 为 空 Cnull) 。 
string value 


属性 的 值 。 


Audio 
HTML<audio 之 元 素 
Node、 Element、MediaFlement 


音频 (Audio) 对 象 表 示 一 个 HTML 的 二 audio 二 元 素 。 除 了 构造 函 
数 外 ，Audio 对 象 的 所 有 属性 、 方 法 及 事件 处 理 程 序 都 继承 自 


MediaElement。 
构造 函数 
new Audio([string src]) 


构造 函数 创建 一 个 新 的 <audio> 之 元 素 ， 其 preload 属 性 为 "auto"。 如 
果 指 定 src 参 数 ， 它 将 用 做 src 属 性 的 值 。 


BeforeUnloadEvent 
用 于 种 载 事 件 的 Event 对 象 


Event 


浏览 器 跳 转 到 一 个 新 的 文档 之 前 ，Window 对 象 上 的 缀 载 事 件 会 被 
触发 ，Web 应 用 可 在 此 时 询问 用 户 是 否 真 的 要 离开 当前 页 面 。 传 给 种 载 
事件 处 理 函 数 的 是 BeforeUnloadEvent 对 象 。 如 果 你 想 让 用 户 确认 是 否 
的 要 离开 当前 页 面 ， 不 需要 也 不 应 该 使 用 Window.confirm(0) 方 法 ， 而 应 
该 从 事件 处 理 程序 返回 一 个 字符 串 ， 或 者 将 事件 对 象 的 returnValue 设 置 
为 一 个 字符 串 。 返 回 或 设置 的 字符 串 将 以 确认 对 话 框 的 形式 展现 给 用 
Ps 














可 参考 Event 及 Window。 
属性 
string return Value 


在 离开 当前 页 面 之 前 以 确认 对 话 框 的 形式 辣 用 户 显 示 的 消息 。 如 末 


不 想 显 示 确 认 对 话 框 ， 可 保持 此 属性 为 未 设置 。 
Blob 

一 个 不 透明 的 数据 块 ， 如 文件 内 容 等 

Blob 是 一 个 不 透明 的 类 型 ， 用 于 在 API 之 间 交 换 数 据 。Blob 可 能 会 
非常 大 ， 可 能 表示 二 进 制 数据 ， 不 过 也 不 一 定 是 这 样 。Blob 通 常 保 存在 
文件 中 ， 不 过 这 只 是 实现 细节 。Blob 只 对 外 暴露 尺寸 ， 有 时 也 有 MIME 
类 型 (MIME type) ， 只 定义 一 个 将 Blob 的 一 部 分 作为 一 个 Blob 处 理 的 
万 法 

很 多 API 都 使 用 Blob: 可 参见 FileReader 中 读 取 Blob 内 容 的 方法 ， 
BlobBuilder 中 创建 一 个 新 Blob 对 象 的 方法 ，XMLHttpRequest 中 下 载 及 上 
传 Blob 的 方法 。 关 于 Blob 以 及 用 到 它 的 API 的 讨论 ， 可 参考 22.6 节 。 

属性 

readonly unsigned long size 

Blob 的 长 度 ， 单 位 为 字 节 。 

readonly string type 

Blob 的 MIME 类 型 ， 如 果 未 指定 则 为 空 字符 串 。 

方法 


Blob slice(unsigned long start,unsigned long length,[string 
contentType]) 


返回 一 个 新 的 Blob， 表 示 当 前 Blob 中 从 start 开 始 ， 长 度 为 length 的 字 
节 。 如 果 指 定 contentType， 它 将 用 做 返回 的 Blob 的 type 属 性 。 


BlobBuilder 
创建 新 的 Blob 


BlobBuilder 对 象 用 于 从 文本 字符 串 、ArrayBuffer 对 象 的 字 节 内容 以 
及 其 他 Blob 创 建新 的 Blob 对 象 。 要 构建 一 个 Blob， 可 以 创建 一 
BlobBuilder， 调 用 append0 一 次 或 多 次 ， 然 后 调用 getBlob0， 即 可 得 到 
一 个 Blob。 

构造 函数 

new BlobBuilder() 


调用 BlobBuilder() 构 造 函 数 ， 无 需 参数 ， 即 可 创建 一 个 新 的 
BlobBuilder。 


方法 

void append(string text, [string endings]) 

使 用 UTF-8 编 码 将 指定 的 text 追 加 到 正在 创建 的 Blob 中 。 
void append(Blob data) 

退 加 指定 Blob data 的 内 容 到 正在 创建 的 Blob 中 。 


void append(ArrayButffer data) 





退 加 ArrayBuffer data 的 字 节 内 容 到 正在 创建 的 Blob 中 。 

Blob getBlob([string contentType]) 

返回 一 个 Blob， 表 示 自 这 个 BlobBuilder 创 建 之 后 追加 的 所 有 数据 。 
每 次 调用 这 个 方法 都 将 返回 一 个 新 的 Blob。 参 数 contentType 对 应 返回 的 
Blob 的 type 属 性 的 值 ， 如 果 示 指定， 返回 的 Blob 的 type 属 性 将 是 一 个 空 
字符 串 。 
Button 

HTML<button 之 元 素 


Node、 Element、FormControl 


Button 对 象 表现 为 HTIML<button 之 元 素 。Button 的 大 多 数 属性 及 方 
法 都 在 FormControl 及 Element 中 介绍 了 。 如 果 一 个 Button 的 type 属 性 〈 见 
FormControl) 是 "submit"， 下 面 列 出 的 有 关 指 定 表单 提交 参数 的 属性 将 
履 盖 Button 所 在 表单 〈 见 FormControl) 上 的 相似 属性 。 

属性 


以 下 属性 只 在 二 button 二 的 type 为 "submit" 时 有 意义 。 





string formAction 





这 个 属性 反映 对 应 的 formaction HTML 属性 。 对 提交 按钮 而 言 ， 它 
将 履 羡 表单 的 action 属 性 。 


string formEnctype 





这 个 属性 反映 对 应 的 formenctype HTML 属 性 。 对 提交 按钮 而 言 ， 它 
On enctype 属 性 ， 它 的 合法 值 与 表单 的 enctype 属 性 的 合法 值 
日 同 。 





string formMethod 





这 个 属性 反映 对 应 的 formmethod HTML 属 性 。 对 提交 按钮 而 言 ， 它 
将 履 凋 表单 的 method 属 性 。 


string formNoValidate 


这 个 属性 反映 对 应 的 formnovalidate HTML 属 性 。 对 提交 按钮 而 言 ， 
它 将 履 盖 表单 的 noValidate 属 性 。 


string formTarget 





这 个 属性 反映 对 应 的 formtarget HTML 属 性 。 对 提交 按钮 而 言 ， 它 
将 窗 盖 表单 的 target 属 性 。 


Canvas 


用 于 脚本 绘图 的 HTML 元 素 


Node、 Element 


Canvas 对 象 表 现 为 HTML 的 canvas 元 素 。 它 自己 并 不 能 做 什么 ， 但 
它 定义 一 个 支持 在 客户 端 使 用 脚本 绘图 的 API。 可 以 直接 为 这 个 对 象 定 
义 width 及 height， 也 可 以 用 toDataURL0O 方 法 从 画布 中 导出 图 片 ， 不 过 ， 
实际 绘图 的 API 是 由 getContext() 方 法 返回 的 一 个 独立 “上 上 下文” 对象 实 现 
的 。 可 参考 CanvasRenderingContext2D。 


属性 








unsigned long height 
unsigned long width 


这 些 属 性 对 应 和 canvas 之 标签 的 width 及 height 属 性 ， 指 定 canvas 坐 
标 空 间 的 维度 。width 及 height 的 默认 值 分 别 为 300 和 150。 


如 果 canvas 元 素 的 尺寸 在 样式 表 或 内 联 style 属 性 中 都 没有 另外 的 定 
义 ， 则 width 及 height 属 性 也 将 指定 canvas 元 素 在 屏幕 上 的 尺寸 。 


设置 这 两 个 属性 中 的 任意 一 个 〈 即 使 设置 为 它 现在 的 值 ) 都 将 清空 
画布 为 透明 黑色 (transparent black) ， 并 且 将 它 所 有 的 绘图 属性 重 置 为 
默认 值 。 


方法 





object getContext(string contextId,[any args...]) 


这 个 方法 返回 一 个 用 于 在 Canvas 元 素 上 画图 的 对 象 。 如 果 传 入 字符 
串 "2d"， 本 方法 将 返回 一 个 用 于 2D 绘 图 的 CanvasRenderingContext 2D 对 
象 ， 在 这 种 情况 下 不 需要 额外 的 args。 


每 一 个 canvas 元 素 只 有 一 个 CanvasRenderingContext 2D 对 象 ， 所 以 
多 次 调用 getContext("2d") 返 回 的 是 同一 个 对 象 。 


HTML5 标 准将 "2d" 作 为 这 个 方法 的 唯一 参数 。 一 些 独立 的 标准 《如 
WebGL) 正在 开发 3D 绘 图 。 在 文 持 这 些 标准 的 浏览 右 中 ， 可 以 为 这 个 
方法 传 入 字符 串 "webgl" 来 获得 一 个 文 持 3D 演 染 的 对 象 。 需 要 注意 的 
是 ， 本 书 中 只 有 关于 CanvasRenderingContext 2D 对 象 的 绘图 上 下 文 的 文 





档 O 
string toDataURL([string typel,[any args...]) 


toDataURL() 以 data://URL 的 方式 返回 canvas 位 图 的 内 容 ， 这 种 方式 
可 以 很 容易 地 在 <img 二 标签 中 使 用 或 者 通过 网 络 传输 。 例 如 : 


























// 将 canvas 的 内 容 复 制 到 一 个 <img 二 中 ， 并 将 其 追加 到 当前 文档 中 
var canvas=document .getElementById("my_canvas"); 
var image=document.createElement("img"); 
image.src=canvas.toDataURL(); 

document .body.appendChild(image); 











type 参 数 定义 图 片 格式 使 用 的 MIME 类 型 。 如 果 省 略 该 参数 ， 默 认 
值 为 "image/png"。 只 有 PNG 图 片 格式 是 要 求 文 持 的 实现 方式 。 除 PNG 外 
的 图 请 格 式 ,， 可 以 传 入 额外 的 参数 来 定义 编码 细节 。 比 如 ， 如 果 type 
是 "image/jpeg"， 第 二 个 参数 应 该 为 0 一 1 之 间 的 一 个 数字 ， 用 于 定义 图 
片 的 质量 级 别 。 在 写 这 本 书 的 时 候 ， 其 他 参数 的 讨论 还 没有 形成 标准 。 


为 了 防止 跨 域 的 信息 泄露 ， 在 非 “ 同 源 ”(origin-clean)〉 的 二 canvas 
二 标签 上 toDataURL() 将 不 能 工作 。 如 果 一 个 canvas 包 含 一 张 ( 直 接 通 过 
drawImage() 或 非 直 接 通 过 CanvasPattern 绘 制 的 ) 图 片 ， 且 该 图 片 与 包含 
当前 canvas 的 文档 不 同 源 ， 则 称 这 个 canvas 是 非 同 源 的 。 同 样 ， 如 果 一 
De 会 制 文 本 中 使 用 了 来 自 另 一 个 源 的 Web 字体 ， 也 称 它 为 非 同 
刘 





CanvasGradient 
用 于 Canvas 的 颜色 渐变 


CanvasGradient 对 象 表示 一 种 颜色 渐变 ， 可 指派 给 
CanvasRenderingContext2D 对 象 的 strokeStyle 或 fillStyle 属 性 。 
CanvasRenderingContext2D 对 象 的 createLinerGradient() 及 
createRadialGradient() 方 法 都 返回 CanvasGradient 对 象 。 


创建 CanvasGradient 对 象 后 ， 就 可 以 使 用 addColorStop0) 来 定义 渐变 
中 什么 颜色 在 什么 位 置 出 现 。 闫 色 将 在 定义 的 位 置 插 入 并 产生 平滑 的 渐 
变 或 淡出 〈( 淡 入 ) 。 如 果 没 有 定义 色 标 (color stop) ， 渐 变 将 全 是 清 一 
色 的 透明 黑色 。 


2 
void addColorStop(double offset,string color) 


addColorStop0 定 义 一 种 渐变 中 的 固定 颜色 。 人 参数 color 的 值 为 一 个 
CSS 颜 色 字 符 串 ， 参 数 offset 是 0.0 一 1.0 之 间 的 一 个 浮 点 数 ， 对 应 从 渐变 
的 起 点 到 终点 的 位 置 。offset 为 0 相当 于 起 始点 ，offset 为 1 相当 于 终点 。 


如 傈 定义 两 个 或 多 个 色 标 ， 各 种 据 色 之 间 将 平 请 地 过 渡 。 在 第 一 个 
色 标 之 前 ， 渐 变 将 显示 第 一 个 色 标 的 颜色 ， 在 最 后 一 个 色 标 之 后 ， 渐 变 
将 显示 最 后 一 个 色 标的 颜色 。 如 果 只 定义 一 种 色 标 ， 渐 变 将 显示 一 种 回 
定 的 颜色 。 如 果 没 有 设置 色 标 ， 渐 变 将 全 是 清一色 的 透明 黑色 。 





CanvasPattern 


用 于 Canvas 的 基于 图 片 的 模式 


CanvasPattern 对 象 是 不 透明 对 象 ， 由 CanvasRenderingContext2D 对 
象 的 CreatePattern() 方 法 返回 。CanvasPattern 对 象 可 用 做 
CanvasRenderingContext2D 对 象 的 strokeStyle 及 fillStyle 属 性 的 值 。 


CanvasRenderingContext2D 
用 于 在 Canvas 上 画图 的 对 象 


CanvasRenderingContext2D 对 象 提供 用 于 绘制 二 维 图 形 的 属性 及 方 
法 ， 下 面 几 节 是 一 个 概览 。 更 多 细节 请 参考 21.4 六 、CanvVas、 
CanvasGradient、CanvasPattern、ImageData 及 TextMetrics。 


创建 并 泻 染 路 径 

画布 的 一 个 强大 特性 是 可 以 通过 基本 的 绘制 操作 来 生成 各 种 形状 ， 
然后 可 以 给 它们 描 边 〈stroke) 或 填充 〈fil) 。 多 个 操作 的 结果 统称 为 
当前 路 径 。 一 张 画 布 只 维护 一 条 当前 路 径 。 

为 了 将 多 个 片断 连接 成 一 个 形状 ， 绘 图 操作 之 间 需 要 一 个 连接 反 。 


为 了 实现 这 点 ， 国 布 维护 一 个 当前 位 置 ， 男 布 的 绘图 操作 将 显 式 把 这 个 
位 置 作为 起 点 ， 并 不 断 更 新 ， 直 到 达到 终点 。 可 以 把 这 个 过 程 想 象 为 用 








一 文 钢 笔 在 纸 上 男 画 : 夯 完 一 条 直线 或 曲线 时 ， 当 前 位 置 束 古 操作 完成 
后 钢笔 所 在 的 位 置 。 


可 以 使 用 当前 路 径 创建 一 系列 晰 开 的 形状 ， 这 些 形状 会 一 起 使 用 相 
同 的 绘图 参数 进行 演 染 。 可 以 使 用 moveTo0) 方 法 来 分 开 形 状 ， 这 个 方法 
会 在 不 添加 连接 线 的 情况 下 将 当前 点 移动 到 一 个 新 的 位 置 。 这 个 操作 会 
Csubpath) ， 这 是 一 个 用 于 关联 操作 集合 的 画布 专 
Ho 


可 用 的 方法 有 : lineTo0 绘 制 直 线 ，rect0 绘 制 矩 形 ，arcO 及 arcTo0) 
绘制 扇形 ，bezierCurveTo0 及 quadraticCurveTo0 绘 制 曲 线 。 


路 径 完 成 之 后 ， 就 可 以 使 用 stroke0 对 它 描 边 ， 使 用 包 10 进 行 填充 ， 
也 可 以 同时 描 边 及 填充 。 


在 描 边 及 填充 之 外 ， 也 可 以 使 用 当前 路 径 来 定义 一 个 当前 画布 泻 染 
时 使 用 的 裁剪 区 域 (dlipping region) 。 在 这 个 区 域 中 的 像素 会 显示 ， 之 
外 的 则 不 显示 。 裁 前 区域 是 可 昧 加 的 ， 可 以 在 当前 路 径 的 当前 裁剪 区 域 
中 再 次 调用 clip0 来 生成 一 个 新 的 区 域 。 


如 果 所 有 子路 径 中 的 厂 断 都 没有 能 形成 一 个 闭合 形状 ，fil0 及 dlipO 
操作 会 在 子路 径 的 起 点 到 终点 之 间 添 加 一 条 虚拟 的 线 ( 描 边 时 不 可 见 ) 
来 隐 式 地 闭合 形状 ， 也 可 以 调用 closePath(0) 来 显 式 地 添加 这 条 线 。 


可 以 使 用 isPointImnPath(0) 来 测试 一 个 点 是 否 包含 在 当前 路 径 之 中 《或 
在 路 径 边 界线 上 ) 。 如 果 一 条 路 径 与 自身 相交 ， 或 者 由 多 条 重 登 的 子路 
径 组 成 ， 那 么 “包含 ”的 定义 取决 于 非 零 缠绕 规则 (nonzero winding 
rule) 。 如 果 在 一 个 圆 里 面 画 了 另 一 个 圆 ， 并 且 两 个 圆 绘 制 的 方向 相 
同 ， 那 么 在 大 圆 里 的 所 有 点 都 被 认为 是 包含 在 这 条 路 径 中 。 人 否则 ， 如 采 
一 个 圆 按 顺 时 针 方 向 画 ， 另 一 个 按 逆 时 针 方 同 男 ， 定 义 的 束 是 一 个 圆 环 
J 小 贺 内 部 的 点 则 在 路 径 之 外 。fill0 和 dlip0 对 包含 的 定义 也 是 这 


























颜色 、 渐 变 以 及 图 案 


对 一 条 路 径 填 充 或 描 边 时 ， 可 以 通过 strokeStyle 及 fillStyle 属 性 来 定 
义 线条 或 填充 区 域 的 泻 染 方式 。 这 两 个 属性 以 及 定义 渐变 及 图 案 的 
CanvasGradient 及 CanvasPattern 对 象 都 支持 CSS 格 式 的 颜色 字符 串 。 创 建 


渐变 可 以 使 用 createLinearGradient() 或 createRadialGradient() 方 法 ， 创 建 
图 案 可 以 使 用 createPattern()。 


要 用 CSS 符 号 定义 一 种 不 透明 的 颜色 ， 可 以 使 用 "#RRGGBB'" 格 式 
的 字符 串 ， 其 中 RR、GG 和 了 BB 是 十 六 进 制 数字 ， 和 定义 颜色 的 红 、 绿 、 蓝 
分 量 ， 取 值 在 00~EFEF 之 间 。 例 如 ， 亮 红色 是 "#FF0000"。 要 定义 部 分 透 
明 的 颜色 ， 可 使 用 "rgba(R,G,B,A)" 格 式 的 字符 串 。 在 这 种 格式 中 ，R、G 
以 及 B 和 定义 颜色 的 红 、 绿 、 效 分 量 ， 采 用 十 进 制 ， 值 在 0 一 255 之 间 ，A 
为 一 个 浮 点 数 ， 定 义 ajpha《〈 透 明度 ) 分 量 ， 值 在 0.0〈 完 全 透明 ) 一 
1《〈 完 全 不 透明 ) 之 间 。 比 如 ， 半 透明 的 亮 红 色 是 "rgba(255,0,0,0.5)"。 


线 宽 、 线 帽 以 及 线 的 连接 

画布 有 几 个 属性 用 于 定义 线条 如 何 绘制 。 可 以 使 用 linewidth 属 性 定 
义 线 条 的 宽度 ， 用 lineCap 属 性 定义 线条 疹 点 的 样式 ， 以 及 用 lineJoin 属 
性 来 定义 多 条 线条 之 间 如 何 连接 。 

画 和 定形 


可 以 使 用 strokeRect() 或 fillRect(0) 来 给 一 个 矩形 描 边 或 填充 ， 男 外 ， 
也 可 以 使 用 clearRect() 来 清空 一 个 矩形 区 域 。 


画图 像 

在 画布 API 中 ， 可 以 使 用 HTML<img> 元 素 或 Image0) 构 造 函 数 来 定 
义 图 像 。《〈 更 多 细节 请 参考 Image 的 参考 页 面 。) 过 canvas 之 元 系 或 < 
video 之 元 素 也 可 以 用 做 图 像 资 源 。 

可 以 使 用 drawImage() 方 法 来 将 一 幅 图 像 绘制 到 画布 中 ， 在 大 多 数 通 
用 形式 下 ， 这 个 方法 允许 从 源 图 像 中 任意 选取 一 个 和 矩形 区 域 ， 经 过 缩放 
之 后 绘制 到 画布 中 。 


画 文 字 








fillText() 方 法 绘制 一 段 文字 ，strokeText() 方 法 绘制 一 段 描 边 的 文 
字 。font 属 性 定义 使 用 的 字体 ， 它 的 值 应 该 是 一 个 CSS 字 体 说 明 字 符 
串 。textAlign 属 性 定义 文字 在 传 入 的 水 平方 向 上 是 左 对 齐 、 居 中 还 是 右 
对 齐 ，textBaseline 属 性 定义 文字 在 传 入 的 垂直 方向 上 的 位 置 。 











坐标 空间 与 转换 


默认 情况 下 ， 画 布 的 坐标 空间 的 原点 〈0,0) 位 于 画布 的 左上 角 ，x 
的 值 向 右 递 增 ，y 的 值 向 下 递增 。 男 布 的 width 及 height 属 性 定义 X 与 Y 的 
最 大 坐标 值 ， 这 个 坐标 空间 中 的 基本 单位 一 般 对 应 屏幕 上 的 一 个 像素 。 


可 以 定义 自己 的 坐标 空间 ， 之 后 ， 为 画布 的 绘 1 
目 动 转换 。 目 定义 坐标 空间 的 方法 有 translate0、scaleO 以 及 rotate0)， 
们 将 影响 画面 的 转换 矩阵 (transformation matrix) 。 由 于 坐标 空间 可 以 
像 这 样 转换 ， 因此 为 像 lineTo0 这 样 的 方法 传 入 的 坐标 不 和 E 用 像素 来 度 
量 ， 并 且 男 布 API 使 用 浮 点 数 来 代 蔡 整数 。 


阴影 


CanvasRenderingContext 2D 可 以 给 画 的 任何 东西 自动 添加 阴影 。 阴 
影 的 颜色 由 shadowColor 定 义 ， 偏 移 量 由 shadowOffsetX 和 shadowOffsetY 
定义 。 另 外 ， 阴 影 边 缘 的 羽化 程度 可 以 由 shadowBlur 来 设置 。 


影像 合成 


通常 情况 下 ， 当 在 画布 上 绘图 时 ， 新 画 的 图 像 会 出 现在 之 前 绘制 的 
内 容 的 上 面 ， 并 根据 其 透明 度 ， 部 分 或 全 部 遮 住 上 昌 的 内 容 。 处 理 新 像素 
与 旧 像 素 的 混合 的 过 程 称 为 “影像 合成 "，” 可 以 通过 为 
globalCompositeOperation 属 性 指定 不 同 的 值 来 改变 画布 合成 像素 的 方 
式 。 比 如 ， 可 以 设置 这 个 值 让 新 画 的 图 像 出 现在 现 有 图 像 之 下 。 


下 表 列 出 了 globalCompositeOperation 属 性 允许 的 值 及 其 含义 。 表 格 
中 “ 源 ”(source) 指 的 是 正 要 男 到 画布 上 的 像素 , “目标 ”(destination ) 
指 了 画布 上 现 有 的 像素 , “结果 ” (result) 指 源 与 目标 混合 之 后 的 像素 。 在 
公式 中 ， 字 母 $ 代 表 源 像素 ，D 代 表 目 标 像 素 ，R 代 表 结 果 像 素 ， 人 


源 像素 的 阿尔 法 通道 〈 透 明度) ，ag 代 表 目 标 像 系 的 阿尔 法 通道 





























什 公式 

"copy" R 5 
"destination-atop” R=(1-Qd)S + asD 
R = QsD 


"destination-in" 


"destination-out” R= (1-as)D 


"destination-over” R= (1-ad)9 + 


"lighter" RaS+D 


R=ags + (1-as)D 


“source-atop" 


"source-in" R = a 


含义 

忽略 目标 像素 ， 直 接 绘制 源 像素 

在 目标 下 面 绘制 源 像素 。 如 采 源 是 透明 
的 ， 结 采 将 也 是 透明 的 

将 目标 像素 的 值 与 源 像素 的 透明 度 相 乘 ， 
忽略 源 像素 的 颜色 

如 果 源 像素 不 透明 ， 目 标 像素 将 转 为 透 
明 ， 如 采 源 像素 透明 ， 则 目标 像素 不 变 。 
此 操作 中 源 像素 的 颜色 忽略 


源 像素 在 目标 像素 的 下 面 显示 ， 显 示 多 少 
取决 于 目标 像素 的 透明 度 


混合 后 的 颜色 是 源 像素 与 目标 像素 的 颜色 
的 简单 相 加 ， 如 采 和 大 于 最 大 值 则 舍 去 超 
出 部 分 


在 目标 像素 之 上 绘制 源 像素 ， 透 明度 为 源 
像素 与 目标 像素 透明 度 的 乘积 。 如 采 目 标 
像素 是 透明 的 则 什么 也 不 画 

绘制 源 像素 ， 透 明度 为 源 像素 与 目标 像素 透 
明度 的 乘积。 目标 像素 的 颜色 将 忽略 。 如 采 
目标 像素 龙 透 明 的 ， 结 采 将 也 是 透明 的 


值 公式 信义 

"source-out" R = (1-ad)5 如 果 目 标 像素 是 透明 的 ， 结 果 为 源 像素 ; 
如 果 目 标 像素 不 透明 ， 结 果 为 透明 像素 。 
目标 像素 的 颜色 忽略 


"sOUrCe-OVer" R=5+ (1-as)D 源 像素 绘制 在 目标 像素 之 上 。 如 采 源 像素 
龙 半 透明 的 ， 则 目标 像素 也 会 影响 结果 。 
这 是 globalComposite0peration 属 性 的 点 
认 值 


"Xor" R = (1-od)5 + (1-as)D 如 有 果 源 像素 是 透明 的 ， 结 采 将 是 目标 像 
素 ， 如 果 目 标 像素 是 透明 的 ， 结 果 将 是 源 
像素 ， 如 果 源 像素 和 目标 像素 都 透明 或 都 
不 透明 ， 结 有 果 将 是 透明 的 


保存 绘图 状态 


可 以 通过 save() 和 restore() 方 法 来 保存 或 还 原 一 个 
CanvasRenderingContext ”2D 对象 的 状态 。save() 将 当前 状态 压 入 栈 中 ， 
和 的 顶部 弹出 最 近 保 存 的 状态 ， 并 将 根据 它 的 值 设 置 当 前 绘 


CanvasRenderingContext 2D 对 象 的 所 有 属性 〈canvas 属 性 除外 ， 它 
是 一 个 常量 ) 都 可 在 绘图 状态 中 保存 。 转 换 和 矩阵 和 裁剪 区 域 也 是 状态 的 
一 部 分 ， 但 当前 路 径 和 当前 点 不 是 。 


像素 操作 
getImageData(0) 方 法 允许 查询 画布 的 原始 像素 ，putImageData0 人 允许 


设置 单个 像素 的 值 。 如 果 你 想 通 过 JavaScript 进 行 图 像 处 理 ， 这 两 个 方法 
将 非常 有 用 。 











属性 

readonly Canvas canvas 
用 于 绘图 的 Canvas 元 素 。 
any fllStyle 


当前 用 于 填充 路 径 的 颜色 、 图 案 或 渐变 。 这 个 属性 的 值 可 以 是 CSS 
颜色 字符 串 ， 也 可 以 是 一 个 CanvasGradient 或 CanvasPattern 对 象 。 默 认 
的 填充 样式 是 纯 黑 色 。 


string font 


绘制 文本 时 使 用 的 字体 ， 值 为 一 段 字 符 串 ， 格 式 与 CSSfont 属 性 格 
式 相 同 。 默 认 值 为 "10px sans-serif"。 如 果 字 体 尺 寸 使 用 "em"、"ex" 等 单 
位 或 "larger"、"smaller"、"bolder"、"lighter" 等 相对 关键 字 ， 它 们 将 相对 
当前 过 canvas 之 元 素 的 实际 CSS 字 体 样式 进行 转换 。 


double globalAlpha 
为 夯 布 上 的 所 有 内 容 定 义 一 个 额外 的 透明 上 度 。 男 布 上 的 所 有 像素 的 


alpha 值 将 乘 以 这 个 值 。 这 个 值 只 能 为 0.0《〈 所 有 内 容 完 全 透明 ) 一 
1.0〈 默 认 值 ， 没 有 额外 透明 度 ) 之 间 的 一 个 数字 。 





string globalCompositeOperation 


这 个 属性 指定 绘制 到 画布 上 的 源 像素 与 画布 上 已 经 存在 的 目标 像素 
之 间 如 何 结合 (或 合成 ) 。 一 般 只 有 在 处 理 部 分 透明 的 颜色 或 设置 
globalAlpha 属 性 后 这 个 属性 才 有 用 。 它 的 默认 值 为 "source-over"， 其 他 
常用 值 为 "destination-over" 和 "copy"。 可 参考 上 面 的 合法 值 表 格 。 注 意 ， 
在 编写 本 书 时 ， 不 同 的 浏览 器 对 特定 的 合成 模式 有 不 同 的 实现 : 一 些 合 
成 是 局 部 的 ， 一 些 是 全 局 的 。 更 多 细节 请 参考 21.4.13 节 。 


string lineCap 


lineCap 属 性 定义 线条 末 闪 的 样式 。 只 有 在 画 粗 线条 时 这 个 属性 才 有 
用 。 它 可 用 的 值 在 下 面 的 表格 中 列 出 了 ， 默 认 值 为 "butt"。 





值 合 义 


"butt” 这 个 值 为 默认 值 ， 线 条 没有 线 帽 。 线 条 的 终点 是 平 直 的 ， 与 线条 方向 垂直 。 
线条 不 会 超出 终点 

"round” ”这 个 值 定义 线条 有 一 个 半圆 形 的 线 帽 ， 半 圆 的 直径 等 于 线条 的 宽度 ， 半 圆 在 
线条 的 终点 处 向 外 扩展 ， 距 离 为 线条 宽度 的 一 半 

"square” ”这 个 值 定义 线条 有 一 个 矩形 的 线 帽 。 和 “butt” 类 似 ， 但 线条 在 终点 处 会 扩 
展 出 其 宽度 一 半 的 距离 


string lineJoin 


如 果 路 径 中 有 线段 和 /或 曲线 的 项 点 相交 ， 这 些 交 后 的 绘制 方式 由 
lineJoin 属 性 定义 。 这 个 属性 仅 当 绘 制 的 是 宽 线 条 时 才 有 效果 。 


这 个 属性 的 默认 值 是 "miter"， 表 示 两 根 线条 的 外 部 边缘 将 延伸 直到 
它们 相交 。 如 果 两 条 线条 以 一 个 锐角 和 斜 接 ， 它 们 的 交合 部 分 可 能 束 会 很 
长 ，miterLimit 属 性 定义 这 个 交合 部 分 的 长 度 上 限 ， 如 采 交 合 部 分 长 于 
这 个 限制 ， 它 将 转化 为 一 个 斜面。 

属性 值 "round" 定义 交合 部 分 顶点 的 外 边缘 为 一 段 实 心 圆 披 ， 直 径 与 
> 
I 三 角形 。 


double lineWidth 








定义 描 边 〔 或 夯 线 ) 操作 时 的 线条 宽度 。 默 认 值 为 1。 线 条 的 中 心 
在 路 径 上 ， 路 径 两 边 各 占 一 半 宽 度 。 


double miterLimit 


如 果 lineJoin 属 性 值 为 "miter"， 并 且 两 条 线 以 一 个 锐角 和 斜 交 ， 那 么 它 
们 的 交合 部 分 可 能 会 很 长 。 如 果 这 个 斜 交 的 部 分 太 长 ， 看 起 来 就 会 很 不 
谐 调 。miterLimit 属 性 设置 斜 交 部 分 长 度 的 上 限 。 这 个 值 定 义 斜 交 部 分 
长 度 与 线条 宽度 的 一 半 之 间 的 比例 ， 默 认 值 是 10， 即 斜 交 部 分 的 长 度 不 





会 超过 线条 宽度 95 倍 。 如 果 两 条 线条 的 斜 交 部 分 的 长 度 比 miterLimit 允 
许 的 最 大 值 要 长 ， 这 两 条 线条 将 以 斜面 而 不 是 斜 接 的 方式 连接 。 


double shadowBlur 


定义 阴影 的 模糊 程度 。 默 认 值 为 0， 将 生成 边缘 清晰 的 阴影 。 取 值 
0 J 不 过 需要 注意 ， 这 个 值 的 单位 不 是 像素 ， 也 不 受 
用 泉 乡 











string ShadowColor 


定义 阴影 的 颜色 ， 格 式 同 CSS 颜 色 格 式 。 默 认 情 况 下 是 透明 的 黑 


double shadowOffsetX 
double shadowOffsetY 
定义 阴影 的 横向 和 纵 同 偏 移 量 。 取 信 越 大 ， 产生 阴影 的 对 象 看 起 来 


就 像 在 背景 上 漂 得 越 高 。 默 认 值 为 0。 这 两 个 值 与 坐标 空间 的 单位 相 
同 ， 依 赖 于 当前 变换 。 








any strokeStyle 


定义 描 边 (或 绘制 ) 路 径 的 颜色 、 图 案 或 渐变 。 这 个 属性 的 值 可 以 
A 频 色 字符 串 ， 也 可 以 是 一 个 CanvasGradient 或 CanvasPattern 对 


string textAlign 


定义 文本 的 水 平 对 齐 方式 ， 其 对 应 的 X 华 标 值 会 传 逆 给 fText0 及 
strokeText()。 人 允许 的 值 有 "left"、"center"、"right"、"start" 以 
及 "end"。"start" 和 "end" 的 含义 取决 于 当前 二 canvas 二 标签 的 dir (文字 方 
问 ) 属性 。 默 认 值 为 "start"。 





string textBaseline 


定义 文本 的 垂直 对 齐 方式 ， 其 对 应 的 Y 坐 标 值 会 传递 给 fllText() 及 
strokeText()。 人 允许 的 值 





有 "top"、"middle"、"bottom"、"alphabetic"、"hanging" 以 
及 "ideographic"。 默 认 值 为 "alphabetic"。 


太太 


void arc(double x,y,radius,startAngle,endAngle,[boolean 
anticlockwise]) 


这 个 方法 根据 指定 的 圆心 及 半径 在 画布 的 当前 子路 径 上 绘制 一 段 圆 
弧 。 该 方法 的 前 三 个 参数 指定 一 个 圆 的 圆心 及 半径 ， 接 下 来 两 个 参数 定 
义 这 个 贺 上 的 一 段 圆 孤 的 起 点 及 终点 的 角度 ， 和 角度 的 单位 为 弧度 制 。 沿 
着 X 轴 正 向 的 3 点 钟 方向 是 0"， 沿 顺 时 针 方 向 角度 增加 。 最 后 一 个 参数 定 
站 Ctrue) 还 是 顺 时 针 方 向 〈false 或 省 
办 沉 


调用 这 个 方法 会 在 移 在 当前 路 径 中 的 当前 点 与 圆 弧 起 点 之 间 添 加 一 
条 直线 ， 然 后 再 评 加 圆 弧 本 身 。 
































void arcTo(double x1,y1,x2,y2,radius) 


这 个 方法 在 当前 子路 径 中 添加 一 条 直线 和 一 个 圆 踊 ， 并 以 某 种 方式 
摘 述 圆 踊 ， 从 而 使 它 在 为 多 边 形 添加 圆 角 时 特别 有 用 。 参 数 xX1、y1 定 义 
点 P1， 参 数 x2、y2 定 义 点 P2， 添 加 到 路 径 中 的 圆 跌 是 一 个 半径 为 radius 
的 圆 的 一 部 分 。 圆 踊 上 有 一 点 与 当前 点 到 P1 之 间 的 连 线 相 切 ， 一 点 与 
P1、P2 之 闻 的 连 线 相 切 。 这 两 个 相 切 点 也 是 圆 弧 的 起 点 及 终点 ， 绘 制 的 
圆 弧 为 连接 这 两 个 点 的 最 短 圆 踊 。 在 添加 圆 引 到 路 径 中 之 前 ， 这 个 方法 
先 从 当前 点 到 圆 弧 的 起 点 添加 一 条 直线 。 调 用 这 个 方法 后 ， 当 前 点 将 位 
于 圆 弧 的 终点 位 置 ， 在 Pl 和 P2 之 间 的 连 线 上 。 


给 定 一 个 上 下 文 对 象 ce， 可 以 用 类 似 下 面 的 代码 来 绘制 一 个 100x100 
的 贺 角 多 个 半径 〉 矩形 : 














c.beginpath(); 

c.moveTo(150,100);// 在 顶部 边线 的 中 间 开 始 
c.arcTo(200,100,200,200,40);// 男 顶部 的 边线 以 及 右上 角 加 
c.arcTo(200,200,100,200, 30);// 画 右 部 的 边线 以 及 右 下 角 圆 角 (小 一 点 ) 
c.arcTo(100,200,100,100, 20);// 画 底部 的 边线 以 及 左 册 
c.arcTo(100,100,200,100,10);// 画 左 部 的 边线 以 及 左上 角 区 
c.closePath();// 回 到 起 点 

Cc.Stroke( );// 绘 制 路 径 


二 一 
























































































































































X= 


void beginPath() 


beginPathO0 丢 弃 当 前 定义 的 路 径 并 开始 一 条 新 的 路 径 。 调 用 
beginPath() 之 后 没有 当前 点 。 


首次 创建 画布 的 上 下 文 时 ，beginPath() 会 隐 含 地 调用 。 
void bezierCurveTo(double cpx1,cpy1,cpXx2,cpy2,X,y) 


bezierCurveTo0 诡 加 一 条 三 次 贝 蹇 尔 曲线 到 画布 的 当前 子路 径 中 。 
曲线 的 起 点 是 画布 的 当前 点 ， 终 点 是 (x,y)， 两 个 贝 塞 尔 控制 点 
(cpX1,cpY1) 及 (cpX2,cpY2) 定 义 曲 线 的 形状 。 当 这 个 方法 返回 时 ， 当 前 
点 是 (x,y)。 


void clearRect(double x,y,width,height) 


clearRect() 使 用 透明 黑色 填充 指定 的 矩形 区 域 。 不 像 rect0， 它 不 会 
影响 当前 点 或 当前 路 径 。 





void clip() 


这 个 方法 计算 当前 路 径 和 当前 裁剪 区 域 中 的 相交 部 分 ， 并 将 这 个 较 
小 的 区 域 作 为 新 的 裁剪 区 域 返回 。 注 意 裁 前 区域 是 没 法 扩大 的 ， 如 果 你 
只 是 想 要 一 个 临时 的 裁剪 区 域 ， 你 应 该 先 调用 save0 保 存 当 前 状态 ， 以 
便 迟 些 调用 restore(0) 恢 复 为 之 前 的 状态 。 男 布 默认 的 裁剪 区 域 为 画布 自 
身 的 矩形 区 域 。 


类 似 于 凶 10 方 法 ，clip0 将 所 有 子路 径 视 为 关闭 ， 并 使 用 非 零 环绕 规 
则 来 判定 路 径 的 内 部 与 外 部 。 


void closePath() 


如 果 当 前 画布 的 子路 径 未 闭合 ，closePath() 会 通过 在 当前 点 与 这 条 
子路 径 的 第 一 个 点 之 间 添 加 一 条 连 线 来 闭合 它 ， 并 【就 像 调 用 moveTo() 
一 样 ) 在 同一 个 点 开始 一 条 新 的 子路 径 。 


fiO0 和 clipO 总 是 将 子路 径 当 做 闭合 的 来 处 理 ， 所 以 ， 只 有 在 想 为 一 
条 封闭 路 径 描 边 〈 通 过 strokeO0 ) 时 才 需 要 显 式 调用 closePath()。 











ImageData createImageData(ImageData imagedata) 
返回 一 个 和 传 入 的 imagedata 尺 寸 相同 的 新 的 ImageData 对 象 。 


ImageData createImageData(double w,double h) 





返回 一 个 指定 宽度 和 高 度 的 新 ImageData 对 象 。 这 个 新 InageData 对 
象 中 的 所 有 像素 都 初始 化 为 透明 黑色 〈 所 有 颜色 和 alpha 值 都 为 0) 。 


参数 w 和 h 定 义 图 片 的 尺寸 ， 单 位 为 CSS 像 系 。 在 实际 实现 中 ， 允 许 
一 个 CSS 像 系 映 射 到 多 个 底层 设备 的 像素 。 返 回 的 ImageData 对 象 的 
> 图 像 太 寸 ， 这 两 个 值 与 参数 w 和 h 可 能 
~ 一致。 








CanvasGradient createLinearGradient(double x0,y0,x1,y1) 


这 个 方法 生成 并 返回 一 个 新 的 CanvasGradient 对 象 ， 其 中 颜色 从 起 
点 (Xx0,y0) 到 终点 (x1,y1) 之 间 线 性 渐变 。 注 意 ， 这 个 方法 并 没有 指定 渐变 
的 颜色 ， 如 果 要 指定 颜色 ， 使 用 它 返 回 对 象 的 addColorStop0) 方 法 。 如 
要 绘制 渐变 描 边 或 填充 区 域 ， 只 须 将 一 个 CanvasGradient 对 象 赋值 给 
strokeStyle 或 fillStyle 属 性 。 


CanvasPattern createPattern(Element image,string repetition) 
这 个 方法 生成 并 返回 一 个 CanvasPattermn 对 象 ， 这 个 对 象 表 示 由 一 幅 
平 铺 图 像 定 义 的 图 案 。 人 参数 image 必 须 是 一 个 <img>、 雪 canvas 之 或 雪 


video 过 元素， 包含 图 案 中 要 使 用 的 图 像 。 人 参数 repetition 定 义 图 片 如 何平 
铺 。 可 能 的 值 有 : 


值 售 义 
"Tepeat 在 x 轴 方 由 和 Y 轴 方向 都 平 销 图 像 。 这 古 默 认 值 
"repeat-x" 只 在 X 轴 方向 平 铺 图 像 
"repeat-y" 只 在 Y 轴 方 周平 铺 图 像 
"no-repeat'" 不 平 铺 图 像 ， 图 像 只 绘制 一 次 
如 要 使 用 图 案 来 描 边 或 填充 一 个 区 域 ， 可 将 CanvasPattern 对 象 作为 
strokeStyle 或 他 lStyle 属 性 的 值 。 
CanvasGradient createRadialGradient(double x0,y0,r0,x1,y1,r1) 
这 个 方法 创建 并 返回 一 个 新 的 CanvasGradient 对 象 ， 其 中 颜色 在 两 
个 指定 的 圆 的 圆周 之 间 辐 射 渐 变 。 注 意 ， 这 个 方法 并 没有 指定 渐变 的 凑 
色 ， 如 果 要 指定 颜色 ， 使 用 它 返回 对 象 的 addColorStop0) 方 法 。 如 要 绘 
制 渐变 描 边 或 填充 区 域 ， 只 须 将 一 个 CanvasGradient 对 象 赋值 给 
strokeStyle 或 fillStyle 属 性 。 


辐 冉 渐变 的 泻 染 方式 如 下 : 在 第 一 个 圆 的 圆周 处 颜色 偶 移 量 为 0， 
在 第 二 个 圆周 处 颜色 偏 移 量 为 1， 两 个 圆 之 间 为 渐变 的 中 间 色 。 














void drawImage(Element image,double dx,dy,[dw,dh]) 


复制 指定 image (这 幅 图 像 必 须 是 一 个 <img> 之 、 扫 canvas 之 或 去 
video 之 元 素 ) 到 画布 中 ， 图 像 的 左上 角 位 置 为 (dx,dy)。 如 果 指 定 dw 和 
dh， 图 像 的 宽度 和 高 度 会 缩放 到 dw 像 系 宽 和 dh 像素 高 。 


void drawImage(Element image,double sx,sy,sw,sh,dx,dy,dw,dh) 


这 个 版 本 的 drawImage(0) 方 法 复制 指定 image 的 一 个 源 和 矩形 区 域 的 内 
容 到 画布 的 目标 和 失 形 区 域 。image 必 须 是 一 个 <img>、 反 canvas 之 或 所 
video 之 元 素 。(Sx,s 几 定义 图 像 的 源 矩 形 区 域 的 左上 角 ，sw 和 sh 定义 源 矩 
形 区 域 的 宽度 和 高 度 。 注 意 这 些 参数 的 单位 为 CSS 像 素 并 和 画布 的 变换 
无 天 。 其 余 的 参数 指定 图 像 要 复制 到 的 目标 矩形 区 域 ， 细节 可 参考 5 个 








的 drawImage()。 注 意 有 目标 矩形 区 域 的 参数 会 根据 当前 转换 矩形 转 


void fill() 


fill0 方 法 使 用 flstyle 属 性 定义 的 颜色 、 渐 变 或 图 案 对 当前 路 径 进 行 
填充 。 没 有 闭合 的 子路 径 在 填充 时 将 表现 得 如 同调 用 过 closePath() 方 法 
一 样 。 (注意 ， 这 并 不 会 让 这 些 子路 径 真 的 闭合 。) 


填充 一 条 路 径 并 不 会 清除 抒 这 条 路 径 ， 在 调用 fil0 之 后 ， 仍 然 可 以 
调用 stroke() 而 不 需 重 定义 这 条 路 径 。 


如 果 路 径 与 自身 相交 或 者 与 子路 从 重合， 填充 “使 用 和 1()〉 男 布 将 
使 用 非 零 环绕 规则 来 判断 一 个 点 是 在 路 径 的 内 部 还 是 外 部 。 这 音 味 着 ， 
举例 来 说 ， 如 果 你 的 路 径 定义 了 一 个 加 和 正方 形 ， 正 方形 在 加 的 内 部 并 
且 正 方形 的 路 径 的 绘制 方 同 与 圆 的 路 径 的 绘制 方向 相反 ， 那 么 正方 形 和 内 
部 的 点 将 在 路 径 的 外 面 ， 不 会 被 填充 。 


void fillRect(double x,y,width,height) 
fillRectO 使 用 flStyle 属 性 定义 的 颜色 、 渐 变 或 图 案 对 指定 的 和 形 进 
行 填充 。 

















和 和 rect() 方 法 不 同 ，fillRect() 对 当前 点 和 当前 路 径 没 有 影响 。 
void fillText(string text,double x,y,[double maxWidth]) 


fillText() 使 用 当前 字体 及 fillStyle 属 性 绘制 text。 参 数 x 和 y 定 义 文本 
应 该 国 在 画布 的 什么 位 置 ， 但 这 两 个 参数 的 实际 值 分 别 受到 textAlign 和 
textBaseline 属 性 的 影响 。 


如 有 果 textAlign 的 值 为 left 或 start〈 默 认 值 ) 并 且 画 布 使 用 自 左 同 右 的 
文本 排版 (默认 情况 ) ， 或 者 如 果 textAlign 的 值 为 end 并 且 画 面 使 用 自 
右 问 左 的 文本 排版 ， 文 本 将 绘制 在 指定 的 X 华 标的 右边 。 如 果 textAlign 
的 值 为 center， 文 本 将 在 指定 的 X 坐 标 处 水 平 居 中 。 在 其 他 情况 下 如果 
textAlign 的 值 为 "right"， 或 值 为 "end" 同 时 画布 使 用 自 左 向 右 的 文本 排 
版 ， 或 值 为 "start" 同 时 画布 使 用 自 右 同 左 的 文本 排版 ”， 文 字 将 绘制 在 
虽 定 的 X 坐 标的 左边 。 














如 果 textBaseline 的 值 为 "alphabetic" (默认 
值 )、"bottom" 或 "ideographic"， 大 多 数字 形 都 将 显示 在 指定 的 Y 坐 标 上 
方 。 如 果 textBaseline 是 "center"， 文 本 将 在 指定 的 Y 坐 标 处 大 致 和 垂直 抽 
中 。 如 果 textBaseline 的 值 为 "top" 或 "hanging"， 大 多 数字 形 都 将 显示 在 指 
定 的 Y 坐 标 下 方 。 


可 选 参数 maxwidth 定 义 文本 的 最 大 宽度 。 如 果 text 的 宽度 有 可 能 超 
过 maxWidth， 文 本 将 使 用 更 小 或 压缩 版 的 字体 来 绘制 。 





ImageData getImageData(double sx,sy,sw,sh) 


这 个 方法 的 参数 为 未 转换 的 坐标 ， 定 义 画 布 中 的 一 个 矩形 区 域 ， 它 
将 这 个 矩形 区 域 的 像 系 数据 复制 到 一 个 新 的 ImageData 对 象 中 并 返回 该 
对 象 。 如 何 获取 一 个 像素 的 红 、 绿 、 赣 分 量 以 及 alpha 分 量 请 参考 
ImagData 部 分 。 


返回 像素 的 RGB 颜色 分 量 没 有 预 乘 alpha 值 。 如 果 请 求 的 矩形 的 某 
个 区 域 在 画布 之 外 ，ImageData 对 象 中 这 部 分 像素 的 值 为 透明 黑色 (全 
为 0) 。 如 果 该 实现 对 于 每 一 个 CSS 像 素 使 用 多 个 设备 像素 ， 则 返回 的 
ImageData 对 象 的 width 和 height 属 性 将 与 参数 sw 和 sh 不 同 。 类 似 于 
Canvas.toDataURLO， 这 个 方法 也 会 进行 安全 检验 ， 以 避免 跨 域 信息 泄 
露 。 只 有 当 画 布 是 “ 同 源 ” 时 ，getImageData0 才 会 返回 一 个 ImageData 对 
; 否则 ， 它 将 抛 出 一 个 错误 。 如 果 一 张 国 布 上 包含 一 幅 图 片 《 直 接 用 
drawImage0 或 间接 地 通过 CanvasPattern 绘 制 ) ， 并 且 这 幅 图 片 与 包含 当 
前 画布 的 文档 的 源 不 同 ， 则 这 张 画布 是 “ 非 同 源 ” 的 。 同 样 ， 如 采 画 布 上 
绘制 的 文字 使 用 了 来 自 不 同 源 的 Web 字 体 ， 它 是 “ 非 同 源 ” 的 。 











boolean isPointInPath(double x,y) 


如 有 果 指 定 的 点 在 当前 路 径 的 边缘 之 内 或 之 上 ，isPointInPath() 返 回 
true; 人 否则 返回 false。 指 定 的 点 没有 根据 当前 转换 矩阵 转换 。x 取 值 应 该 
在 0 一 canvas.width 之 间 ，y 取 值 应 该 在 0 一 canvas.height 之 间 。 


isPointInPath() 测 试 的 是 未 转换 的 点 ， 因 为 它 的 设计 目的 是 做 “命中 
测试 ”Chit-testing〉: 比如 判断 用 户 的 鼠标 单 击 是 否 在 画布 上 当前 路 径 
描述 的 某 个 部 分 之 上 。 为 了 实现 “命中 测试 ?”， 鼠 标 坐 标 先 要 先 从 相对 于 
窗口 转换 为 相对 于 男 布 。 如 果 屏 幕 上 画布 的 尺寸 和 width 及 height 属 性 定 
义 的 不 一 样 〈 比 如 可 能 设置 了 style.width 和 style.height) ， 鼠 标 坐 标 还 需 











要 缩放 到 与 画布 坐标 一 致 。 下 面 这 个 函数 是 一 个 二 canvas 之 对 象 的 
a 它 做 了 必要 的 转换 以 便 鼠 标 坐 标 与 画布 坐标 一 
致 。 








// 一 个 canvas 标 签 的 0nclick 处 理 程序 ， 假 设 当 前 已 定义 一 条 路 径 
function hittest(event)t{ 
var canvas=this;// 在 画布 上 下 文中 调用 
var c=canvas.getcontext("2d");// 取 得 画布 的 绘图 上 下 文 
// 取 得 画布 的 尺寸 与 位 置 
var bb=canvas ,getBoundingClientRect();// 将 鼠标 事件 的 坐标 转换 为 画布 坐标 
var x=(event.clientX-bb.left)*(canvas.width/bb .width ) ; 
var y=(event.clientY-bb.top)*(canvas.height/bb.height);// 如 果 用 户 在 指定 路 径 上 和 
其 填充 
if(c.isPpointIinpath(x,y))c.fill(); 
} 
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void lineTo(double x,double y) 


0 条 直线 ， 直 线 从 当前 点 开始 ， 
到 (x,y) 结 束 。 这 个 方法 返回 后 ， 当 前 点 是 (x,y)。 


TextMetrics measureText(string text) 


measureText() 测 量 在 当前 字体 下 指定 text 将 占据 多 大 的 宽度 ， 返 回 
一 个 包含 测量 结果 的 TextMetrics 对 象 。 在 写 这 本 书 的 时 候 ， 返 回 对 象 只 
有 一 个 width 属性 ， 文 本 的 高 度 和 边框 都 还 没有 测量 。 





void moveTo(double x,double y) 


moveTo() 将 当前 点 设置 为 (x,y)， 并 以 这 个 所 作为 第 人 
条 新 的 子路 径 。 如 果 之 前 有 一 条 子路 径 ， 并 且 这 条 子路 径 只 包含 一 个 
点 ， 那 么 这 条 空子 路 径 将 会 从 路 径 中 移 除 。 








void putImageData(ImageData imagedata,double dx,dy,[SX,sy,sw,sh]) 


putImageData() 方 法 从 一 个 ImageData 对 象 中 复制 一 个 矩形 像素 块 到 
当前 了 画布 中 。 这 是 一 个 低级 的 像素 复制 操作 : globalCompositeOperation 
0 性 被 忽略 ， 同 样 被 忽略 的 还 有 剪 切 区 域 、 转 换 矩 阵 以 及 
阴影 


参数 dx、dy 定 义 画 布 上 的 目标 点 ，data 中 的 像素 复制 到 画布 中 后 会 





从 这 个 点 开始 绘制 。 这 两 个 参数 不 会 修 当 前 转换 算 阵 转换 。 


最 后 4 个 参数 定义 ImageData 中 的 一 个 源 和 矩形 区 域 。 如 果 指 定 ， 则 只 
有 这 个 矩形 之 内 的 像素 才 会 复制 到 画布 中 。 如 果 这 4 个 参数 省 略 ， 则 
ImageData 中 的 所 有 像素 都 会 复制 。 如 末 这 4 个 参数 定义 的 窍 形 区 域 大 于 
0 则 矩形 区 域 会 裁剪 至 这 个 范围 。 参 数 sx 及 sy 的 值 可 以 
5 负数 。 


ImageData 对 象 的 用 途 之 一 是 将 它 用 做 画布 的 “备份 存储 器 盖 一 保 
存 画 布 像素 的 一 份 副 本 到 一 个 ImageData 〈 使 用 getImageData0) 对 象 
中 ， 在 画 布 上 临时 绘画 ， 然 后 使 用 putImageData() 方 法 将 它 恢复 到 初始 
状态 。 














void quadraticCurveTo(double cpx,cpy,X,y) 


这 个 方法 添加 一 条 二 次 贝 塞 尔 曲 线段 到 当前 子路 径 中 。 曲 线 从 当前 
点 开始 ， 到 (x,y) 结 束 。 控 制 点 (cpX,cpY) 指 定 起 点 与 终点 间 的 曲线 的 形 
状 。《 不 过 ， 贝 塞 尔 曲线 的 数学 知识 超出 了 本 书 的 范围 。) 这 个 方法 返 
回 时 ， 当 前 点 为 (x,y)。 也 可 以 参考 bezierCurveTo() 方 法 。 


void rect(double x,y,w,h) 


这 个 方法 添加 一 个 矩形 到 当前 路 径 中 。 这 个 矩形 在 自己 的 子路 径 
中 ， 与 当前 路 径 的 其 他 子路 径 都 不 相连 。 这 个 方法 返回 时 ， 当 前 点 是 
(Xx,y)。 这 个 方法 与 下 面 的 调用 序列 等 价 : 





c.moveTo(x,y); 
c.lineTo(x+w,y); 
c.lineTo(x+w,y+h); 
c.lineTo(x,y+h); 
c.closePath(); 





void restore() 


这 个 方法 从 已 保存 的 绘图 状态 的 栈 中 弹出 最 后 一 个 保存 状态 ， 并 根 
据 这 个 状态 重 置 CanvasRenderingContext2D 的 各 项 属性 、 裁 剪 路径 以 及 
转换 矩阵 。 更 多 信息 请 参考 Save(0) 方 法 。 


void rotate(double angle) 


这 个 方法 改变 当前 转换 矩阵 ， 接 下 来 这 张 画 布 上 绘制 的 任何 对 象 都 
将 旋转 指定 的 角度 。 和 canvas 之 元 聚 本 身 并 设 有 旋转 。 注 意 角 度 的 单位 
是 弧度 制 。 角 度 转换 为 弧度 的 方法 为 : 乘 以 Math.PI， 再 除 以 180。 


void savel() 


save() 将 复制 当前 绘图 状态 ， 并 将 这 个 副本 压 入 已 保存 的 绘图 状态 
i 这 样 ， 就 可 以 临时 改变 绘图 状态 ， 然 后 再 调用 restore() 恢 复 到 之 
前 的 值 。 


画布 的 绘图 状态 包含 CanvasRenderingContext2D 对 象 的 所 有 属性 
(除了 只 读 的 canvas 属 性 ) 。 它 也 包含 由 于 调用 rotate()、scale0 及 
translate(0) 会 影响 到 的 转换 和 矩阵， 以 及 由 clip0) 方 法 定义 的 裁剪 路 径 。 但 
是 ， 需 要 注意 的 是 ， 当 前 路 径 与 当前 位 置 不 是 绘图 状态 的 一 部 分 ， 不 会 
被 这 个 方法 保存 。 











void scale(double sx,double sy) 


scale0 讨 加 一 个 缩放 转换 到 画布 的 当前 转换 矩阵 中 。 缩 放 在 水 平方 
问 与 垂直 方向 上 是 相互 独立 的 。 例 如 ， 传 入 参数 2.0、0.5， 在 接 下 来 的 
绘画 中 ， 路 径 的 宽度 将 变 成 原来 的 两 倍 ， 高 度 变 为 原来 的 一 半 。 如 果 参 
数 s x 为 负数 ，X 轴 将 水 平 翻转 ， 如果 参数 s y 为 负数 ，Y 轴 将 垂直 翻转 。 


void setTransform(double a,b,c,d,e,f) 


这 个 方法 允许 直接 设置 当前 转换 矩阵 ， 而 无 须 多 次 调用 translate()、 
scale() 及 rotate()。 调 用 这 个 方法 后 ， 新 的 转换 如 下 : 


Xx = EC 已 
y =bdfxy= bx+dy+f 
和 旧臣 王 浊 


void Stroke() 


stroke() 方 法 为 当前 路 径 摘 边 。 定 义 线 条 的 几何 形态 的 路 径 将 会 显现 
出 来 ， 但 线条 的 视觉 效果 取决 于 strokeStyle、lineWidth、lineCap、 
lineJoin 以 及 miterLimit 属 性 。 





术语 描 边 〈stroke) 指 钢笔 或 刷子 描 边 ， 它 的 意思 是 “绘制 .………. 的 外 
边线 ”。 与 stroke0 对 应 的 是 fl0 方 法 ， 这 个 方法 对 路 径 的 内 部 进行 填 
充 ， 而 不 是 绘制 它 的 外 边线 。 





void strokeRect(double x,y,w,h) 

这 个 方法 根据 指定 的 位 置 及 尺寸 ， 绘 制 一 个 矩形 边框 (但 不 对 其 内 
部 填充 ) 。 线 条 颜色 及 宽度 由 strokeStyle 及 lineWidth 属 性 定义 ， 和 矩形 边 
角 的 外 观 由 lineJoin 属 性 定义 。 


和 rect() 方 法 不 同 ，stokreRect0O 不 会 影响 当前 路 径 和 当前 点 。 





void strokeText(string text,double x,y,[maxWidth]) 





strokeText() 和 fillText() 很 类 似 ， 除 了 它 不 是 根据 他 lStyle 填 充 每 一 个 
字形 ， 而 是 根据 strokeStyle 对 每 一 个 字形 进行 描 边 。 当 使 用 大 号 字体 
时 ，strokeText() 会 生成 一 些 有 趣 的 图 形 效 果 ， 不 过 在 实际 应 用 中 ， 
fillText() 更 常用 。 

void transform(double a,b,c,d,e,f) 


这 个 方法 的 参数 定义 一 个 3x3 仿 射 转换 窍 阵 T 的 6 个 重要 元 素 : 


C3 C3 
CS 
-hm 


transform() 方 法 将 当前 转换 矩阵 的 值 设 置 为 这 个 转换 矩阵 与 T 的 积 : 





CTM ' =CTMxT 





平移 〈translation) 、 缩 放 以 及 旋转 都 可 以 通过 这 个 通用 的 
transform() 方 法 实现 。 对 于 平移 来 说 ， 调 用 transform(1,0,0,1,dx,dy) 即 
可 。 对 于 缩放 来 说 ， 调 用 transform(sx,0,0,sy,0,0) 即 可 。 对 于 以 原点 为 中 
心 顺 时 针 旋 转角 度 x 的 操作 来 说 ， 可 以 使 用 : 





transform(cos(x),sin(x),-sin(x),cos(x),0,0) 





对 于 以 平行 于 X 轴 的 因子 k 进 行 的 裁剪 来 说 ， 调 用 
transform(1,0,k,10,0) 即 可 。 对 于 以 平行 于 Y 轴 的 裁剪 ， 调 用 
transform(1,k,0,1,0,0) 即 可 。 

void translate(double x,double y) 


translate() 方 法 为 当前 画布 的 转换 矩阵 添加 水 平和 垂直 的 偏 移 量 。 参 
数 dx、dy 将 添加 a 到 所 有 随后 定义 的 路 径 的 每 一 个 点 上 。 


ClientRect 

元 床 边 框 

ClientRect 对 象 定义 一 个 矩形 ， 使 用 窗口 或 视 口 〈viewport) 坐标 。 
Element 对 象 的 getBoundingClientRect() 方 法 返回 这 类 对 象 ， 用 于 描述 元 
素 在 屏幕 上 的 边框 。ClientRect 对 象 是 在 x 方 回 上 静态 的 (x static) : 当 
它 描述 的 元 素 发 生 改 变 时 ， 它 不 会 发 生变 化 。 

属性 





readonly float bottom 


视 口 坐 标 中 矩形 底 边 的 坐标 。 





readonly float height 


和 矩形 的 高 度 ， 单 位 为 像素 。 在 IE8 及 更 早 的 版 本 中 ， 这 个 属性 未 定 
义 ， 在 这 些 版 本 中 可 使 用 bottom-top 代 蔡 。 





readonly float left 
视 口 坐标 中 矩形 左边 的 X 坐 标 。 
readonly float right 


视 口 坐标 中 矩形 右边 的 X 坐 标 。 


readonly float top 
视 口 坐标 中 矩形 顶 边 的 Y 坐 标 。 
readonly float width 


窍 形 的 宽度 ， 单 位 为 像素 。 在 正 8 及 更 早 的 版 本 中 ， 这 个 属性 未 定 
义 ， 在 这 些 版 本 中 可 使 用 right-left 代 答 。 





CloseEvent 

说 明 一 个 webSocket 是 否 干净 地 关闭 了 

Event 
件 会 丰 光 个 WebSocke (对象 仙 发 ， 对 应 的 CloseEVent 对 旬 会 人 所 有 | 
注册 的 事件 处 理 程 序 。 

属性 

readonly boolean wasClean 

如 果 WebSocket 连 接 在 WebSocket 协 议 的 控制 下 关闭 ， 并 且 服 务 器 


及 客户 端 都 成 功 确 认 ， 则 这 个 关闭 称 为 干净 的 ， 这 个 属性 值 为 tue。 如 
果 属 性 值 为 false，WebSocket 可 能 是 由 于 某 种 网 络 错误 而 关闭 。 





Comment 
HTML 或 XML 注释 
Node 
Comment 节 点 表示 HTML 或 XML 文档 中 的 注释 。 注 释 的 内 容 
〈《 即 “天 !--” 与 “-- 之 ”之 间 的 文本 ) 可 以 通过 data 属 性 或 者 从 Node 继 承 而 


来 的 nodeValue 属 性 获取 。 可 通过 Document.createComment() 方 法 创建 一 
个 注 科 对象 。 


属性 

String data 

注释 的 文本 内 容 。 

readonly unsigned long length 

注释 包含 的 字符 个 数 。 

方法 

void appendData(string data) 

void deleteData(unsigned long offset,unsigned long count) 

void insertData(unsigned long offset,string data) 

void replaceData(unsigned long offset,unsigned long count,string data) 


string substringData(unsigned long offset,unsigned long count) 





Comment 节 点 有 Text 节 | 点 的 大 部 分 方法 ， 这 些 方法 和 Text 节 点 中 的 
效果 也 一 样 。 它 们 列 在 这 儿 ， 不 过 相关 文档 请 参考 Text。 


Console 
调试 输出 


现代 浏览 器 《以 及 一 些 装 了 Firebug 等 调试 器 扩展 的 老 浏览 嚣 ) 定义 
一 个 全 局 的 console 属 性 ， 对 应 一 个 Console 对 象 。 这 个 对 象 的 方法 定义 
一 些 简 单调 试 任务 的 API， 比 如 将 消息 输出 到 一 个 控制 台 窗 口 〈 这 个 控 
制 台 可 能 有 "Developer Tools" 或 "Web Inspector" 等 名 字 ) 中 。 





Console API 还 没有 一 个 正式 的 标准 ， 不 过 ，Firefox 的 Firebug 调 试 右 
扩展 已 经 建立 了 一 个 事实 标准 ， 浏 览 器 厂商 看 起 来 正在 实现 Firebug 的 
API， 有 关 文 档 在 下 面 。 基 本 的 console.log0 函 数 在 几乎 所 有 浏览 器 中 都 
支持 ， 但 其 他 函数 在 各 浏览 器 中 的 支持 情况 就 没 这 么 好 。 


注意 ， 在 一 些 较 老 的 浏览 器 中 ， 只 有 在 控制 台 窗 口 打开 时 console 属 
性 才 有 定义 ， 如 果 在 控制 台 关 闭 的 情况 下 运行 那些 使 用 Console API 的 脚 
本 会 导致 错误 。 

也 可 以 参考 ConsoleCommandLine。 

方法 


void assert(any expression,string message) 





如 霖 expression 为 false 或 null、 undefined、0、 空 字符 串 等 非 真 值 ， 
这 个 方法 将 在 控制 台中 显示 错误 消息 message。 





void count([string title]) 


显示 指定 的 title 字 符 串 ， 后 面 跟着 一 个 计数 ， 表 示 这 个 方法 以 该 字 
符 串 为 参数 调用 过 的 次 数 。 


void debug(any message...) 
类 似 于 console.log()， 但 将 输出 标记 为 调试 信息 。 
void dir(any object) 


在 控制 台 显 示 传 入 的 JavaScript object， 人 允许 开发 者 检查 这 个 对 象 的 
属性 及 元 素 ， 也 可 以 交互 式 地 浏览 舱 套 的 对 象 或 数组 。 





void dirxml(any node) 





在 控制 台中 显示 文档 对 象 node 的 XML 或 HTML 标 记 。 
Void error(any message...) 

类 似 于 console.log0， 但 将 输出 标记 为 错误 。 

void group(any message...) 


与 jog0 方 法 一 样 显 示 message 消 轧 ， 但 将 它 显示 为 一 组 可 折 登 的 调 
试 消息 的 标题 。 接 下 来 所 有 的 控制 台 输 出 都 会 格式 化 为 这 个 组 的 一 部 








分 ， 直 到 一 个 对 应 的 groupEndO 被 调用 。 
void groupCollapsed(any message...) 


开始 一 组 新 的 消 有 息 ， 但 以 折合 状态 开始 ， 这 样 接 下 来 的 调试 输出 默 
认 都 将 隐藏。 


void groupEnd() 
结束 最 近 一 次 由 group0 或 groupCollapsedO 开 局 的 调试 信息 输出 组 。 
void info(any message...) 


类 似 于 console.log0， 但 将 输出 标记 为 信息 消息 。 





void log(string format,any message...) 


这 个 方法 将 它 的 参数 显示 在 控制 台中 。 在 最 简单 的 情况 下 ， 参 数 
format 不 含有 字符 %， 这 个 方法 将 简单 地 把 所 有 参数 转换 为 字符 串 ， 以 
空格 作为 间隔 ， 并 显示 它们 。 如 果 传 入 的 是 一 个 对 象 ， 显 示 在 控制 台中 
的 字符 串 将 是 可 单 击 的 ， 单 击 之 后 可 以 看 到 对 象 的 内 容 。 


对 更 复杂 的 日 志 消 息 来 说 ， 这 个 方法 支持 C 语 言 printf() 的 格式 化 功 
能 的 一 个 简单 子 集 。 参 数 message 将 插入 参数 format 中 
的 "%s"、"%d"、"%I"、"%f" 及 "%o" 等 位 置 ， 格 式 化 后 的 字符 串 将 在 控 
制 台 中 显示 (后 面 跟着 所 有 其 他 没 用 到 的 message 参 数 ) 。 蔡 换 "%s" 的 
参数 将 格式 化 为 字符 串 ， 替 换 "%d" 或 "%I" 的 将 格式 化 为 整数 ， 蔡 
换 "%f" 的 将 格式 化 为 浮 点 数 ， 蔡 换 "%o" 的 将 格式 化 为 可 单 击 的 对 象 。 





void profle([string title]) 

局 动 JavaScript 分 析 器 ， 在 报告 的 开始 处 显示 标题 title。 
void profleEnd() 

停止 分 析 器 ， 显 示 代 人 码 分 析 报 告 。 


void time(string name) 


以 指定 的 name 开 始 一 个 计时 器 。 
void timeEnd(string name) 


RL 显示 名 字 及 自 对 应 的 tme0 调 用 以 来 过 去 
时间。 








void trace() 

显示 一 个 栈 退 踪 。 

void warn(any message...) 

类 似 于 console.log0， 但 将 输出 标记 为 警告 。 
ConsoleCommandLine 

控制 台 窗 口 的 全 局 工具 

大 多 数 Web 浏 览 器 都 支持 JavaScript 控 制 台 《〈 可 能 名 为 "Developer 
Tools" 或 "Web Inspector") ， 人 允许 输入 单独 的 几 行 JavaScript 代 人 码 。 除 客 
户 端 JavaScript 所 文 持 的 普通 的 全 局 变量 及 方法 外 ， 控 制 台 命令 行 通常 也 
文 持 下 面 提 到 的 几 种 有 用 的 属性 及 方法 。 也 可 以 参考 Console API。 

属性 

readonly Element$0 


最 近 由 调试 器 的 其 他 功能 选中 的 文档 元 素 。 





readonly Element$1 
在 $0 之 前 选中 的 文档 元 素 。 
方法 


void cd(Window frame) 


当 一 个 文档 包含 区 套 的 框架 页 面 时 ，cd() 函 数 人 允许 切 换 全 局 对 象 并 


在 指定 的 frame 的 作用 域 中 执行 接 下 来 的 命令 。 
void clear() 
清空 当前 控制 台 窗 口 。 
void dir(object o) 
显示 o 的 属性 或 元 素 ， 类 似 Console.dir()。 
void dirxml(Element elt) 
以 XML 或 HTML 方 式 重新 显示 elt， 类 似 Console.dirxml()。 
Element$(string id) 
document.getElementBy1d() 的 简写 。 
NodeList$$(string selector) 
返回 一 个 包含 所 有 匹配 指定 的 CSS 选 择 器 selector 的 元 素 的 类 数组 对 


象 。 这 是 document.querySelectorAll(0 的 一 个 人 简写。 在 有 些 控制 台中 ， 这 
个 方法 返回 一 个 真 的 数组 ， 而 不 是 一 个 NodeList。 





void inspect(any object,[string tabname]) 


显示 对 象 object， 调 试 器 可 能 会 从 控制 台 切 换 到 另 一 个 标签 中 。 第 
二 个 参数 是 可 选 的 ， 定 义 你 希望 对 象 如 何 显示 ， 文 持 的 值 可 能 
有 "html"、"css"、"script" 以 及 "dom"。 

string[ lkeys(any object) 

以 数组 的 形式 返回 object 的 属性 名 。 


void monitorEvents(Element object, [string type]) 


记录 分 配给 object 的 指定 type 的 事件 。type 的 值 可 以 
为 "mouse"、"key"、"text"、"]load"、"form"、"drag" 以 及 "contextmenu"。 


如 果 type 省 略 ， 关 于 object 的 所 有 事件 都 将 记录 。 


void profle(string title) 

开始 代码 分 析 。 参 见 Console.profile()。 

void profleEnd() 

结束 分 析 。 参 见 Console.profileEnd()。 

void unmonitorEvents(Element object,[string type]) 

停止 监视 object 的 指定 type 的 事件 。 

any[jvalues(any object) 

以 数组 的 形式 返回 object 对 象 的 所 有 属性 的 值 。 
C992Properties 


参见 CSSStyleDeclaration 


CSSRule 
CSS 样 式 表 规 则 
说 明 


CSSRule 对 象 表示 一 个 CSSStyleSheet 中 的 一 条 规则 : 它 表示 应 用 到 
一 组 特定 文档 元 素 的 样式 信息 。selectorText 为 这 条 规则 的 元 素 选择 器 的 
字符 串 表 示 形 式 ，style 为 一 个 CSSStyleDeclaration 对 象 ， 表 示 应 用 到 选 
中 元 素 上 的 样式 属性 及 值 的 集合 。 


CSS 对 象 模型 说 明 实 际 上 定义 一 个 CSSRule 子 类 型 的 体系 ， 可 用 于 
表示 CSS 样 式 表 中 可 能 出 现 的 各 种 规则 。 这 儿 列 出 来 的 属性 是 普通 的 
CSSRule 类 型 及 其 CSSStyleRule 子 类 型 的 属性 。 样 式 规则 是 样式 表 中 最 
常见 也 最 重要 的 规则 ， 可 能 也 是 你 在 脚本 中 最 喜欢 使 用 的 规则 : 


在 IE8 及 更 老 的 版 本 中 ，CSSRule 对 象 只 支持 selectorText 及 style 属 
性 。 














tn 


常 
unsigned short STYLE_ RULE=1 
unsigned short IMPORT_RULE=3 
unsigned short MEDIA_RULE=4 
unsigned short FONT_FACE_ RULE=5 
unsigned short PAGE RULE=6 

unsigned short NAMESPACE_ RULE=10 


这 些 是 下 面 的 type 属 性 可 能 的 值 ， 它 们 定义 它 是 哪 类 规则 。 如 果 
type 的 值 不 是 1，CSSRule 对 象 将 有 这 儿 没 有 列 出 的 一 些 属性 。 


属性 





string cssText 

当前 CSS 规 则 的 完整 文本 。 

readonly CSSRule parentRule 
包含 当前 规则 的 规则 ， 如 果 存 在 的 话 。 
readonly CSSStyleSheet parentStyleSheet 
包含 当前 规则 的 样式 表 。 

string selectorText 


如 果 type 为 STYLE_RULE， 这 个 属性 的 值 为 一 个 选择 器 文本 ， 该 选 
择 器 指定 当前 规则 应 用 到 的 文档 元 素 。 


readonly CSSStyleDeclaration style 


如 有 果 type 为 STYLE_RULE， 这 个 属性 定义 应 用 到 selectorText 指 定 的 


元 素 上 的 样式 。 注 意 ， 虽 知 style 必 性 不 号 是 只 只 读 的 ， 但 
CSSStyleDeclaration 对 象 对 应 的 属性 是 可 读 写 的 。 








readonly unsigned short type 


当前 规则 的 类 型 。 值 可 以 为 上 面 定 义 的 常量 之 一 。 





CSSStyleDeclaration 
CSS 属 性 及 值 的 集合 


CSSStyleDeclaration 对 象 表示 一 个 CSS 样 式 属性 及 其 值 的 集合 ， 可 
以 通过 和 CSS 属 性 名 相似 的 JavaScript 属 性 名 来 查询 或 设置 这 些 样式 的 
值 。HTMLElement 的 style 属 性 是 一 个 可 读 写 的 CSS 风 格 声明 的 对 象 ， 
pd a 性 也 是 如 此 。 不 过 ，Window.getComputedStyle() 
的 返回 值 是 一 个 CSSStyleDeclaration 对 象 ， 其 属性 是 只 读 的 。 








CSSStyleDeclaration 对 象 使 得 CSS 样 式 属性 可 以 通过 JavaScript 属 性 
J 这 些 JavaScript 属 性 名 与 CSS 属 性 名 非常 接近 ， 只 有 一 些小 改 
变 ， 以 避免 JavaScript 中 的 语法 错误 。 由 连 字符 连接 的 多 单词 的 属性 ， 例 
如 ' ee family"， 在 JavaScript 中 将 没有 连 字 符 ， 同 时 除 第 一 个 词 外 每 个 
词 的 首 字母 大 写 : fontFamily。 男 外 ， 属 性 "float" 与 保留 词 float 冲 突 ， 所 
以 它 转变 为 属性 cssFloat。 注 意 ， 如 果 使 用 方 括号 及 字符 串 来 访问 属 
性 ， 可 以 使 用 未 修改 的 CSS 属 性 名 。 


属性 
除了 上 面 提 到 的 ，CSSStyleDeclaration 还 有 两 个 属性 : 








string cssText 


样式 属性 及 值 的 集合 的 文本 表现 形式 。 文 本 为 CSS 样 式 表 的 格式 ， 
但 没有 元 系 选 择 占 及 包围 着 属性 及 值 的 花 括 写 。 





readonly unsigned long length 


当前 CSSStyleDeclaration 包 含 的 属性 / 值 对 的 数 目 。 
CSSStyleDeclaration 对 象 也 是 一 个 类 数组 对 象 ， 它 的 元 素 为 声明 的 CSS 


样式 的 属性 值 。 
CSSStyleSheet 

CSS 样 式 表 

这 个 接口 表示 CSS 样 式 表 。 它 包含 香干 用 于 禁用 样式 表 或 得 询 、 插 
入 以 及 删除 CSSRule 样 式 规则 的 属性 及 方法 。 应 用 于 文档 的 
CSSStyleSheet 对 象 是 Document 对 象 的 styleSheets[] 数 组 的 成 员 ， 也 可 以 
通过 定义 或 链接 到 这 个 样式 表 的 二 style 二 或 过 link 二 元 素 的 sheet 属 性 来 
访问 。 


在 IE8 或 更 早 的 版 本 中 ， 使 用 rules[] 代 蔡 cssRules[]， 同 时 ， 使 用 
addRule(O 及 removeRule0 来 代 蔡 DOM 标 准 的 insertRuleO 及 deleteRule0)。 


属性 
readonly CSSRulel]cssRules 


一 个 只 读 的 类 数组 对 象 ， 维 护 组 成 样式 表 的 CSSRule 对 象 。 在 正中 
对 应 的 属性 为 rules。 


boolean disabled 


如 果 为 tue， 样 式 表 将 禁用 并 且 不 会 应 用 到 对 应 文档 中 。 如 果 为 
false， 样 式 表 将 局 用 并 会 应 用 到 文档 中 。 








readonly string href 


连接 到 当前 文档 的 样式 表 的 URL， 内 联 样 式 表 的 这 个 属性 值 为 


null。 


readonly string media 


这 个 样式 表 可 应 用 的 媒体 列表 。 可 以 像 处 理 一 个 单独 的 字符 串 一 样 
查询 或 设置 这 个 属性 ， 或 者 将 它 视 为 一 个 带 有 appendMedium() 和 
deleteMedium() 方 法 的 媒体 类 型 的 类 数组 对 象 。 (正式 一 点 说 ， 这 个 属 
性 的 值 为 一 个 MediaList 对 象 ， 但 本 参考 不 包含 这 个 类 型 。) 


readonly Node ownerNode 


“拥有 ”当前 样式 表 的 文档 元 素 ， 如 宋 不 存在 则 为 null。 参 见 Link 和 
Style。 





readonly CSSRule ownerRule 


引入 当前 样式 表 的 CSSRule〈 从 一 个 父 样式 表 中 ) ， 如 果 当 前 样式 
表 以 其 他 方式 引入 则 此 项 值 为 null。 (注意 ， 本 参考 中 的 CSSRule 条 目 
仅 用 文档 描述 样式 规则 ， 没 有 @import 规 则 。 ) 


readonly CSSStyleSheet parentStyleSheet 


引入 当前 样式 表 的 样式 表 ， 如 果 当 前 样式 表 直 接 包 含 在 文档 中 则 此 
属性 值 为 null。 





readonly string title 


样式 表 的 标题 ， 如 采 指 定 的 话 。 标 题 可 以 通过 当前 样式 表 对 应 的 去 
style 二 或 之 link 二 元 素 的 title 属 性 来 设置 。 


readonly string type 

样式 表 的 MIME 类 型 。CSS 样 式 表 的 类 型 为 "text/css"。 
方法 

void deleteRule(unsigned long index) 


本 方法 从 cssRule 数 组 中 删除 指定 index 的 规则 。 在 正 8 及 更 早 版 本 
相同 功能 的 方法 为 removeRule()。 


unsigned long insertRule(string rule,unsigned long index) 


本 方法 在 当前 样式 表 的 cssRule 数 组 指定 index 处 输入 《或 追加 ) 一 
条 新 的 CSS rule《〈 定 义 选 择 器 和 由 花 括号 包 着 的 样式 的 一 个 字符 串 ) 。 
在 IE8 及 更 早 版 本 中 ， 对 应 的 方法 为 addRule()， 该 方法 需 将 选择 器 及 格 
Sa 0 作为 两 个 独立 的 参数 传 入 ， 再 将 索引 作为 第 三 
斑 参 o 








DataTransfer 
通过 拖 放 传递 数据 


用 户 进 行 拖 放 操作 时 ， 拖 动 源 (drag  ， source) 或 放置 目标 (drop 
target) (或 两 者 上 省 有 ， 如 果 它 们 都 在 浏览 器 窗口 中 ) 将 触发 一 系列 事 
件 ， 这 些 事件 都 包含 其 dataTransfer 属 性 〈 参 见 Event) 指向 一 个 
DataTransfer 对 象 的 事件 对 象 。DataTransfer 对 象 是 所 有 拖 放 操作 的 中 心 
对 象 : 拖 动 源 将 要 传输 的 数据 存储 在 其 中 ， 放 置 目标 将 传输 的 数据 从 中 
取出 。 除 此 之 外 ，DataTransfer 对 象 还 管理 拖 动 源 与 放置 目标 之 间 的 一 
个 协商 ， 决 定 当 前 拖 放 是 一 次 复制 、 移 动 还 是 链接 操作 。 


这 儿 指 述 的 API 最 初 是 微软 为 正 创 建 的， 现在 其 他 浏览 器 也 多 少 实 
现 了 一 部 分 。HTML5 将 基本 的 正 API 作为 标准 。 在 本 书 准备 出 版 时 ， 
HTML5 定 义 了 API 的 一 个 新 版 本 ， 其 中 将 items 属 性 作为 
DataTransferItem 对 象 的 一 个 类 数组 对 象 。 这 个 API 很 吸引 人 也 很 合理 ， 
但 由 于 现在 还 没有 浏览 器 实现 它 ， 因 此 这 儿 没 有 描述 它们 的 文档 。 下 面 
是 在 当前 各 大 浏览 器 中 (基本 上 )〉 都 能 工作 的 特性 。 关 于 这 个 古怪 的 
API 的 更 多 讨论 可 参考 17.7 节 。 








属性 
string dropEffect 
这 个 属 性 定义 当 前 对 象 表 不 的 数据 传送 的 类 型 ， 它 的 值 必须 
为 "none"、"copy"、"move"、"copy" 或 "link" 之 一 。 一 般 情 况 下 ， 放 置 目 


标 会 agenterd roven 设置 这 个 属性 。 用 户 拖 上 忠 时 如 果 按 住 
了 辅助 键 也 可 能 影响 到 这 个 属性 的 值 ， 不 过 这 与 平台 有 关 。 





string effectAllowed 


这 个 属性 定义 了 当前 拖 放 操 作 允 许 的 复制 、 移 动 、 链 接 操作 的 组 
合 。 它 通常 由 拖 动 源 设置 并 啊 应 dragstart 事 件 。 允 许 的 值 
有 "none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"mo' 
及 "all"。 为 便于 记忆 ， 注 意 那 些 定义 两 个 操作 的 选项 ， 操 作 名 总 是 按 
字母 顺序 排序 。) 





readonly Filel Jfles 


如 全 正在 拖 动 的 数据 是 一 个 或 多 个 文件 ， 这 个 属性 将 设置 为 一 个 由 
文件 对 象 组 成 的 数组 或 类 数组 对 象 。 


readonly string[jtypes 


这 是 一 个 类 数组 对 象 字符 嘻 ， 指 定 当 前 DataTransfer 对 象 中 存储 的 
数据 〈 如 果 拖 动产 在 浏览 器 中 就 使 用 setData0， 如 果 在 浏览 器 之 外 就 使 
用 其 他 机 制 ) 的 MIME 类 型 。 保 存 这 些 类 型 的 类 数组 对 象 应 该 有 一 个 
contains() 方 法 ， 用 于 测试 一 个 特定 的 字符 串 是 否 存 在 。 有 些 浏览 器 仅 使 
这 个 对 象 是 一 个 真正 的 数组 ， 然 而 ， 在 这 样 的 情况 下 ， 也 可 以 使 用 
indexOfO 方 法 代 蔡 。 








方法 
void addElement(Element element) 


这 个 方法 告诉 浏览 器 在 生成 用 户 可 见 的 拖 动 视觉 效果 时 使 用 
element。 这 个 方法 一 般 由 拖 动 源 调 用 ， 在 有 些 浏览 器 中 它 可 能 没有 实现 
或 没有 效果 。 


void clearData([string format]) 
移 除 之 前 由 setData0 设 置 的 指定 format 的 数据 。 
string getData(string format) 


以 指定 的 format 返 回 传送 的 数据 。 如 果 format 为 〈 忽 略 大 小 写 
的 ) "text"， 则 使 用 "textplain" 代 苦 ， 如 果 为 《忽略 大 小 写 的 ) "url"， 则 
使 用 "texturl-list" 代 替 。 这 个 方法 在 拖 放 操 作 结 束 时 由 放置 目标 调用 ， 
以 响应 drop 事 件 。 





void setData(string format,string data) 


定义 要 传送 的 data 以 及 数据 的 MIME 类 型 format。 拖 动 源 在 拖 放 操作 
开始 时 调用 这 个 方法 ， 以 响应 dragstart 事 件 。 这 个 方法 不 能 从 任何 其 他 
事件 处 理 程序 调用 。 如 果 拖 动 源 的 数据 在 多 种 格式 下 可 用 ， 那 么 它 可 以 
多 次 调用 这 个 方法 ， 以 便 注册 每 一 种 支持 的 格式 的 值 。 


void setDragImage(Element image,1long x, Long y) 





这 个 方法 指定 一 个 image《〈 一 般 为 一 个 <img> 元 素 ) ， 用 于 在 拖 动 
时 向 用户 显 示 一 种 可 视 效果 。x 和 y 坐 标 给 定 图 片 相对 于 鼠标 指针 的 仿 移 
量 。 这 个 方法 只 能 被 拖 动 源 调 用 ， 以 啊 应 dragstart 事 件 。 


DataView 

从 ArrayBuffer 中 读 写 内 容 

ArrayBufferView 

DataView 是 包装 一 个 ArrayBuffer (或 ArrayBufferr 的 一 个 区 域 〉 的 
ArrayBufferView， 它 定义 读 或 瑟 对 应 缓冲 区 的 1、2 及 4 个 字 广 的 有 符号 
和 无 符号 整数 以 及 4 及 8 个 字 节 的 浮 点 数 的 方法 。 这 些 方法 同时 文 持 大 端 

(big-endian) 和 小 端 〈little-endian) 字 节 顺序 。 也 可 参考 TypedArray。 
构造 函数 

















new DataView(ArrayBuffer buffer, [unsigned long byteoffset], [unsigned Jlong 
byteLength]) 





这 个 构造 函数 创建 一 个 新 的 DataView 对 象 ， 人 允许 读 或 写 访问 buffer 
或 buffer 的 一 个 区 域 的 字 节 内 容 。 如 果 只 传 入 一 个 参数 ， 它 将 创建 整个 
绥 冲 区 的 视图 传 入 两 个 参数 ， 它 将 创建 绥 冲 区 的 从 字 市 数 byteOffset 
开始 直到 结尾 的 视图 ， 传 入 三 个 参数 时 ， 它 将 创建 一 个 从 byteOffset 开 
始 长 度 为 byteLength 字 节 的 视图 。 





方法 


这 些 方法 或 者 从 基础 的 ArrayBuffer 中 读 入 一 个 数值 ， 或 者 写 入 一 个 
数值 。 方 法 名 标 出 了 是 读 或 写 的 类 型 。 所 有 读 或 写 超过 一 个 字 节 的 方法 
都 接受 一 个 可 选 的 littleEndian 参 数 作为 最 后 一 个 参数 ， 如 果 这 个 参数 省 
略 或 者 为 false， 将 使 用 大 问 字 节 顺 序 (big-endian byte ordering) ， 优 先 
读 或 写 最 高 有 效 字 节 (most significant byte) 。 如 果 参 数值 为 tue， 将 使 
用 小 端 字 节 顺 序 (little-endian byte ordering) 。 




















float getFloat32(unsigned long byteOffset,[boolean littleEndian]) 

将 从 byteOffset 开 始 的 4 个 字 市 解释 为 一 个 浮 点 数 并 返回 这 个 数字 。 
double getFloat64(unsigned long byteOffset,[boolean littleEndian]) 
将 从 byteOffset 开 始 的 8 个 字 市 解释 为 一 个 浮 点 数 并 返回 这 个 数字 。 
short getInt16(unsigned long byteOffset,[boolean littleEndian]) 


将 从 byteOffset 开 始 的 两 个 字 节 解释 为 一 个 有 符 写 整数 并 返回 这 个 
数字 。 


long getInt32(unsigned long byteOffset,[boolean littleEndian]) 


将 从 byteOffset 开 始 的 4 个 字 节 解释 为 一 个 有 符号 整数 并 返回 这 个 数 


byte getInt8(unsigned long byteOffset) 
将 位 于 byteOffset 的 字 市 解释 为 一 个 有 符 写 整数 并 返回 这 个 数字 。 


unsigned short getUinti6(unsigned long byteOffset,[boolean 
littleEndian]) 


将 从 byteOffset 开 始 的 两 个 字 广 解释 为 一 个 无 符 写 整 数 并 返回 这 个 
数字 。 
unsigned long getUint32(unsigned long byteOffset,[boolean 
littleEndian]) 


将 从 byteOffset 处 开始 的 4 个 字 广 解释 为 一 个 无 符号 整数 并 返回 这 个 


数字 
unsigned byte getUint8(unsigned long byteOffset) 


将 位 于 byteOffset 处 的 字 节 解释 为 一 个 无 符 写 整数 并 返回 这 个 数 
0 


void setFloat32(unsigned long byteOffset,float value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 4 字 节 的 浮 点 数 并 将 对 应 字 节 在 byteOffset 位 置 写 
2 


void setFloat64(unsigned long byteOffset,double value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 8 字 节 的 浮 点 数 并 将 对 应 字 节 在 byteOffset 位 置 写 
void setInti6(unsigned long byteOffset,short value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 2 字 节 的 整数 并 将 对 应 字 节 在 byteOffset 位 置 写 
入 。 


void setInt32(unsigned long byteOffset,long value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 4 字 节 的 整数 并 将 对 应 字 节 在 byteOffset 位 置 写 


void setInt8(unsigned long byteOffset,byte value) 

将 value 转 换 为 一 个 1 字 节 的 整数 并 将 对 应 字 市 在 byteOffset 位 置 写 

void setUint16(unsigned long byteOffset,unsigned short value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 2 字 节 的 无 符 写 整数 并 将 对 应 字 市 在 byteOffset 位 
置 写 入 。 





void setUint32(unsigned long byteOffset,unsigned long value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 4 字 节 的 无 符 写 整数 并 将 对 应 字 市 在 byteOffset 位 





置 与 人 。 
void setUint8(unsigned long byteOffset,octet value) 


将 value 转 换 为 一 个 1 字 节 的 无 符号 整数 并 将 对 应 字 节 在 byteOffset 位 
2 





rag 


置 写 

Document 
HTML 或 XML 文档 
Node 


Document 对 象 是 文档 树 的 根 节 点 ，documentElement 属 性 是 文档 的 
根 元 素 。Document 节 点 可 以 有 其 他 子 节 点 (比如 Comment 及 
DocumentType 节 点 ) ， 不 过 它 只 有 一 个 保存 文档 所 有 内 容 的 Element 子 


NO 


大 多 数 情 况 下 获取 一 个 Document 对 象 的 方法 是 通过 窗口 的 document 
属性 。Document 对 象 也 可 以 通过 IFrame 元 素 的 contentDocument 属 性 或 任 
意 节点 的 ownerDocument 属 性 获取 。 


Document 对 象 的 大 多 数 属性 提供 了 对 文档 元 素 或 其 他 与 文档 相关 的 
重要 对 象 的 访问 ， 一 些 Document 方 法 做 同样 的 事 ; 提供 一 个 方法 在 文档 
树 许多 其 他 Docuemnt 方 法 是 创建 元 素 及 相关 对 象 的 “工厂 


和 包含 的 元 又 一 样 ， 文 档 也 可 以 是 事件 的 目标 对 象 。 它 实现 
EventTarget 定 义 的 方法 ， 也 文 持 不 少 事件 处 理 程序 属性 。 


可 以 使 用 DOMImplementation 的 createDocumentO 和 
createHTMLDocument() 方 法 来 生成 一 个 新 的 Document 对 象 : 





document.implementation.createHTMLDocument("New Doc"); 





也 可 以 从 网 络 上 下 载 一 个 HTML 或 XML 文件 并 将 它 解析 为 
Document 对 象 。 参 见 XMLHttpRequest 对 象 的 responseXML 属 性 。 


本 书 之 前 的 版 本 中 关于 HTMLDocument 的 参考 已 经 合并 到 这 儿 了 。 
注意 ， 这 儿 列 举 的 一 些 属性 、 方 法 及 事件 处 理 程 序 是 HTML 特 有 的 ， 在 
XML 文档 下 不 能 工作 。 


属性 

除 这 儿 列 出 的 属性 外 ， 也 可 以 使 用 <<iframe 之 、 雪 form> 及 <img> 
元 素 的 name 属 性 的 值 作为 文档 属性 ， 这 些 属性 的 值 是 对 应 名 字 的 元 素 

(CElement) 或 节点 列表 (NodeList) 。 但 是 ， 对 命名 的 二 iframe 放 元 素 

来 说 ， 这 个 属性 指 代 <<iframe>> 的 Window 对 象 。 细节 请 参考 15.2.2 节 。 

readonly Element activeElement 

当前 获得 键盘 焦点 的 文档 元 素 。 

Element body 


对 HTML 文档 来 说 ， 这 个 元 素 指 代 二 body 二 元 素 。 (对 定义 了 究 体 
集 的 元 素 ， 这 个 属性 指 代 的 是 最 外 层 的 过 frameset 盖 。 ) 


readonly string character9et 
当前 文档 的 字符 编码 。 
string charset 


当前 文档 的 字符 编码 。 它 和 character Set 类 似 ， 不 过 可 以 通过 设置 它 
来 改变 文档 编码 。 


readonly string compatMode 


知 归 文档 为 了 兼容 非 定 老 的 浏览 弗 ， 使 用 CSS“ 怪 异 模式 ”(guirks 
mode) 泻 染 ， 则 这 个 属性 的 值 为 字符 串 "BackCompat"。 在 其 他 情况 
$s 这 个 属性 值 为 "CSS1Compat"， 


string cookie 


这 个 属性 允许 读 、 新 建 、 修 改 或 删除 当前 文档 应 用 的 cookie。 
cookie 是 Web 浏 览 器 保存 的 少量 的 命名 数据 ， 它 让 浏览 器 有 了 “记忆 >”， 





这 样 浏览 器 就 能 在 一 个 页 面 输入 数据 并 在 男 一 个 页 面 使 用 ， 或 者 通过 
Web 浏 览 会 话 调 出 用 户 的 偏好 。cookie 数 据 在 适当 的 时 候 会 自动 在 Web 
浏览 器 与 Web 服 务 器 之 间 传 送 ， 这 样 服务 端的 脚本 整 可 以 读 写 cookie 的 
值 。 客 户 端的 JavaScript 代 码 也 可 以 通过 这 个 属性 来 读 写 cookie。 注 意 ， 
这 是 一 个 可 读 写 的 属性 ， 但 是 从 其 中 读 出 的 值 通 常情 况 下 与 写 的 值 并 不 
完全 一 样 。 细 节 请 参考 20.2 市 。 





readonly string defaultCharset 
浏览 器 的 默认 字符 集 。 


readonly Window defaultView 





Web 浏 览 器 在 当前 文档 中 显示 的 Window 对 象 。 
string designMode 


如 果 这 个 属性 值 为 "on"， 整 个 文档 是 可 编辑 的 ， 如 果 它 的 值 
为 "off"， 整 个 文档 将 不 可 编辑 。 不过， 设置 了 contenteditable 属 性 的 元 
系 当 然 还 可 能 是 可 编辑 的 。) 参见 15.10.4 市 。 





string dir 


对 HTML 文 档 而 言 ， 这 个 属性 是 天 html 之 元素 的 dir 属 性 的 映射 。 因 
此 ， 它 和 documentElement.dir 是 一 样 的 。 





readonly DocumentType doctype 
DocumentType 节 点 ， 表 示 文 档 的 本 !DOCTYPE>> 。 
readonly Element documentElement 


文档 的 根 元 素 。 对 HIML 文 档 而 言 ， 这 个 属性 总 是 表示 过 html> 标 
签 的 那个 Element 对 象 。 这 个 根 元 素 也 可 以 通过 自 Node 继 承 的 
childNodes[] 数 组 获得 ， 不 过 一 般 它 不 是 这 个 数组 的 第 一 个 元 素 。 也 可 
参考 body 属 性 。 





string domain 


当前 文档 所 在 服务 器 的 主机 名 〈hostname) ， 如 果 没 有 对 应 主机 则 
为 null。 可 以 将 这 个 属性 设置 为 它 自 己 的 域名 后 缀 以 放宽 同 源 限制 ， 并 
从 获得 访问 相关 域名 下 的 文档 的 权限 。 细 节 请 参考 13.6.2 市 。 

readonly HTMLCollection embeds 

文档 中 的 和 embed 之 元 和 际 组 成 的 类 数组 对 象 。 

readonly HIMLCollection forms 

文档 中 的 Form 元 素 组 成 的 类 数组 对 象 。 

readonly Element head 

对 HTML 文档 而 言 ， 这 个 属性 对 应 <<head 之 元 系 。 

readonly HTMLCollection images 

文档 中 所 有 Image 元 系 组 成 的 类 数组 对 象 。 

readonly DOMImplementation implementation 

当前 文档 的 DOMImplementation 对 象 。 

readonly string lastModifed 


定义 当前 文档 最 近 修 改 的 时 间 和 日 期 。 这 个 值 来 自 Web 服 务 器 可 选 
择 性 发 送 的 Last-Modified 头 。 


readonly HIMLCollection links 


文档 中 所 有 超 链接 组 成 的 类 数组 对 象 。 这 个 HTMLCollection 包 含 所 
有 和 带 href 属 性 的 二 a 二 和 二 area 二 元 素 ， 但 不 包 售 二 link 过 元素。 参见 
Link。 





readonly Location location 


Window.location 的 同义词 。 


readonly HIMLCollection plugins 
embdes 属 性 的 同义词 。 
readonly string readyState 


如 果 文 档 仍 在 加 载 中 ， 这 个 属性 值 为 字符 串 "loading"; 如 果 文 档 已 
经 完全 加 载 完 成 ， 则 值 为 "complete"。 当 它 的 属性 改变 为 "complete" 时 ， 
浏览 器 会 在 Document 上 触发 一 个 readystatechange 事 件 。 





readonly string referrer 


链接 到 本 文档 的 文档 的 URL， 如 果 当 前 文档 不 是 通过 超 链接 访问 
的 ， 或 者 如 果 Web 服 务 器 没有 报告 来 源 页 面 ， 则 此 属性 值 为 null。 这 个 
属性 允许 客户 问 JavaScript 访 问 HITP referer 头 信息 。 注 意 拼写 的 不 同 : 
HTTP 头 信息 有 3 个 r， 而 JavaScript 属 性 有 4 个 r。 











readonly HTMLGCollection Scripts 
文档 中 所 有 和 script 之 元 素 组 成 的 类 数组 对 象 。 
readonly CSSStyleSheet[ |styleSheets 


表示 所 有 骨 入 或 连接 到 文档 中 的 样式 表 对 象 的 集合 。 在 HTML 文 档 
中 ， 它 包含 由 <link> 和 <style 之 标签 定义 的 样式 表 。 


string title 


当前 文档 的 <title 二 标签 的 纯 文本 内 容 。 


readonly string URL 
当前 文档 加 载 和 目的 URL。 这 个 值 经 常 与 location.href 属 性 的 值 一 样 ， 
不 过 ， 如 果 一 段 脚本 改变 了 厂 断 标识 符 fragment identifier ) 


(location.hash 属 性 ) ，location 属 性 和 URE 属 性 就 可 能 不 再 指 代 同一 个 
URL 了 。 不 要 混淆 Document.URL 和 Window.URL。 


方法 


Node adoptNode(Node node) 


这 个 方法 将 node 从 它 目 前 所 在 的 任何 文档 中 移 除 ， 将 它 的 
ownerDocument 属 性 改 为 当前 文档 ， 并 确保 它 已 做 好 插入 当前 文档 的 准 
备 。 与 之 对 照 ，importNode0O 从 另 一 个 文档 中 复制 节点 但 不 删除 它 。 





void close() 


关闭 由 open(0) 方 法 打开 的 文档 流 ， 强 制 显示 所 有 缓存 的 输出 。 





Comment createComment(string data) 

根据 指定 的 内 容 ， 创 建 并 返回 一 个 新 的 Comment 节 点 。 
DocumentFragment createDocumentFragment() 

创建 并 返回 一 个 新 的 空 DocumentFragment 节 点 。 
Element createElement(string local Name) 


根据 指定 标签 名 ， 创 建 并 返回 一 个 新 的 空 Element 节 点 。 在 HIML 文 
档 中 ， 标 签名 会 转化 为 大 写 。 


Element createElementNS(string namespace,string qualifedName) 


创建 并 返回 一 个 新 的 空 Element 节 点 。 第 一 个 参数 指定 元 素 的 命名 
空间 URI， 第 二 个 参数 指定 命名 空间 前 缓和 元 素 的 标签 名 ， 中 间 用 去 号 
隔 开 。 








Event createEvent(string eventInterface) 


创建 并 返回 一 个 未 初始 化 的 合成 Event 对 象 。 该 参数 必须 指定 事件 
的 类 型 ， 值 应 该 为 一 个 类 
似 "Event"、"UIEvent"、"MouseEvent"、"MessageEvent" 之 类 的 字符 串 。 
创建 Event 对 象 之 后 ， 可 以 对 它 调用 一 个 合适 的 事件 初始 化 方法 来 初始 
化 它 的 只 读 属性 ， 这 些 方 法 有 initEvent()、initUIEvent()、 
initMouseEvent() 和 等。 大 多 数 特定 于 事件 的 初始 方法 本 书 都 没有 涉及 ， 不 
过 最 简单 的 一 个 可 以 参考 Event.initEvent()。 创 建 并 初始 化 一 个 合成 事件 
对 象 后 ， 就 可 以 使 用 EventTarget 的 dispatchEvent() 方 法 来 分 发 它 。 合 成 





事件 总 是 有 一 个 值 为 false 的 isTrusted 属 性 。 


ProcessingInstruction createProcessingInstruction(string target,string 
data) 


根据 指定 的 目标 和 数据 字符 串 ， 创 建 并 返回 一 个 新 的 


ProcessingInstruction 节 点 。 
Text createTextNode(string data) 
创建 并 返回 一 个 代表 指定 文本 的 新 的 Text 点 。 


Element elementFromPoint(float x,float y) 





返回 在 窗口 坐标 (x,y) 处 租 套 最 深 的 Element。 


boolean execCommand(string commandId,[boolean showUl,[string 
value]]) 


在 插入 光标 所 在 的 可 编辑 元 素 上 执行 参数 commandId 指 定名 字 的 纺 
辑 命令 。HTML5 定 义 了 下 面 这 些 命令 : 


bold insertLineBreak selectAll 
createLink insertOrderedList subscript 
delete insertUnorderedlist superscript 
formatBlock insertParagraph undo 
forwardDelete insertText unlink 
insertImage italic unselect 
insertHTML redo 

有 一 些 方法 (比如 "createLink") 需要 一 个 参数 值 。 如 果 


execCommand() 的 第 二 个 参数 值 为 false， I 第 三 个 参数 将 用 做 命令 的 参 
数 ， 否 则 ， 浏 览 器 会 弹出 提示 框 让 用 户 输入 需要 的 值 。 更 多 关于 
execCommand() 的 内 容 请 参考 15.10.4 市 。 


Element getElementByld(string elementId) 





这 个 方法 在 当前 文档 中 搜索 id 属性 值 为 elementId 的 Element 节 点 ， 并 
返回 这 个 Element， 如 果 没 有 找到 对 应 的 Element， 它 将 返回 null。 在 一 
个 文档 中 ，id 属 性 的 值 应 该 是 唯一 的 ， 不 过 如 果 这 个 方法 找到 了 多 个 id 
为 elementId 的 元 素 ， 它 将 返回 第 一 个 。 这 个 方法 很 重要 并 且 很 常用 ， 
为 它 提 供 了 一 个 简单 的 方法 来 获取 代表 一 个 指定 文档 元 素 的 Element 对 
象 。 注 意 这 个 方法 的 名 字 以 "Id" 结 尾 ， 而 不 是 "ID"。 











NodeList getElementsByClassNamel(string classNames) 


返回 一 个 类 数组 对 象 ， 其 中 的 元 素 的 class 属 性 值 包含 所 有 
classNames 定 义 的 类 。classNames 可 以 是 一 个 单独 的 类 ， 也 可 以 是 由 空 
格 分 隔 的 多 个 类 的 列表 。 返 回 的 NodeList 对 象 是 实时 的 ， 文档 改变 后 会 
目 动 更 新 。 返回 的 NodeList 中 的 元 素 的 顺序 与 文档 中 它们 出 现 的 顺序 相 
同 。 注 意 这 个 方法 在 Element 中 也 定义 了 。 





NodeList getElementsByName(string elementName) 


这 个 方法 返回 一 个 实时 的 、 只 读 的 类 数组 对 象 ， 包 含 所 有 name 属 性 
值 为 elementName 的 元 素 。 如 果 没 有 匹配 元 素 ， 这 个 方法 返回 一 个 length 
为 0 的 NodeList。 


NodeList getElementsByTagName(string qualifedName) 


这 个 方法 返回 一 个 只 读 的 类 数组 对 象 ， 包 含 文档 中 有 指定 标签 名 的 
所 有 Element 节 点 ， 顺 序 与 它们 在 文档 源 代码 中 出 现 的 顺序 相同 。 这 个 
NodeList 是 “ 实 2 文档 改变 时 ， 如 果 有 必要 ， 它 的 内 容 会 目 动 更 
新 。 对 HTMI 来 说 ， 标签 名 是 不 区 分 大 小 写 的 。 一 个 特例 是 ， 标 签 
名 “#*>” 匹 配 文档 中 的 所 有 元 素 。 


本 注意 Element 接 口 定 义 了 一 个 同名 的 方法 ， 该 方法 仅 搜索 文档 的 子 
对 。 


NodeList getElementsByTagNameNS(string namespace,string 
localName) 





























x 这 个 方法 类 似 于 getElementsByTagName()， 但 它 将 取得 的 标签 名 定 
义 为 命名 空间 URI 和 命名 空间 中 的 本 地 名 称 的 组 合 。 


boolean hasFocus() 


如 果 当 前 文档 的 Window 拥 有 键盘 焦点 (如 果 这 个 窗口 不 是 顶层 窗 
口 ， 则 它 的 所 有 祖先 都 拥有 焦点 ) ， 这 个 方法 返回 true。 





Node importNode( Node node,boolean deep) 


这 个 方法 传 入 一 个 由 其 他 文档 定义 的 节点 ， 并 返回 这 个 而 点 的 一 份 
适合 插入 当前 文档 的 副本 。 如 果 deep 值 为 tue， 这 个 节点 的 所 有 子 节 点 
都 将 复制 。 原 始 节 点 和 和 它 的 依赖 节点 不 会 有 任何 修改 。 返 回 的 副本 的 
ownerDocument 属 性 被 设置 为 当前 文档 ， 但 parentNode 属 性 为 null， 因 为 
它 还 没有 插入 到 当前 文档 中 。 注 册 到 原始 节点 或 节点 树 上 的 事件 监 昕 函 
数 不 会 复制 。 也 可 参考 adoptNode()。 











Window open(string url,string name,string features,[boolean replace]) 


当 文 档 的 open() 方 法 以 三 个 或 更 多 参数 调用 时 ， 它 的 表现 和 Window 
对 象 的 open() 方 法 一 样 。 可 参考 Window。 


Document open([string typej],[string replace]) 


只 有 两 个 或 更 少 的 参数 时 ， 这 个 方法 将 擦 除 当前 文档 并 开始 一 个 新 
的 《使 用 现存 的 那个 Document 对 象 ， 这 也 是 这 个 方法 的 返回 值 ) 。 调 用 
open(0 之 后 ， 束 可 以 使 用 write0 和 writeln0) 方 法 将 内 容 以 流 的 形式 写 到 文 
档 中 ， 然 后 使 用 closeO) 来 结束 文档 并 强制 显示 它 的 新 内 容 。 细 节 请 参考 
15.10.2 节 。 


如 果 type 省 略 或 值 为 "text/html"， 新 的 文档 将 是 一 个 HTML 文 档 ， 在 
其 他 情况 下 ， 它 将 是 一 个 纯 文本 文档 。 如 果 参 数 replace 为 tue， 新 文档 
将 在 浏览 历史 中 取代 旧 文 档 。 


这 个 方法 不 应 该 由 正 要 重 写 的 文档 中 的 脚本 或 事件 处 理 程序 调用 ， 
因为 这 个 脚本 或 处 理 程序 目 身 将 被 重 写 。 





boolean queryCommandEnabled(string commandId) 


如 果 现 在 传 入 commandId 到 execCommand0 中 是 有 意义 的 ， 这 个 方 
法 将 返回 true; 否则 返回 false。 比 如 ， 如 果 没 有 操作 可 以 撤销 ， 那 
么 "undo" 命 令 将 不 可 用 。 参 见 15.10.4 节 。 


boolean queryCommandIndeterm(string commandId) 


如 果 由 于 gueryCommandState() 不 能 返回 一 个 有 意义 的 值 ， 因 此 
commandId 处 于 一 个 不 确定 的 状态 ， 则 返回 trtue。HTML5 定 义 的 命令 水 
远 不 会 处 于 不 确定 状态 ， 但 特定 于 浏览 器 的 命令 可 能 会 。 参 见 15.10.4 
a 





boolean queryCommandState(string commandId ) 


返回 指定 commandId 的 状态 。 如 果 光 标 或 选区 正 处 于 斜体 中 ， 则 一 
些 编辑 命令 〈 比 如 "bold" 和 "italic") 有 状态 true; 否则 为 false。 不 过 ， 大 
多 数 命 令 没 有 状态 ， 这 些 方法 总 是 返回 false。 参 见 15.10.4 节 。 





boolean queryCommandSupported(string commandId) 


如 果 浏 览 器 支持 指定 的 命令 则 返回 true; 否则 返回 false。 参 见 
15.10.4 节 。 


string queryCommandValue(string commandId) 
将 指定 命令 的 状态 作为 字符 串 返 回 。 参 见 15.10.4 市 。 
Element querySelector(string selectors) 


返回 当前 文档 中 匹配 指定 的 CSS selector (可 能 是 一 个 单独 的 CSS 选 
择 占 或 者 一 组 由 逗 写 隔 开 的 选择 器 的 第 一 个 元 素 。 


NodeList querySelectorAll(string selectors) 


返回 包含 当前 文档 中 匹配 指定 CSS selector( 可 能 是 一 个 单独 的 CSS 
选择 器 或 者 一 组 由 逗号 隅 开 的 选择 器 〉 的 所 有 元 素 的 类 数组 对 象 。 和 
getElementsByTagName0 及 相似 方法 返回 的 NodeList 不 同 ， 这 个 方法 返 
SS 它 只 是 调用 这 个 方法 时 匹配 元 素 的 一 张 静 态 
快照 。 


void write(String text...) 


这 个 方法 将 它 的 参数 追加 到 文档 中 。 可 以 在 文档 正在 加 载 时 调用 


它 ， 以 便 在 对 应 二 script 二 标签 的 位 置 插 入 内 容 ， 或 者 也 可 以 在 调用 
open() 方 法 后 使 用 它 。 细 节 参 见 15.10.2 节 。 


void writeln(string text...) 








这 个 方法 和 HTMLDocument.write() 很 像 ， 不 同 之 处 在 于 它 会 在 追加 
的 文本 后 面 添加 一 个 换行 符 。 比 如 ， 在 写 过 pre 二 标签 的 内 容 时 ， 这 个 
方法 可 能 会 有 用 。 


i 


浏览 器 不 常 直 接 在 Document 对 象 上 触发 事件 ， 不 过 Element 事 件 会 
冒 泡 到 包含 它们 的 Document 上 ， 因 此 ，Document 对 象 支持 所 有 Element 
中 列 出 的 事件 处 理 程序 属性 。 和 Element 一 样 ，Docuemnt 对 象 也 实现 
EventTarget 方 法 。 


浏览 器 确实 会 在 Document 对 象 上 触发 两 个 文档 就 绪 事 件 。 当 
readyState 属 性 改变 时 ， 浏 览 器 触发 readystatechange 事 件 ， 可 以 使 用 
onreadystatechange 属 性 注册 这 个 事件 的 处 理 程 序 。 当 文档 树 就 绪 《〈 但 在 
外 部 资源 下 载 完 之 前 ) 时 ， 浏 览 器 也 会 触发 一 个 DOMContentLoaded 事 
件 (参见 17.4 广 ) ， 但 是 注册 这 个 事件 只 能 用 EventTarget0 方 法 ， 因 为 
有 一 个 onDOMContentLoaded 属 性 。 








DocumentFragment 
相 邻 的 节点 及 它们 的 子 树 
Node 


DocumentFragment 接 口 表示 文档 的 一 个 部 分 或 一 个 碎片 ， 有 具体 一 点 
来 说 ， 它 是 由 相 邻 节点 以 及 每 个 节点 的 子孙 组 成 的 一 个 列表 ， 但 这 些 节 
点 没有 一 个 共同 的 父 节 点 。DocumentFragment 节 点 永远 不 会 是 某 个 文档 
树 的 一 部 分 ， 它 继承 的 parentNode 属 性 总 是 为 null。 不 过 ， 
DocumentFragment 节 点 展现 出 了 一 个 非常 有 用 的 性 质 : 把 一 个 
DocumentFragment 插 入 到 一 个 文档 树 时 ， 插 入 的 不 是 DocumentFragment 
节点 本 身 ， 而 是 这 个 DocumentFragment 的 每 一 个 子 节点 。 这 让 
DocumentFragment 可 以 用 做 临时 占 位 符 ， 先 将 希望 插入 的 节点 放 入 其 
中 ， 然 后 将 它们 一 次 性 地 插入 到 文档 中 。 





可 以 使 用 Document.createDocumentFragment() 来 创建 一 个 新 的 空 
DocumentFragment。 


可 以 在 DocumentFragment 中 使 用 querySelector0 和 querySelectorAll0 
来 搜索 元 素 ， 它 们 的 表现 和 Document 对 象 的 相同 方法 一 样 。 


a 

Element querySelector(string selectors) 

参见 Document.querySelector()。 

NodeList querySelectorAll(string selectors) 


参见 Document.querySelectorAll()。 


Documentlype 

文档 的 IDOCTYPE 二 声明 。 

Node 

这 个 不 常用 的 类 型 表示 文档 的 二 !DOCTYPE 过 声明。Document 的 
doctype 属 性 保存 该 文档 的 DocumentType 节 点 。DocumentType 节 点 是 不 
可 变 的 ， 无 法 对 其 进行 修改 。 

DocumentType 节 点 用 于 通过 DOMImplementation.createDocument() 
方法 创建 新 的 Document 对 象 。 可 以 使 用 
DOMImplementation.createDocumentTypeO 创 建新 的 DocumentType 对 
象 。 

属性 


readonly string name 


文档 类 型 的 名 称 。 这 个 标识 符 在 文档 开头 紧 跟着 <!IDOCTYPE >， 
和 文档 的 根 元 素 的 标签 名 相同 。 对 HTML 文档 而 言 ， 这 个 值 是 "html"。 





readonly string publicId 


DTD 的 公共 标识 从， 如 果 未 定义 则 为 空 字符 串 。 
readonly string SystemId 


DTD 的 系统 标识 符 ， 如 果 未 定义 则 为 空 字符 串 。 


DOMException 


Web API 抛 出 的 异常 


大 多 数 客 户 端 JavaScript API 在 需要 发 出 错误 信号 时 会 抛 出 


DOMException 对 象 。 这 个 对 象 的 code 和 name 属 性 提供 了 关于 这 个 错误 
的 更 多 信息 。 注 意 ，DOMException 可 能 会 在 读 或 写 一 个 对 象 的 属性 或 
调用 一 个 对 象 的 方法 时 抛 出 。 


似 ， 


DOMException 不 是 核心 JavaScript Error 类 型 的 子 类 ， 不 过 两 者 很 相 
一 些 浏览 器 包含 一 个 message 属 性 ， 以 便 让 它 与 Error 兼 容 。 


tn 


党 
Unsigned short INDEX_SIZE ERR=1 

unsigned short HIERARCHY REQUEST_ERR=3 

unsigned short WRONG DOCUMENT_ERR=4 

unsigned short INVALID_ CHARACTER ERR=5 

unsigned short NO_MODIFICATION ALLOWED_ ERR=7 
unsigned short NOT_FOUND_ERR=8 

unsigned short NOT_SUPPORTED_ERR=9 

unsigned short INVALID_STATE ERR=11 

unsigned short SYNTAX_ ERR=12 


unsigned short INVALID MODIFICATION_ ERR=13 


Unsigned short NAMESPACE_ERR=14 
unsigned short INVALID_ACCESS_ERR=15 
unsigned short TYPE_MISMATCH ERR=17 
unsigned short SECURITY_ERR=18 

unsigned short NETWORK_ERR=19 

unsigned short ABORT_ERR=20 

unsigned short URL _ MISMATCH ERR=21 
unsigned short QUOTA_ EXCEEDED ERR=22 
unsigned short TIMEOUT_ERR=23 

unsigned short DATA_CLONE ERR=25 


这 些 是 code 属 性 可 能 的 值 。 常 量 的 名 字 已 经 足以 说 明 抛 出 异常 的 大 
致 原因 。 


属性 

unsigned short code 

上 面 列 出 的 常量 值 中 的 一 个 ， 指 出 发 生 了 什么 类 型 的 异常 。 

string name 

指定 异常 类 型 的 名 字 。 上 面 列 出 的 常量 名 中 的 一 个 ， 字 符 串 形式 。 
DOMImplementation 

全 局 DOM 方 法 


DOMImplementation 对 象 定义 一 些 不 与 任何 特定 Document 对 象 相关 
的 “全 局 ”方法 ， 用 于 DOM 的 实现 。 可 通过 任何 Document 对 象 的 


implementation 属 性 获取 DOMImplementation 对 象 的 引用 。 
方法 


Document createDocument(string namespace,string 
qualifedName, DocumentType doctype) 


这 个 方法 创建 并 返回 一 个 新 的 XML Document 对 象 。 如 有 果 指 定 
quajlifiedName， 这 个 方法 将 以 它 为 名 字 创 建 一 个 根 节 点 ， 并 将 作为 其 
documentElement 添 加 到 文档 中 。 如 果 qualifeldName 包 含 一 个 命名 空间 
前 缀 和 一 个 去 号 ，namespace 将 作为 唯一 标识 命名 空间 的 URI。 如 果 参 数 
doctype 不 为 空 ， 则 当前 DocumentType 对 象 的 ownerDocument 属 性 将 设置 
为 这 个 新 创建 的 文档 ，DocumentType 节 点 将 添加 到 这 个 新 文档 中 。 





DocumentType createDocumentTypel(string 
qualifedName,publicId,systemId) 


这 个 方法 创建 并 返回 一 个 新 的 代表 <!IDOCTYPE> 声 明 的 
DocumentType 节 点 ， 可 将 这 个 节点 传 入 到 createDocument(0 方 法 中 。 


Document createHIMLDocument(string title) 


这 个 方法 创建 一 个 新 的 只 包含 基本 文档 树 结 构 以 及 指定 标题 的 
HTMLDocument 对 象 。 返 回 的 对 象 的 documentElement 属 性 为 一 个 二 html 
元素 ， 这 个 根 元 素 有 子 节 点 二 head 二 和 二 body 二 标签 ， 其 中 二 head 二 
元 素 有 一 个 <<title 盖 子 节 点 ，<title 盖 将 指定 的 title 字 符 串 作为 子 节 点 。 
DOMSettableTokenList 

带 可 设置 字符 串 值 的 记号 列表 


DOMTokenList 








DOMSettableTokenList 是 一 个 同样 带 有 value 属 性 的 
DOMTokenList， 可 以 通过 这 个 属性 一 次 性 设置 整个 记号 集 。 


Element 的 classList 属 性 是 一 个 DOMTokenList， 它 通过 className 属 
性 以 字符 串 的 形式 来 表现 记号 集 。 如 果 想 一 次 性 设置 所 有 的 classList 记 


号 ， 可 以 简单 地 将 className 必 性 设置 为 一 个 新 的 字符 串 。IEFrame 元 素 
的 sandbox 属 性 稍 有 不 同 ， 这 个 属性 以 及 相关 的 HTML 属 性 是 由 HTML5 
定义 的 ， 所 以 不 需要 一 个 老 字 符 串 表 示 和 一 个 新 的 DOMTokenList 表 
示 。 在 这 种 情况 下 ， 这 个 属性 简单 地 定义 为 一 个 
DOMSettableTokenList: 可 以 像 字 符 串 一 样 对 它 进 行 读 写 ， 也 可 以 使 用 
它 的 方法 并 将 它 作 为 记号 集 。Output 的 htmlFor 属 性 和 Video 的 audio 属 性 
也 都 是 DOMSettableTokenList。 


属性 





string value 


记号 集 的 字符 串 表 示 ， 以 空格 分 隔 。 可 通过 读 写 这 个 属性 来 处 理 这 
个 集合 ， 就 像 处 理 一 个 单独 的 字符 串 值 一 样 。 通 常 不 需要 显 式 地 使 用 这 
个 属性 ， 当 将 一 个 DOMSettableTokenList 用 做 一 个 字符 串 时 ， 返 回 的 就 
是 这 个 字符 串 的 值 。 如 果 对 一 个 DOMSettableTokenList 赋 值 ， 会 隐 含 地 
设置 这 个 属性 。 


DOMTokenList 
空格 隔 开 的 记号 集 


DOMTokenList 是 由 空格 分 隔 的 记号 字符 串 经 过 解析 后 的 表示 形 
式 ， 比 如 一 个 Element 的 className 属 性 。 如 同名 字 所 暗示 的 ， 
DOMTokenList 是 一 个 列表 ， 它 是 一 个 类 数组 对 象 ， 有 lenght 属 性 ， 也 可 
以 通过 索引 它 检索 特定 的 记号 。 但 更 重要 的 是 ， 它 定义 了 contains()、 
add()、remove() 以 及 toggle0) 方 法 ， 以 便 可 以 用 记号 集 的 方式 处 理 它 。 如 
果 将 DOMTokenList 像 字符 串 那样 用 ， 它 就 等 同 于 一 个 由 空格 分 隔 的 记 
号 组 成 的 字符 串 。 

在 支持 HTML5 中 Element 对 象 的 classList 属 性 的 浏览 器 中 ， 它 是 一 个 
DOMTokenList， 这 可 能 是 你 唯一 经 各 使 用 的 DOMTokenList。 也 可 参见 
DOMSettableTokenL ist。 


属性 

















readonly unsigned long length 


DOMTokenList 是 一 个 类 数组 对 象 ， 这 个 值 指定 它 包 含 多 少 个 不 重 
复 的 记号 。 


方法 

void add(string token) 

如 果 当 前 DOMTokenList 不 包含 token， 则 在 列表 的 尾部 添加 它 。 
boolean contains(string token) 

如 果 当 前 DOMTokenList 包 含 token 则 返回 true; 否则 返回 false。 
string item(unsigned long index) 


返回 指定 index 处 的 记号 ， 如 果 index 超 出 范围 则 返回 null。 也 可 以 不 
调用 这 个 方法 ， 直 接 对 DOMTokenList 取 索引 。 


void removel(string token) 

如 果 当 前 DOMTokenList 包 含 token， 就 移 除 它 ， 否 则 什么 也 不 做 。 

boolean toggle(string token) 

如 果 当 前 DOMTokenList 包 含 token， 就 移 除 它 ; 否则 添加 它 。 
Element 

文档 元 素 

Node、 EventTarget 


Element 对 象 表 示 HTML 或 XML 文 档 中 的 元 素 。tagName 属 性 定义 元 
素 的 标签 名 或 类 型 。 元 素 的 标准 HTML 属 性 可 以 通过 Element 对 象 的 
JavaScript 属 性 来 访问 。 所 有 属性 (包括 XML 属 性 和 非 标 准 HTML 属 
性 ) 也 可 以 通过 getAttribute() 和 setAttribute() 方 法 访问 。 元 素 内 容 可 以 通 
过 继承 自 Node 的 属性 访问 。 如 果 你 只 对 Element 对 象 之 间 的 关系 有 闪 
趣 ， 你 可 以 使 用 children、firstElementChild 或 nextElementSibling 及 相关 
的 属性 。 








从 文档 中 获取 Element 对 象 有 很 多 种 方法 。Document 对 和 象 的 
documentElement 属 性 指 代 该 文档 的 根 元 素 ， 比 如 HIML 文 档 的 html> 
元 素 。 对 HTML 文 档 来 说 ，head 和 body 属 性 很 相似 : 它们 指 代 文 档 的 去 
head 之 和 雪 body> 元 素 。 要 通过 唯一 的 id 属性 来 定位 一 个 特定 的 命名 元 
素 ， 可 以 使 用 Document.getElementById0。 如 同 15.2 节 介绍 过 的 ， 还 可 
以 通过 Document 及 Element 的 方法 ， 如 getElementsByTagName(O)、 
ee 以 及 querySelectorAl10， 来 获取 多 个 Element 对 
象 。 最 后 ， 可 以 通过 Document.createElement() 来 创建 新 的 可 插入 文档 的 
Element 对 象 。 


浏览 右 会 在 文档 元 素 上 触发 很 多 种 不 同 的 事件 ， 同 时 ，Element 对 
象 定义 了 很 多 事件 处 理 程序 属性 。 男 外 ，Element 对 象 还 定义 了 
EventTarget() 方 法 (参见 EventTarget) ， 可 用 于 添加 及 删除 事件 监听 
二 


本 书 之 前 的 版 本 中 关于 HTMLElement 的 参考 条 目 己 合并 到 本 节 中 。 
注意 ， 这 儿 讲 述 的 部 分 属性 、 方 法 以 及 事件 处 理 程序 是 HTML 特 有 的 ， 
不 能 在 XML 文档 的 元 素 上 工作 。 


属性 
除 这 儿 列 出 的 属性 外 ，HTML 元 素 的 HTML 属 性 也 可 以 通过 Element 


对 象 的 JavaScript 属 性 来 访问 。HTML 标 签 及 它们 合法 的 属性 列 在 本 参考 
条 目的 结尾 处 。 


readonly Attr[jattributes 


Attr 对 象 〈 代 表 当 前 元 素 的 HTML 或 XML 属性 ) 的 类 数组 对 象 。 不 
过 ，Element 对 象 通常 可 通过 JavaScript 属 性 来 访问 它 的 属性 ， 所 以 永远 
不 会 真 的 需要 用 到 这 个 attributes[] 数 组 。 





readonly unsigned long childElementCount 
当前 元 素 拥 有 的 子 元 素 《〈 非 子 节 点 ) 的 数目 。 
readonly HIMLCollection children 


由 当前 Element 的 子 Element 〈 不 包括 非 Element 子 元 素 ， 如 Text 和 





Comment 节 点 ) 组 成 的 类 数组 对 象 。 
readonly DOMTokenList classList 


元 素 的 类 属性 是 一 个 由 空格 分 隔 的 类 名 列表 。 本 属性 允许 访问 这 个 
列表 中 的 各 个 元 素 ， 同 时 定义 了 查询 、 添 加 、 删 除 以 及 切换 类 名 的 方 
法 。 细 节 请 参考 DOMTokenL ist。 


string className 


这 个 属性 代表 当前 元 素 的 class 属 性 。class 是 JavaScript 的 保留 字 ， 所 
以 JavaScript 属 性 用 className 来 代替 class。 注 意 ， 这 个 属性 名 有 点 误导 
性 ， 因 为 class 属 性 通常 包含 多 个 类 名 。 











readonly long clientHeight 


readonly long clientWidth 








如 果 当 前 元 素 是 根 元 素 (参见 document.documentElement) ， 这 两 
个 属性 将 返回 Window 的 尺寸 ， 它 们 是 除去 滚动 条 及 其 他 浏览 器 “ 包 
装 ”(chrome) 之 外 的 内 部 或 视 口 的 尺寸 。 在 其 他 情况 下 ， 这 两 个 属性 
返回 元 素 的 内 容 加 上 内 边 距 的 尺寸 。 





readonly long clientLeft 
readonly long clientTop 


这 两 个 属性 返回 元 素 的 左边 框 或 项 边框 的 边界 到 内 边 距 的 左边 框 或 
顶 边 界 之 间 的 距离 ， 单 位 为 像 系 。 一 般 情况 下 这 就 是 左边 框 或 项 边框 的 
宽度 ， 不 过 如 果 在 元 素 的 左 侧 或 项 部 有 深 动 条 的 话 ， 这 个 值 也 包含 对 应 


深 动 条 的 宽度 。 





CSSStyleDeclaration currentStyle 


这 个 正 专 有 属性 代表 应 用 到 当前 元 素 上 的 所 有 CSS 属 性 的 级 联 集 合 
(cascaded set) 。 在 下 8 及 更 早 版 本 中 ， 可 以 将 它 作 为 标签 的 
Window.getComputedStyle() 方 法 的 蔡 代 。 


readonly object dataset 


通过 为 名 称 以 "data-" 为 前 缀 的 属性 赋值 ， 可 以 把 任意 值 与 任何 
HTML 元 素 相关 联 这 个 dataset 属 性 是 元 素 的 数据 (data) 属性 的 集合 ， 
通过 这 个 属性 可 以 更 容易 地 设置 和 读 取 它们 。 


这 个 属性 值 的 行为 类 似 于 普通 的 JavaScript 对 象 。 这 个 对 象 的 每 一 个 
值 对 应 元 素 上 的 一 个 data 属 性 。 如 果 元 素 有 一 个 名 为 data-x 的 属性 ， 
dataset 对 象 就 会 有 一 个 名 为 x 的 属性 ， 并 且 dataset.x 的 值 和 
getAttribute("data-x") 的 值 相同 。 


查询 或 设置 dataset 对 象 的 属性 相当 于 查询 或 存储 这 个 元 素 对 应 的 
data 属 性 。 可 以 使 用 delete 操 作 符 来 删除 data 属 性 ， 也 可 以 使 用 for/in 循 环 
来 枚 举 data 属 性 。 


readonly Element frstElementChild 


这 个 属性 类 似 于 Node 的 firstChild 属 性 ， 但 它 忽 略 Text 及 Comment 节 
只 返回 Element。 


-> 


string id 
id 属性 的 值 。 同 一 个 文档 中 任意 两 个 元 素 的 id 值 都 应 该 不 同 。 
string innerHTML 


定义 当前 元 素 包含 的 HTML 或 XML 标签 的 一 个 可 读 写 的 字符 串 ， 不 
包括 当前 元 素 本 身 的 开始 及 结束 标签 。 查 询 这 个 属性 将 以 一 个 HTML 或 
XML 文 本 字符 串 的 形式 返回 当前 元 素 的 内 容 ， 设 置 这 个 属性 为 一 个 

HTML 到 XML 文本 字符 叫 ， 将 用 该 文本 的 解析 表 示 形式 莹 换 当 前 元 素 的 











readonly boolean isContentEditable 


如 果 当 前 元 素 可 编辑 ， 本 属性 将 为 tue; 否则 为 false。 如 果 一 个 元 
素 或 它 的 祖先 元 素 有 contenteditable 属 性 ， 或 者 包含 它 的 Document 指 定 
designMode 属 性 ， 则 这 个 元 素 可 能 是 可 编辑 的 。 








string lang 


lang 属 性 的 值 ， 这 个 属性 指定 当前 元 素 内 容 的 语言 编码 。 





readonly Element lastElementChild 


这 0 性 类 似 于 Node 的 lastChild 属 性 ， 不 过 它 忽 略 Text 和 Comment 
节点 ， 只 返回 Elements。 


readonly string localName 


当前 元 素 本 地 的 、 无 前 级 的 名 字 。 和 tagName 属 性 不 同 ， 如 果 存 在 
命名 空间 前 级 prefix 时 ，tagName 属 性 会 包含 这 个 前 级 (对 HTML 元 素 而 
言 还 会 转换 为 大 写 ) 。 


readonly string namespaceURI 


正式 定义 当前 元 素 的 命名 空间 的 URL， 可 以 为 null 或 者 一 段 类 似 
于 "http:/www.w3.org/1999/xhtml" 的 字符 串 。 





readonly Element nextElement9Sibling 


这 个 属性 类 似 于 Node 的 nextSibling 必 性， 不 过 它 忽略 Text 和 
Comment 节 点 ， 只 返回 Elements。 


readonly long offsetHeight 
readonly long offsetWidth 


当前 元 系 及 其 所 有 内 容 的 高 度 及 宽度 ， 单 位 为 像素 ， 包 括 元 素 的 
CSS 内 边 距 及 边框 ， 但 不 包括 外 边 距 。 





readonly long offsetLeft 


readonly long offsetTop 


当前 元 素 的 CSS 边 框 的 左上 角 相 对 于 它 的 offsetParent 容 器 元 素 的 X 
及 Y 坐 标 。 


readonly Element offsetParent 


指定 容 髓 元 素 ， offsetLeft 和 offsetTop 将 基于 这 个 容器 元 素 定 义 的 坐 
标 系 统 度量 。 对 大 多 数 元 素来 说 ，offsetParent 是 包含 它们 的 二 body> 元 





素 。 不 过 ， 如 果 一 个 元 素 在 一 个 动态 定位 的 元 素 中 ， 那 个 动态 定位 的 元 
系 将 是 offsetParent， 如 果 元 率 在 表格 中 ，<<td 之 、 芭 也 > 或 <table 之 元 
素 可 能 会 是 offsetParent。 人 参见 15.8.5 节 。 


string outerHT™ML 


定义 了 当前 元 素 及 其 子 元 素 的 HTML 或 XML 标 签 。 如 果 设 置 这 个 属 
性 的 值 为 一 个 字符 串 ， 这 个 元 素 〈 以 及 它 所 有 的 内 容 ) 将 被 新 值 解析 成 
的 HTML 或 XML 文档 碎片 蔡 代 。 


readonly string prefx 


当前 元 素 的 命名 空间 前 级 。 这 个 值 通 常 为 n ul， 除非 你 正在 处 理 一 
个 使 用 命名 空间 的 XML 文档 。 





readonly Element previousElementSibling 


这 个 属性 类 他 以 于 Node 的 previousSibling 属 性 ， 不 过 它 忽略 Text 和 
Comment 节 点 ， 只 返回 Elements。 


readonly long scrollHeight 
readonly long scrollWidth 


元 素 的 全 部 高 度 及 宽度 ， 单 位 为 像素 。 当 元 素 有 滚动 条 时 《比如 ， 
由 于 CSS 的 overflow 属 性 ) ， 这 两 个 属性 与 offsetHeight 和 offsetWidth 的 不 
同 在 于 ， 后 两 者 只 简单 地 返回 元 素 可 见 部 分 的 尺寸 。 











long scrollLeft 


long scrollTop 


当前 元 素 左 边缘 或 顶 边 缘 滚 过 的 像素 数 。 这 两 个 属性 只 对 带 滚动 条 
的 元 素 有 用 ， 比 如 CSS 属 性 overflow 设 置 为 auto 的 元 素 。 过 html> 元 素 
(参见 Document. documentElement) 的 这 两 个 属性 的 定义 为 文档 滚 过 部 
分 的 数量 。 注 意 ， 这 两 个 属性 没有 定义 <<iframe> 之 标签 中 滚 过 部 分 的 数 
量 。 可 以 通过 设置 这 两 个 属性 来 滚动 一 个 元 素 或 整个 文档 。 参 见 15.8.5 


二 上 





二 


readonly CSSStyleDeclaration style 


style 属 性 的 值 定 义 了 当前 元 素 的 内 联 CSS 样 式 。 注 意 ， 这 个 属性 的 
值 不 是 一 个 字 全 有 而 是 一 个 对 象 ， 其 属性 与 CSS 样 式 的 属性 一 致 并 且 
可 读 写 。 细 节 请 参考 CSSStyleDeclaration。 


readonly string tagName 


0 对 HTML 文 档 来 说 ， 无 论文 档 源 代码 中 标签 名 
的 大 小 写 情况 如 何 ， 总 是 返回 大 写 的 形式 ， 所 以 ， 一 个 二 p 二 元 素 的 
tagName 属 性 值 为 ' pv。 A 写 的 ， 返 回 的 标签 名 和 文档 
源 代 码 中 它 所 写 的 形式 完全 一 致 。 这 个 属性 与 继承 自 Node 接 口 的 
nodeName 属 性 的 值 相同 。 





string title 


当前 元 素 的 title 属 性 的 值 。 在 许多 浏览 右 中 ， 当 鼠标 指针 移 到 元 系 
上 时 ， 浏 览 器 会 以 工具 提示 的 方式 显示 这 个 属性 的 值 。 





方法 

void blur() 

这 个 方法 将 键盘 焦点 转移 到 当前 包含 Document 对 象 的 body 元 素 上 。 
void click() 








这 个 方法 在 当前 元 系 上 模拟 一 次 单 击 。 如 果 在 这 个 元 素 上 的 正 千 单 
击 会 引发 茶 个 事件 (比如 转 同 一 个 链接 ) ， 这 个 方法 也 会 让 对 应 事件 发 
在 其 他 情况 下 ， 调 用 这 个 方法 只 会 在 对 应 元 素 上 触发 一 个 单 击 事 


void focus() 
将 键盘 焦点 转移 到 当前 元 素 上 。 
string getAttribute(string qualifedName) 


getAttribute() 返 回 一 个 元 系 的 指定 名 字 的 属性 的 值 ， 如 果 对 应 名 字 


的 属性 不 存在 则 返回 null。 注 意 ，HTMLElement 对 象 为 每 一 个 标准 
HTMEL 属 性 定义 了 匹配 的 JavaScript 属 性 ， 所 以 在 处 理 HITML 文 档 时 ， 只 
有 在 查询 非 标准 属性 的 值 的 情况 下 才 需 要 用 到 这 个 方法 。 在 HTML 文 档 
中 ， 属 性 名 是 区 分 大 小 写 的 。 


在 XML 文 档 中 ， 无 法 直接 以 元 素 属 性 的 方式 来 获取 属性 值 ， 只 能 
通过 调用 这 个 方法 来 查找 。 对 使 用 命名 空间 的 XML 文档 来 说 ， 在 传 入 
这 个 方法 的 属性 名 中 要 包含 命名 空间 前 级 以 及 冒号 或 者 使 用 
getAttributeNS(O) 来 代 蔡 。 











string getAttributeNS(string namespace,string local Name) 


这 个 方法 和 getAttribute() 方 法 非常 类 似 ， 区 别 在 于 属性 被 分 为 命名 
空间 URI 以 及 命名 空间 下 的 本 地 名 字 的 组 合 。 


ClientRect getBoundingClientRect() 

返回 摘 述 当前 元 素 的 边框 的 ClientRect 对 象 。 
ClientRect[]getClientRects() 
返回 一 个 类 数组 对 象 ， 由 描述 了 当前 元 素 履 盖 的 一 个 或 多 个 窍 形 的 


ClientRects 组 成 。《〈 路 越 多 行 的 象 往往 需要 多 于 一 个 的 矩形 才能 
精确 地 描述 它们 在 窗口 中 的 区 域 。 





NodeList getElementsByClassNamel(string classNames) 


返回 一 个 由 子孙 元 素 组 成 的 类 数组 对 象 ， 每 个 元 素 的 class 属 性 都 包 
含 所 有 指定 的 classNames。classNames 可 以 是 一 个 单独 的 类 或 者 是 一 个 
由 空格 分 隔 的 类 列表 。 返 回 的 NodeList 是 实时 的 ， 会 随 着 文档 的 变化 自 
动 更 新 。 元 素 在 返回 的 NodeList 中 的 出 现 顺序 与 它们 在 文档 中 的 出 现 顺 
序 一 样 。 注 意 Document 也 定义 了 这 个 方法 。 








NodeList getElementsByTagName(string qualifedName) 


这 个 方法 过 历 当前 元 系 的 所 有 子孙 元 素 ， 返 回 一 个 由 具有 指定 标签 
名 的 Element 市 点 组 成 的 实时 的 类 数组 NodeList。 “元素 在 县 回 的 数组 中 的 
出 现 顺 序 与 它们 在 源 文档 中 的 出 现 顺 序 相同 。 








注意 Document 对 象 也 有 一 个 类 似 的 getElementsByTagName() 方 法 ， 
不 过 它 将 过 历 整个 文档， 而 不 仅仅 是 单个 元 素 的 子孙 。 


NodeList getElementsByTagNameNS(string namespace,string 
localName) 


这 个 方法 类 似 于 getElementsByTagName()， 不 同 的 是 它 查找 的 元 素 
由 一 个 命名 空间 URI 以 及 这 个 命名 空间 下 的 本 地 名 字 的 组 合 定 义 


boolean hasAttribute(string qualifedName) 


如 果 当 前 元 素 拥 有 指定 名 字 的 属性 ， 这 个 方法 返回 true; 否则 返回 
false。 在 HTML 文 档 中 ， 属 性 名 是 区 分 大 小 写 的 。 








boolean hasAttributeNS(string namespace,string localName) 


这 这 个 方法 闫 似 于 hasAttribute()， 不 同 之 处 是 属性 由 命名 空间 URI 以 
这 个 命名 空间 下 的 本 地 名 字 指 定 


void insertAdjacentHTML(string position,string text) 


这 个 方法 在 相对 于 当前 元 素 的 指定 position 处 插入 指定 的 HIML 标 签 
text。 人 参数 position 的 取 值 只 能 是 下 面 4 个 字符 串 之 一 : 





位 置 含义 

beforebegin 在 开始 标签 之 前 插入 文本 
afterend 在 关闭 标签 之 后 插入 文本 
afterbegin 在 开始 标签 之 后 插入 文本 
beforeend 在 结束 标签 之 前 插入 文本 


Element querySelector(string selectors) 


回 当 前 元 素 的 第 一 个 匹配 指定 CSS selectors (可 能 是 一 个 单独 的 





CSS 选 择 絮 或 者 一 组 由 如 号 分 隅 的 选择 占 〉 的 子孙 元 素 。 
NodeList querySelectorAll(string selectors) 


返回 当前 Element 的 所 有 匹配 指定 selectors (可 能 是 一 个 单独 的 CSS 
选择 器 或 者 一 组 由 逗号 分 隔 的 选择 右 〉 的 子孙 元 素 组 成 的 类 数组 对 象 。 
不 同 于 getElementsByTagName() 方 法 返回 的 NodeList， 这 个 方法 返回 的 
NodeList 不 是 实时 的 : 它 只 是 调用 这 个 方法 时 匹配 的 元 素 的 一 张 静 态 快 


H 昭 。 
void removeAttribute(string qualifedName) 
removeAttribute() 删 除 当 前 元 素 的 指定 名 字 的 属性 。 尝 试 移 除 不 存 


I 的 操作 会 自动 忽略 。 在 HTML 文 档 中 ， 属 性 名 是 区 分 大 小 写 
和。 





void removeAttributeNS(string namespace,string local Name) 


removeAttributeNS() 和 removeAttribute() 很 类 似 ， 不 同 之 处 是 移 除 的 
属性 由 命名 空间 URI 和 本 地 名 字 定 义 。 


void scrollIntoView([boolean top]) 


如 果 一 个 HIML 元 素 当前 在 窗口 中 不 可 见 ， 这 个 方法 将 滚动 文档 以 
便 将 它 显 示 出 来 。 参 数 top 可 选 ， 用 于 确定 元 系 应 该 定位 在 靠近 窗口 的 
顶部 还 是 底部 。 如 有 果 值 为 true 或 省 略 ， 浏 览 右 会 答 试 将 元 素 定 位 在 靠近 
顶部 的 地 方 。 如 果 值 为 false， 浏 览 器 会 答 试 将 元 素 定位 在 靠近 底部 的 地 
方 。 对 那些 可 接受 键盘 焦点 的 元 素来 说 ， 比 如 Input 元 素 ，focus() 方 法 会 
隐 性 地 执行 一 样 的 “滚动 到 显示 ?操作 。 也 可 参见 Window 的 scrollTo() 方 
去: 

















void setAttribute(string qualifedName,string value) 


这 个 方法 将 指定 属性 设置 为 指定 的 值 。 如 果 没 有 对 应 名 字 的 属性 ， 
将 新 创建 一 个 。 在 HTML 文 档 中 ， 在 设置 之 前 属性 名 会 先 转 为 小 写 。 注 
意 ，HTML 文 档 的 HTMLElement 对 象 为 所 有 标准 HTML 属 性 定义 了 相应 
的 JavaScript 属 性 ， 可 以 通过 这 些 属性 直接 设置 对 应 的 属性 值 。 也 就 是 
说 ， 只 有 在 设置 非 标 准 属性 时 才 需 要 使 用 这 个 方法 。 








void setAttributeNS(string namespace,string qualifedName,string value) 


这 个 方法 类 似 于 setAttribute()， 不 同 之 处 是 创建 或 设置 的 属性 由 命 
名 空间 URI、 命 名 空间 的 前 级 组 成 的 限定 名 、 冒 号 以 及 命名 空间 中 的 本 
地 名 字 定 义 。 


事件 处 理 程序 


代表 HTML 元 素 的 Element 对 象 定 义 相当 多 的 事件 处 理 程序 属性 。 将 
下 面 列 出 的 任意 一 个 属性 设置 为 一 个 函数 ， 那 个 函数 就 会 在 该 对 象 上 发 
生 (或 冒 泡 到 ) 特定 事件 时 被 调用 。 当 然 ， 也 可 以 使 用 EventTarget 定 义 
的 方法 来 注册 事件 处 理 程序 。 


大 多 数 事 件 从 文档 层次 结构 冒 泡 到 Document 节 点 ， 然 后 从 那儿 再 到 
Window 对 象 。 所 以 ， 这 儿 列 出 的 每 个 事件 处 理 程序 属性 在 Document 和 和 
Window 对 象 上 也 有 定义 。Window 对 象 有 不 少 专 有 的 事件 处 理 程序 ， 下 
面 表格 中 标 有 星 号 的 属性 在 Window 对 象 上 有 不 同 的 含义 。 由 于 历史 原 
因 ， 作 为 二 body 二 元 素 的 HTML 属 性 注册 的 事件 处 理 程序 会 注册 在 
Window 对 象 上 ， 这 意味 着 带 星 号 的 事件 处 理 程 序 属性 注册 在 二 body> 
元 素 上 时 会 和 它们 注册 在 其 他 元 素 上 时 的 含义 不 同 。 参 见 Window。 


这 儿 列 出 的 大 多 数 事件 只 会 在 特定 类 型 的 HTML 元 素 上 触发 ， 不 过 
由 于 这 些 事件 大 多 会 在 文档 树 中 向 上 冒 泡 ， 因 此 这 些 事件 处 理 程 序 属性 
一 般 是 为 所 有 元 素 定 义 的 。 在 HIML5 的 天 audio 之 和 雪 video 之 上 触发 的 
媒体 事件 不 会 冒 泡 ， 所 以 它们 在 MediaElement 条 目 中 归档 。 类 似 地 ， 一 
些 与 HIML5 表 单 相 关 的 事件 也 不 会 冒 泡 ， 这 些 事件 包含 在 FormControl 


条 目 中 。 























事件 处 理 程序 
onabort 
onblur* 


onchange 


onclick 
oncontextmenu 
ondblclick 
ondrag 
ondragend 


ondragenter 


触发 条 件 

在 用 户 的 要 求 下 停止 资源 下 载 

元 素 失去 输入 焦点 

用 户 改变 表单 控件 的 内 容 或 状态 (编辑 完成 时 触发 ， 而 不 是 在 每 一 次 
按键 时 触发 ) 

元 素 锌 恨 标 单 击 或 其 他 方式 激活 

上 下 文 菜单 即将 显示 ， 通 常 是 由 于 右 击 
发 生 两 次 快速 的 鼠标 单 击 

持续 拖 目 中 (在 拖 动 源 上 触发 ) 

拖 蝶 结束 (在 拖 动 源 上 触发 ) 

拖 目 进入 (在 放置 目标 上 触发 ) 


事件 处 理 程序 
ondragleave 
ondragover 
ondragstart 
ondrop 
ONerror* 
onfocus* 
oninput 
onkeydown 
onkeypress 
onkeyup 
onload* 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onmousewheel 
onreset 
onscroll* 
onselect 


onsubmit 


触发 条 件 

拖 电 离开 (在 放置 目标 上 触发 ) 
持续 拖 蝶 中 (在 拖 动 源 上 触发 ) 
用 户 开 始 拖 放 (在 拖 动 源 上 触发 ) 
用 户 完成 拖 放 (在 放置 目标 上 触发 ) 
资源 加 载 失败 (通常 是 由 于 网 络 错误 ) 
元 素 获得 键盘 焦点 

一 个 表单 元 素 上 发 生 了 输入 ( 比 onchange 触 发 得 更 频繁 ) 
用 户 按 下 一 个 键 

生成 一 个 可 打印 字符 的 按键 

用 户 释放 一 个 键 

资源 (比如 cimg>) 加 载 完成 

用 户 按 下 一 个 鼠标 按钮 

用 户 移动 鼠标 指针 

鼠标 指针 离开 某 个 元 素 

鼠标 指针 进入 某 个 元 素 

用 户 释放 一 个 鼠标 按键 

用 户 滚动 鼠标 滚轮 

表单 (<form>) 被 重 置 

带 有 滚动 条 的 元 素 被 滚动 

用 户 在 表单 元 素 中 选中 文本 

表单 (<form>) 被 提交 


HTML 元 素 及 属性 
这 一 部 分 包括 下 面 的 HTML 元 素 类 型 的 独立 参考 页 面 : 








元 素 参考 页 元素 参考 页 
《audi0》 Audio <output> Qutput 
¢button>, <input type= button 》Button <progress> Progress 
《CanVaS》 Canvas <script> Script 
<fieldset> FieldSet <select> Select 
《form》 Form ¢style> Style 
《iframey》 IFrame <td> TableCell 
元 素 参考 页 元 素 参考 页 
《ng》 Inage 《try TableRow 
《input》 Input © <tbody>、 <tfoot>、<thead> TableSection 
《]abe]》 Label 《tabley Table 
《3a>， 《area》 <link> Link 《textaTeay》 TextArea 
‘meter> Meter <video》 Video 
《optlon》 Option 


那些 所 有 属性 都 是 其 HTML 属 性 的 简单 映射 的 HTML 元 素 没 有 单独 
的 参考 页 面 ， 下 面 这 些 属 性 是 所 有 HTML 元素 都 有 的 合法 属性 ， 因 此 它 
们 也 是 所 有 Element 对 象 的 属性 : 





属性 


accesskey 
Class 
contentEditable 


contextMenu 


dir 
draggable 
dropzone 
hidden 

id 

lang 
spellcheck 
style 
tabIndex 
title 


描述 

键盘 快捷 刍 

CSS 类 ; 参见 上 面 的 className 和 classList 属 性 
元 素 内 容 是 否 可 编辑 

作为 上 下 文 菜单 显示 的 cmenu> 元 素 的 ID。 编 写本 书 时 这 个 属性 仅 由 
到 支持 

文本 方向 ，“ltr” 或 “rt 

拖 动 源 元 素 上 的 一 个 布尔 属性 ， 用 于 拖 放 ApI 
放置 目标 元 素 上 的 一 个 属性 ， 用 于 拖 放 API 

一 个 布尔 属性 ， 设 置 在 不 应 该 显示 的 元 素 上 
当前 元 素 的 唯一 标识 

当前 元 素 内 的 文本 的 主要 语言 

元 素 的 文本 是 否 有 拼写 检查 

当前 元 素 的 内 联 CSS 样 式 。 参 见 上 面 的 style 属 性 
定义 当前 元 素 的 焦点 顺序 

当前 元 素 的 工具 提示 文本 


下 面 的 HTML 元素 只 定义 上 面 这 些 公共 属性 : 


《abbry》 《C0dey》 
address> 《datalist》 
<article> 《dd》 
《35idey》 《dfn> 

《b》 《diV》 
《bdi》 《<dl> 
¢bdo> <dt> 
br> 《em》 


《footery》 
《h1》 
《h2》 
<h3> 
《h4》 


<h5> 
<h6> 


<head> 


<caption> <figcaption> 


《Citey》 figurey》 


《hgroup》 


<hr> 

《1》 
《kbd》 
《]egend》 


mark> 


《nav》 
noscript> 
‘p> 
《header》 


《ITp》 


《It》 《5up》 

<ruby> <tbody> 
《5S》 《tfoot》 
《Samp》 《thead》 


《Sectijion》 ‘title> 


<small> <tr) 
《Spany》 《 山 》 
<strong> 《VarIy》 
《prTe》 <sub> 
<summary> 


剩 下 的 HTML 元 素 以 及 它们 文 持 的 属性 见 下 面 的 表格 。 注 意 ， 这 个 
表格 只 列 出 了 除 上 面 的 公共 属性 外 的 属性 ， 同 时 别 筷 了 这 个 表格 也 包括 
那些 有 自己 的 参考 页 面 的 元 系 : 





元 素 
《3》 


《ared> 


¢audio> 


《basey》 


《blockquotey 


《body》 


《button> 


《CanvaS》 
《C0]》 
<colgroup> 
<command> 
‘<del> 
<details> 
《embed> 
《fieldset》 


<form> 


<html> 


Li1fTramey 


属性 
href、 target、 ping. rel media、 hreflang、 type 


dt ‘COOrds: media、 


hreflang、 type 


shape href、 target、 ping、 ITel、 


STC、 preload、 autoplay、 loop、 controls 
href、 target 
Cite 


onafterpTint、 onbeforeprint、 onbeforeunload、 onblur、 onerror. 
onfocus、 onhashchange、 onload、 onmessage、onoffline、 ononline、 


onpagehide、 onpageshow onpopstate、 onredo、 onresize, 
onscroll、 onstorage、 onundo、onunload 
autofocus disabled、 form formaction. formenctype、 


formmethod、 formnovalidate、 formtarget、 name、 type、value 
width、 height 

span 

span 

type、 label、 icon、disabled、 checked、 radiogroup 

Cite、 datetime 

open 

Src type、 Width、 height 

disabled、 form、 name 


accept-charset、 action、 autocomplete、 enctype、 method、 name、 
novalidate、 target 


manifest 


csSYr errdnr name «candhnx Seamless width hpioht 


元 素 


<input> 


<ins> 
<keygen> 
<label> 
<1i> 
<link> 
<map> 
<menu> 
<meta> 
<meter> 
<object> 
<01> 
<optgroup> 
<option> 
<output> 
<param> 
<progress> 
<q> 
<script> 
<select> 
《SOUICey> 
<style> 
<table> 
<td> 


<textarea> 


<th> 
<time> 
<track> 


<Video> 


属性 


accept、 alt、 autocomplete、 autofocus、 
disabled、 form、 formaction、 formenctype、 formmethod、 
formnovalidate、 formtarget、 height、 1ist、 max、 maxlength. 
min、 multiple、 name、 pattern、 placeholder、readonly、 required、 
size、 src step、 type、 value、 width 


checked、 dirname、 


cite、 datetime 

autofocus、 challenge、 disabled、 form、 keytype、 name 
form、 for 

value 

href、 rel、 media hreflang. type、 sizes 

name 

type、 label 

name、 http-equiv、 content、 charset 

value、 min、 max、 low、 high、 optimum、 form 
data、 type、 name、 usemap、 form、 width、 height 
reversed、 start 

disabled、 label 

disabljed、 label、 selected、 value 

for、 form. name 

name、 value 

value、 max、 form 

cite 

src async、 defer、 type、 charset 

autofocus、 disabled、 form、 multiple、 name、 required、 size 
src type、 media 

media、 type、 scoped 

summary 

colspan、 rowspan、 headers 


autofocus、 cols、 disabled、 form、 maxlength、 name、 placeholder、 
readonly、 required、 rows、 wrap 

colspan、 rowspan、 headers、 scope 

datetime、 pubdate 

default、 kind、 label、 SITC、 srclang 


STC、 poster. preload.、 autoplay、 loop、 controls、 width、 height 


ETITOTEVvent 
某 个 工作 线程 未 捕获 的 异常 
Event 


当 一 个 Worker 线 程 中 发 生 一 个 未 捕获 的 异常 ， 并 且 这 个 异常 在 
WorkerGlobalScope 中 没有 被 对 应 onerror 函 数 处 理 时 ， 这 个 异常 就 会 在 这 
个 Worker 对 象 上 触发 一 个 不 冒 泡 的 错误 事件 。 这 个 事件 有 一 个 关联 的 
ErrorEvent 对 象 ， 提 供 了 刚刚 发 生 的 异常 的 详情 。 在 ErrorEvent 对 象 上 调 
用 preventDefault() (或 从 事件 处 理 程序 上 返回 false〉 将 阻止 错误 问 包 含 
的 线程 进一步 传播 ， 也 可 能 会 阻止 它 在 错误 控制 台 显 示 。 


属性 








readonly string flename 

最 初 抛 出 异常 的 JavaScript 文 件 的 URL 。 

readonly unsigned long lineno 

文件 中 抛 出 异常 的 行 号 。 

readonly string message 

描述 该 异常 的 消 居 。 
Event 

标准 事件 、IE 事 件 以 及 jQuery 事件 的 细 市 

当 事 件 处 理 程序 被 调用 时 ， 一 个 Event 对 象 会 传 入 ， 该 对 象 的 属性 
给 出 事件 的 细 市 ， 比 如 事件 的 类 型 以 及 发 生 事件 的 元 素 。Event 对 象 的 
方法 可 以 控制 事件 的 传播 。 所 有 现代 浏览 器 都 实现 了 一 个 标准 事件 模 
型 ， 除 了 了 下 ， 正 8 及 更 早 的 版 本 定义 了 不 兼容 的 专 有 事件 模型 。 本 页 归 


档 标准 事件 模型 的 属性 和 方法 以 及 对 应 的 正方 案 ， 也 包括 jQuery 事件 对 
象 ， 后 者 在 了 上 上 模拟 一 个 标准 的 事件 对 象 。 关于 事件 的 更 多 信息 请 参 考 





第 17 章 ， 关 于 jQuery 事件 的 更 多 信息 请 参考 19.4 市 。 


在 标准 事件 模型 中 ,不同 种 类 的 事件 有 与 其 相关 联 的 不 同 的 事件 对 
象 : 比如 ， 鼠 标 事件 有 一 个 具有 鼠标 相关 属性 的 MouseEvent 对 象 ， 键 盘 
事件 有 一 个 具有 键盘 相关 属性 的 KeyEvent 对 象 。MouseEvent 和 KeyEvent 
共享 一 个 通用 的 Event 超 类 。 不 过 ， 在 正和 jQuery 事件 模型 中 ，Element 
对 象 上 发 生 的 所 有 事件 都 只 使 用 一 个 单独 的 Event 对 象 。 在 一 个 忌 标 事 
件 中 ，Event 对 象 的 与 键盘 事件 相关 的 属性 是 没有 意义 的 ， 但 这 些 属性 
仍然 会 定义 。 为 简单 起 见 ， 这 儿 合 并 了 事件 层次 结构 ， 对 所 有 可 被 分 发 
到 Element 对 象 〈 然 后 冒 泡 到 Document 和 Window 对 象 ) 的 事件 属性 编写 
了 文档 。 


本 来 ， 几 乎 所 有 客户 端 JavaScript 事 件 都 是 在 文档 元 素 上 触发 的 ， 也 
很 自然 地 应 该 把 文档 相关 的 事件 对 象 的 属性 合并 在 一 起 。 不 过 HTML5 
及 相关 的 标准 引入 了 一 些 新 的 事件 类 型 ， 这 些 事件 在 非 文 档 元 素 上 触 
发 。 这 些 事 件 类 型 经 常 具 有 自己 的 Event 类 型 ， 这 些 类 型 在 它们 自己 的 
参考 页 面 有 介绍 。 参 见 BeforeUnloadEvent、CloseEvent、ErrorEvent、 
HashChangeEvent、]MessageEvent、PageTIransitionPVent、 
PopStateEvent、ProgressEvent 以 及 StorageEvent。 


这 些 事件 对 象 类 型 中 的 大 多 数 都 扩展 了 Event。 其 他 新 的 HIML5 相 
关 的 事件 类 型 没有 定义 专 有 的 事件 对 象 类 型 与 这 些 事件 相关 的 对 象 
只 是 一 个 普通 的 Event 对 象 。 本 页 归档 这 个 “普通 ”Event 对 象 加 上 它 的 一 
些 子 类 型 的 属性 。 下 面市 星 写 的 属性 是 由 Event 类 型 自己 定义 的 ， 这 些 
属性 继承 目 MessageEvent 等 事件 类 型 ， 一 般 为 简单 的 、 普 通 的 事件 ， 如 
Window 对 象 的 load 事 件 和 MediaElement 对 象 的 播放 事件 定义 这 些 属 性 。 



































| 反 


些 常 量 定 义 eventPhase 属 性 的 值 。 正 事件 模型 不 支持 这 个 属性 以 
量 。 


unsigned short CAPTURING PHASE=1 
事件 正 分 发 给 它 的 目标 的 祖先 的 捕获 事件 处 理 程序 。 


unsigned short AT_TARGET=2 


事件 正在 它 的 目标 上 分 发 。 

unsigned short BUBBLING_PHASE=3 

事件 正在 冒 泡 ， 同 时 正在 它 的 目标 的 祖先 上 分 发 。 

属性 

这 儿 列 出 的 属性 是 由 标准 事件 模型 定义 的 ， 适 用 于 Event 对 象 ， 也 
适用 于 鼠标 及 键盘 相关 的 事件 对 象 。 这 儿 也 列 出 了 正 及 jQuery 事件 模型 


的 属性 。 带 星 号 的 属性 是 由 Event 直 接 定 义 的 ， 在 任何 标准 Event 对 象 上 
总 是 可 用 的 ， 无 论 这 个 事件 是 什么 类 型 。 








readonly boolean altKey 
事件 发 生 时 Alt 键 是 否 按 下 。 适 用 于 鼠标 、 键 盘 事 件 以 及 IE 事 件 。 
readonly boolean bubbles* 


如 果 事 件 会 冒 泡 〈 除 非 调用 stopPropagation0) 则 此 属性 为 tue; 人 否 
则 为 false。IE 事 件 未 定义 这 个 属性 。 





readonly unsigned short button 


在 一 个 mousedown、mouseup 或 click 事 件 中 ， 哪 个 鼠标 按键 改变 了 
状态 。 值 为 0 表示 左 键 ， 值 为 2 表示 右键 ， 值 为 1 表示 鼠标 的 中 键 。 注 
意 ， 这 个 属性 在 按键 改变 状态 时 定义 ， 所 以 ， 例 如 ， 不 可 用 于 报告 在 一 
个 mousemove 事 件 中 某 个 按键 是 否 一 直 按 下 。 同 时 ， 这 个 属性 也 不 是 一 
个 位 图 : 它 不 能 告诉 你 除 一 个 键 按 下 之 外 的 更 多 人 信息。 最后， 有些 浏 览 
器 只 生成 左 键 点 击 的 事件 。 


正事 件 定 义 一 个 不 兼容 的 button 属 性 。 在 正中 ， 这 个 属性 是 一 个 位 
掩 码 : 如 果 左 键 按 下 则 1 位 被 设置 ， 右 键 按 下 则 2 位 被 设置 ，( 三 键 鼠 标 
的 ) 中 键 按 下 则 4 位 被 设置 。jQuery 没 有 模拟 正 的 标准 button 属 性 ， 但 参 
考 了 which 属 性 。 























readonly boolean cancelable* 


如 果 事 件 的 默认 操作 可 以 用 preventDefault() 来 取消 则 为 tue; 否则 


为 false。 所 有 标准 事件 类 型 都 定义 了 这 个 属性 ， 除 了 I 下 事件。 
boolean cancelBubble 


在 下 事件 模型 中 ， 如 果 一 个 事件 处 理 程序 想 阻止 一 个 事件 向 上 冒 泡 
到 包含 它 的 对 象 ， 必 须 设置 这 个 属性 为 tue。 对 于 标准 事件 使 用 的 是 
stopPropagation()。 


readonly integer charCode 


适用 于 按键 事件 ， 这 个 属性 的 值 为 引发 事件 的 可 打印 字符 的 
Unicode 编 码 。 对 于 不 可 打印 的 功能 键 来 说 ， 这 个 属性 的 值 为 0， 同 时 ， 
这 个 属性 不 适用 于 keydown 和 keyup 事 件 。 可 以 使 用 
String.fromCharCode() 来 将 这 个 值 转 为 字符 。 在 大 多 数 浏 览 嚣 中， 发 生 
按键 事件 时 keyCode 的 值 和 这 个 属性 的 值 一 样 。 但 在 Firefox 中 ， 按 键 事 
件 没 有 定义 keyCode， 必 须 使 用 charCode。 这 个 事件 不 是 标准 事件 ， 在 
IE 事件 中 未 定义 ，jQuery 也 没有 对 其 进行 模拟 。 








readonly long clientX 


readonly long clientY 





鼠标 相对 于 客户 端 区 域 (client area) 或 浏览 器 窗口 的 X 及 Y 坐 标 。 
注意 ， 这 两 个 坐标 没有 包含 文档 滚动 条 滚动 的 值 ， 如 果 一 个 事件 在 窗口 
的 最 上 方 发 生 ， 无 论文 档 上 方 已 经 滚动 了 多 少 ，clientY 的 值 都 将 是 0。 
这 两 个 属性 适用 于 所 有 类 型 的 鼠标 事件 。 正 事件 和 标准 事件 中 都 定义 了 
这 两 个 属性 。 也 可 参考 pageX 和 pageY。 





readonly boolean ctrlKey 


Re 适用 于 鼠标 和 键盘 事件 ， 也 适用 于 下 


readonly EventTarget currentTarget* 


当前 正在 处 理 这 个 事件 的 Element、Document 或 Window。 在 捕获 或 
冒 泡 阶 段 ， 它 和 target 不 一 致 。 正 事件 没有 定义 这 个 属性 ， 不 过 jQuery 事 
件 模拟 了 这 个 属性 。 





readonly DataTransfer dataTransfer 


适用 于 拖 放 事件 ， 这 个 属性 定义 了 协调 整个 拖 放 操作 的 
DataTransfer 对 象 。 拖 放 事 件 是 一 种 鼠标 事件 ， 有 这 个 属性 的 事件 仍然 
会 有 clientX、clientY 以 及 其 他 鼠标 事件 属性 。 拖 放 事件 包括 拖 动 源 上 的 
dragstart、drag、dragend 以 及 放置 目标 上 的 dragenter、dragover、 
dragleave 和 drop。 关 于 拖 放 操作 的 更 多 细节 ， 请 参考 DataTransfer 和 17.7 
BE 





readonly boolean defaultPrevented* 


如 果 在 当前 事件 上 调用 defaultPrevented0 则 为 tue; 否则 为 false。 这 
是 标准 事件 模型 中 一 个 新 添加 的 属性 ， 可 能 还 不 是 所 有 浏览 器 都 支持 。 
(jQuery 事件 定义 一 个 功能 类 似 于 这 个 属性 的 isDefaultPrevented() 方 
0 


readonly long detail 


与 事件 有 关 的 一 个 数字 细节 。 对 click、mousedown 以 及 mouseup 事 
件 来 说 ， 这 个 值 是 单 击 次 数 ， 单 击 为 1， 双 击 为 3， 三 击 为 3， 依 此 类 
推 。 在 Firefox 中 ，DOMMouseScroll 事 件 使 用 这 个 属性 来 报告 鼠标 深 轮 
滚 过 的 数量 。 


readonly unsigned short eventPhase* 


当前 事件 传播 的 阶段 。 值 为 上 面 定 义 的 三 个 常量 之 一 。 正 事件 不 文 
这 个 属性 。 





持 
readonly boolean isTrusted* 


如 果 当 前 事件 是 由 浏览 器 创建 并 分 发 的 则 为 tue;， 如 果 是 由 
JavaScript 代 码 创 建 并 分 发 的 人 造 事件 则 为 false。 这 个 属性 在 标准 事件 模 
型 中 还 是 一 个 相对 较 新 的 属性 ， 可 能 不 是 所 有 浏览 器 都 已 实现 。 


readonly Element fromElement 


适用 于 I 正中 的 mouseover 和 mouseout 事 件 ，fromElement 指 向 鼠标 指 
针 正 在 其 中 移动 的 对 象 。 标 准 事件 中 对 应 的 是 relatedTarget 属 性 。 


readonly integer keyCode 


按 下 的 键 的 实际 的 键 码 。 这 个 属性 对 所 有 类 型 的 键盘 事件 都 可 用 。 
键 码 可 能 会 与 浏览 器 、 操 作 系统 或 者 依赖 的 键盘 硬件 相关 。 一 般 情况 
下 ， 显 示 一 个 可 打印 字符 的 键 的 实际 的 键 码 就 是 那个 字符 的 编码 。 非 打 
印字 符 的 功能 键 的 键 码 可 能 有 很 多 种 变化 ， 可 参见 例 17-8， 其 中 包含 一 
em 

Bs 








readonly boolean metaKey 


a 事件 发 生 时 Meta 键 是 否 按 下 。 适 用 于 鼠标 和 键盘 事件 ， 也 包括 下 事 


readonly integer offsetX,offsetY 


适用 于 下 事件， 这 两 个 属性 定义 事件 发 生 在 事件 源 元 素 〈 人 参见 
srcElement) 的 坐标 系统 中 的 坐标 。 标 准 事 件 没有 等 效 的 属性 。 





readonly integer pageX,pageY 
这 两 个 属性 不 是 标准 属性 ， 但 广泛 文 持 ， 类 似 于 clientX 和 clientY， 


然而 它们 使 用 文档 坐标 而 不 是 窗口 坐标 。 正 事件 没有 定义 这 两 个 属性 ， 
不 过 jQuery 为 所 有 浏览 右 模 拟 了 它们 。 











readonly EventTarget relatedTarget* 


指 同 一 个 事件 目标 (通常 是 一 个 文档 元 素 ) ， 该 目标 与 事件 的 
target 节 点 关联 。 对 mouseover 事 件 来 说 ， 它 是 鼠标 指针 移动 到 目标 上 时 
离开 的 那个 元 素 。 对 mouseout 事 件 来 说 ， 它 是 鼠标 离开 目标 时 进入 的 元 
素 。 这 个 属性 在 下 事件 中 没有 定义 ， 不 过 jQuery 事件 中 模拟 了 它 。 参 见 
IE 属 性 fromElement 和 和 toElement。 








boolean returnValue 


适用 于 下 事件 ， 将 这 个 属性 设置 为 false 将 阻止 发 生 事 件 的 源 元 素 的 
默认 动作 。 标 准 事件 中 使 用 preventDefault() 方 法 代替 。 


readonly long screenX,screenY 





适用 于 鼠标 事件 ， 这 两 个 属性 定义 了 鼠标 指针 相对 于 用 尸 的 显示 融 
的 左上 角 的 X、Y 坐 标 。 这 两 个 属性 一 般 不 是 很 有 用 ， 不 过 适用 于 所 有 
鼠标 事件 类 型 ， 同 时 标准 事件 和 正事 件 都 支持 。 


readonly boolean shiftKey 
pe 。 适 用 于 鼠标 和 按键 事件 ， 也 适用 于 I 下 


readonly EventTarget srcElement 


适用 于 IE 事 件 ， 这 个 属性 定义 触发 事件 的 对 象 。 标 准 事 件 中 使 用 
target 代 蔡 。 


readonly EventTarget target* 


当前 事件 的 目标 对 象 一 一 触发 这 个 事件 的 对 象 。( 所 有 可 以 作为 事 
件 目标 的 对 象 都 实现 EventTarget 的 方法 。) 这 个 属性 不 适用 于 正事 件 ， 
不 过 jQuery 事件 模拟 它 。 参 见 srcElement。 





readonly unsigned long timeStamp* 


一 个 数字 ， 可 能 为 事件 发 生 的 时 间或 日 期 的 时 间 戳 ， 也 可 能 是 一 个 
至 少 可 用 来 比较 两 个 事件 发 生 的 先后 顺序 的 数字 。 许 多 浏览 器 返回 的 是 
一 个 可 传 入 Date0) 构 造 函 数 的 时 间 惟 。 但 是 ， 在 Firefox ”4 及 更 早 的 版 本 
中 ， 这 个 属性 是 另外 类 型 的 时 间 戳 ， 比 如 自 电脑 启动 以 来 的 毫秒 数 。 正 
et 0 0 
式 的 时 间 戳 。 








Element toElement 


适用 于 正中 的 mouseover 和 mouseout 事 件 ，toElement 指 代 鼠 标 指 针 
正 要 移入 的 对 象 。 标 准 事 件 中 使 用 relatedTarget 代 做 。 


readonly string type* 


当前 Event 对 象 的 事件 名 。 这 是 事件 处 理 程序 注册 的 名 字 或 者 事件 
处 理 程 序 属性 去 掉 开 头 的 "on" 之 后 的 名 字 ， 比 
如 "dlick"、"load" 或 "submit"。 这 个 属性 适用 于 标准 事件 和 IE 事 件 。 


readonly Window view 


生成 事件 的 窗口 (由 于 历史 原因 叫做 "view"〉。 这 个 属性 适用 于 所 
有 标准 的 用 户 界 面 事件 ， 比 如 鼠标 和 键盘 事件 。 正 事件 不 文 持 此 属性 。 


readonly integer wheelDelta 


适用 于 鼠标 深 轮 (mousewheel) 事件 ， 这 个 属性 指明 Y 轴 上 已 经 滚 
动 的 数量 。 不 同 的 浏览 器 中 此 属性 的 值 也 不 同 : 细节 请 参见 17.6 节 。 这 
是 一 个 非 标 准 属性 ， 但 是 所 有 浏览 堪 都 文 持 ， 包 括 IE8 及 更 早 版 本 。 


readonly integer wheelDeltaX 
readonly integer wheelDeltaY 


适用 于 支持 两 个 维度 的 鼠标 深 轮 的 浏览 器 中 的 mousewheel 事 件 ， 这 
两 个 属性 指明 XX 和 YY 方向 的 深 动 数量 。17.6 节 有 关于 如 何 解 释 这 两 个 属性 
的 说 明 。 如 果 wheelDeltaY 有 定义， 那么 它 将 与 wheelDelta 属 性 的 值 相 


同 。 











readonly integer which 


这 是 个 非 标 准 的 遗留 属性 ， 除 下 外 的 浏览 占 都 支持 ，jQuery 中 有 对 
应 的 模拟 。 对 鼠标 事件 来 说 ， 它 和 button 属 性 一 样 : 1 表示 左 键 ，2 表 示 
中 键 ，3 表 示 右 键 。 对 键盘 事件 来 说， 它 和 keyCode 的 值 一 样 。 


方法 


这 些 事件 都 是 由 Event 类 上 自己 定义 的 ， 所 以 在 所 有 标准 Event 对 象 上 
它们 都 可 用 。 


void initEvent(string type,boolean bubbles,boolean cancelable) 


这 个 方法 初始 化 一 个 Event 对 象 的 typpe、bubbles 以 及 cancelable 属 
性 。 向 Document 的 createEvent() 方 法 传 入 字符 串 参数 "Event" 将 创建 一 个 
新 的 事件 对 象 。 然 后 ， 在 使 用 这 个 方法 将 其 初始 化 之 后 ， 通 过 将 它 传 入 
某 个 EventTarget 的 dispatchEvent() 方 法 将 它 分 发 出 去 。 其 他 标准 事件 属 
性 〈 除 type、bubbles 以 及 cancelable) 将 在 分 发 时 初始 化 。 如 果 想 创建 、 
初始 化 然后 分 发 一 个 更 复杂 的 合成 〈synthetic) 事件 ， 必 须 回 


createEvent() 传 入 一 个 不 同 的 参数 (比如 "MouseEvent") ， 然 后 用 类 似 
initMouseEvent(O 〈 本 书 没有 介绍 ) 的 指定 类 型 的 初始 化 函数 来 初始 化 
Cs 


void preventDefault() 


告诉 Web 浏 览 右 不 要 执行 与 当前 事件 关联 的 默认 操作 ， 如 果 存 在 对 
应 的 默认 操作 的 话 。 如 果 事 件 不 是 可 取消 的 类 型 ， 这 个 方法 将 没有 任何 
效果 。 这 个 方法 不 适用 于 下 事件 对 象 ， 不 过 jQuery 中 有 对 应 的 模拟 。 在 
IE 事 件 模 型 中 ， 替 代 的 方法 是 将 returnValue 属 性 设置 为 false。 


void stopImmediatePropagation() 


类 似 于 stopPropagation()， 但 除 此 之 外 ， 它 还 将 阻止 注册 在 这 个 文档 
元 素 上 的 所 有 其 他 事件 处 理 程序 。 这 个 方法 是 新 添加 到 标准 事件 模型 中 
的 ， 可 能 不 是 所 有 浏览 器 都 实现 它 。 它 不 适用 于 正事 件 模型 ， 不 过 
jQuery 中 有 对 应 的 模拟 。 





void stopPropagation() 


阻止 事件 在 捕获 、 目 标 、 冒 泡 阶 段 进 行 传播 。 调 用 这 个 方法 后 ， 同 
一 个 节点 上 同一 个 事件 的 其 他 事件 处 理 程 序 将 被 调用 ， 但 这 个 事件 将 不 
会 分 发 到 其 他 节点 上 。 这 个 方法 在 正事 件 模型 中 不 支持 ， 不 过 jQuery 中 
有 对 应 模拟 。 在 下 中， 代替 调用 stopPropagation() 的 方法 是 将 
cancelBubble 设 置 为 true。 


提议 属性 

这 儿 列 出 的 属性 是 当前 DOM Level 3 Events specification 的 草案 中 的 
提议 。 它 们 涉及 现在 浏览 器 中 的 主要 不 兼容 部 分 ， 不 过 (在 写本 书 时 ) 
还 没有 任何 浏览 器 实现 它 。 如 果 它 们 通用 地 实现 了 ， 编 写 处 理 文 本 输入 
事件 、 按 键 事件 以 及 鼠标 事件 的 可 移植 代码 将 更 容易 更 简短 。 














readonly unsigned short buttons 
这 个 属性 类 似 于 上 面 介 绍 过 的 正版 本 的 button 属 性 。 


readonly string char 


适用 于 键盘 事件 ， 这 个 属性 保存 事件 生成 的 字符 串 〈 可 能 包含 多 个 


EE 
readonly string data 
适用 于 textinput 事 件 ， 这 个 属性 定义 输入 的 文本 。 
readonly unsigned long deltaMode 


适用 于 滚轮 事件 ， 这 个 属性 定义 deltaX、deltaY 以 及 deltaZ 属 性 的 合 
适 的 转换 值 。 这 个 属性 的 值 可 能 为 下 面 的 常量 之 一 : 
DOM DELTA PIXEL、 DOM DELTA LINE DOM DELTA PAGE. 
这 个 属性 的 值 是 与 平台 相关 的 ， 它 可 能 取决 于 系统 偏好 或 者 深 轮 事件 时 
按 下 的 辅助 键 。 


readonly long deltaX,deltaY ,deltaZ. 


0 这 些 属 性 定义 滚轮 围绕 这 三 条 可 能 的 轴 分 别 旋转 
了 多 少 。 





readonly unsigned long inputMethod 


适用 于 textinput 事 件 ， 这 个 属性 指明 文本 被 输入 的 方式 。 属 性 值 可 
能 为 下 面 的 常量 之 一 : DOM _INPUT_METHOD_UNKNOWN、 
OM_INPUT METHOD KEYBOARD. 
DOM_INPUT METHOD PASTE、 DOM_ INPUT METHOD DROP、 
DOM_INPUT METHOD IME、 DOM_ INPUT METHOD_ OPTION. 
DOM_INPUT METHOD HANDWRITING. 
DOM_INPUT METHOD VOICE. 
DOM_ INPUT METHOD MULTIMODAL. 
DOM_INPUT METHOD _SCRIPT。 


readonly string key 


对 生成 字符 的 键盘 事件 来 说 ， 这 个 属性 的 值 与 cha r 的 值 一 样 。 如 果 
键盘 事件 没有 生成 字符 ， 这 个 属性 将 保存 按 下 的 键 的 名 字 
(如 "Tab" 或 "Down") 。 


readonly string locale 


适用 于 键盘 事件 和 textinput 事 件 ， 这 个 属性 指明 一 个 标识 键盘 配置 
的 区 域 的 语言 代码 〈 例 如 "en-GB") ， 如 果 该 信息 已 知 的 话 。 


readonly unsigned long location 


适用 于 键盘 事件 ， 这 个 属性 指明 按 下 的 键 的 键盘 位 置 。 属 性 的 值 可 
能 是 下 面 的 常量 之 一 : DOM_KEY _ LOCATION _STANDARD、 
DOM_ KEY_LOCATION _ LEFT、 DOM KEY_LOCATION_ RIGHT.、 
DOM_ KEY_LOCATION_NUMPAD.、 
DOM_ KEY_LOCATION MOBILE.、 
DOM_ KEY_LOCATION _JOYSTICK。 


readonly boolean repeat 


适用 于 键盘 事件 ， 如 果 一 个 键 按 下 足够 长 的 时 间 ， 触 发 了 重复 事 
则 这 个 属性 值 为 true。 


提议 方法 


类 似 于 上 面 列 出 的 提议 属性 ， 这 儿 列 出 的 方法 已 经 在 标准 的 草案 中 
有 了 提议 ， 但 还 没有 被 任何 浏览 右 实 现 。 


人 


-> 


boolean getModiferState(string modifer) 
适用 于 鼠标 和 键盘 事件 ， 如 采 事 件 发 生 时 指定 的 辅助 键 按 下 ， 则 这 
个 方法 返回 true; 否则 返回 false。modifier 可 能 是 下 面 的 字符 串 之 


一 : "Alt"、"AltGraph"、"CapsLock"、"Control"、"Fn"、"Meta"”、"NumL 
及 "Win"。 


EventSource 
到 一 个 HTTP 服务 器 的 长 连接 
EventTarget 


一 个 EventSource 表 示 一 个 HTTP 长 连接 ，Web 服 务 器 可 以 通过 这 个 
连接 “推送 ”文本 消息 。 要 使 用 这 些 “ 服 务 器 发 送 的 事件 >， 可 以 将 服务 吉 


的 URL 传 给 EventSourceO 构 造 函 数 ， 然 后 在 生成 的 EventSource 对 象 上 注 
册 一 个 消息 事件 处 理 程序 。 


服务 器 发 送 的 事件 是 新 添加 的 ， 在 编写 本 书 时 ， 还 没有 浏览 器 文 


持 





构造 函数 
new EventSource(string url) 


创建 一 个 连接 到 指定 unl 的 Web 服 务 器 的 新 EventSource 对 象 。url 为 
相对 于 当前 文档 的 URL 的 地 址 。 


常量 

下 面 的 常量 定义 了 readyState 属 性 可 能 的 值 。 

unsigned short CONNECTING=0 

连接 正在 建立 中 ， 或 者 连接 已 关闭 并 且 EventSource 正 在 重新 连接 。 





unsigned short OPEN=1 
连接 已 打开 ， 正 在 分 发 事件 。 
unsigned short CLOSED=2 


连接 已 关闭 ， 原 因 是 调用 了 close0) 方 法 ， 或 者 发 生 了 重大 错误 不 可 
能 重新 连接 。 


属性 
readonly unsigned short readyState 


连接 的 状态 。 上 面 的 常量 定义 了 所 有 可 能 的 值 。 





readonly string url 


EventSource 连 接 到 的 绝对 URL。 


方法 
void close() 


这 个 方法 将 关闭 连接 。 一 旦 调用 这 个 方法 ，EventSource 对 象 就 不 再 
可 以 使 用 。 如 果 要 再 次 连接 ， 只 能 创建 一 个 新 的 EventSource。 


事件 处 理 程序 


网 络 通信 是 异步 的 ， 所 以 当 连 接 打 开 、 发 生 错 误 以 及 有 消息 从 服务 
器 到 达 时 EventSource 会 触发 事件 。 可 以 在 这 儿 列 出 的 属性 上 注册 事件 处 
理 程序 ， 也 可 以 使 用 EventTarget 的 方法 来 代 蔡 。EventSource 事 件 都 分 派 
在 EventSource 对 象 上 自身 之 上 ， 不 会 冒 泡 ， 也 没有 可 以 取消 的 默认 行为 。 





OnNeIror 


发 生 错误 时 触 友 。 关 联 的 事件 对 象 是 一 个 简单 的 Event。 





onmessage 
当 有 消息 从 服务 器 到 达 时 触发。 关联 的 事件 对 象 是 一 个 


MessageEvent， 通 过 这 个 对 象 的 data 属 性 可 以 取得 服务 器 的 消息 的 文本 
内 容 。 


onopen 

当 连 接 打开 时 触发 。 关 联 的 事件 对 象 是 一 个 简单 的 Event。 
Eventlarget 

接收 事件 的 对 象 

有 事件 在 其 上 触发 的 对 象 或 者 事件 冒 泡 到 的 对 象 ， 需 要 一 种 方式 来 
为 这 些 事件 定义 处 理 程序 。 这 些 对 象 定义 的 事件 处 理 程序 的 注册 属性 名 
一 般 以 "on" 开 头 ， 通 常 它 们 也 定义 这 儿 描 述 的 方法 。 事 件 处 理 程序 注册 
是 一 个 惊人 复杂 的 话题 ， 细 节 可 参见 17.2 节 ， 特 别 要 注意 的 是 ，IE8 及 更 


早 的 版 本 使 用 的 是 和 所 有 其 他 浏览 器 者 不 同 的 方法 ， 在 接 下 来 的 专门 一 
节 里 有 介绍 。 














放 启 


Void addEventListener(string type,function listener,[boolean 
useCapture]) 


这 个 方法 将 指定 的 listener 函 数 注册 为 类 型 为 type 的 事件 的 事件 处 理 
程序 。type 是 一 个 事件 名 称 字 符 串 ， 不 包含 "on" 前 级 。 如 果 这 是 一 个 注 
册 在 真实 事件 目标 的 文档 祖先 上 的 捕获 事件 处 理 程序 (参见 17.2.3 
节 ) ， 参 数 useCapture 的 值 应 该 为 tue。 注 意 ， 有 些 浏览 器 还 要 求 传 入 第 
三 个 参数 到 这 个 函数 中 ， 要 注册 普通 的 非 捕获 处 理 程 序 只 能 传 入 false。 








boolean dispatchEvent(Event event) 


这 个 方法 分 发 一 个 合成 event 到 当前 事件 目标 上 。 通 过 
document.createEvent() 创 建 一 个 新 的 Event 对 象 ， 传 入 事件 名 (比如 对 简 
单 事 件 来 说 传 入 "event") 。 接 下 来 ， 为 创建 的 Event 对 象 调用 事件 初始 
化 方法 : 对 简单 事件 而 言 ， 这 个 方法 是 initEventO 〈 人 参见 Event) 。 接 下 
来 ， 将 初始 化 后 的 事件 传 入 这 个 方法 来 分 发 它 。 在 现代 浏览 器 中 ， 每 一 
个 Event 对 象 都 有 一 个 isTrusted 属 性 ， 由 JavaScript 分 发 的 任何 合成 事件 
的 这 个 属性 都 将 是 false。 


每 一 种 事件 对 象 都 定义 一 个 特定 于 类 型 的 初始 化 方法 。 这 些 方法 不 
经 常用 到 ， 有 长 长 的 繁琐 的 参数 列表 ， 本 书 没 有 相关 文档 。 如 果 需 要 创 
建 、 初 始 化 然后 分 发 比 基 本 Event 更 复杂 的 类 型 的 合成 事件 ， 只 能 去 在 
线 碍 阅 初始 化 方法 的 文档 。 





void ”removeEventListener(string type,function listener,[boolean 
useCapture]) 


这 个 方法 移 除 一 个 已 注册 的 事件 ]istener 函 数 。 它 和 
addEventListener() 需 要 的 参数 一 样 。 


Internet Explorer 的 方法 
IE8 及 更 早 的 版 本 不 文 持 addEventListener() 和 


removeEventListener()。 它 们 实现 了 下 面 两 个 非常 相似 的 方法 来 代 蔡 。 
《17.2.4 节 列 出 了 一 些 重要 的 差异 。) 


void attachEvent(string type,function listener) 


将 指定 的 listener 函 数 注册 为 类 型 为 指定 type 的 事件 的 事件 处 理 程 
。 注 意 这 个 方法 的 type 需 要 在 事件 名 前 面包 含 "on"。 





了 1 


void detachEvent(string type,function listener) 


这 个 方法 的 作用 与 attachEvent( 相 反 。 
FieldSet 


HTML 表 单 中 的 二 fieldset 
Node、 Element、FormControl 


FieldSet 对 象 表 示 HTML 二 form 二 中 的 二 fieldset 二 >。FieldSet 实 现 
FormControl 的 大 部 分 但 不 是 所 有 属性 和 方法 。 


属性 
boolean disabled 


如 果 FieldSet 禁 用 则 为 tue。 禁 用 FieldSet 会 同时 禁用 它 包 含 的 表单 


信人 





readonly HTMLFormControlsCollection elements 

包含 当前 <fieldset> 内 的 所 有 表单 控件 的 类 数组 对 象 。 
File 

本 地 文件 系统 中 的 文件 

File 是 一 个 具有 名 字 同 时 可 能 也 有 一 个 修改 日 期 的 Blob。 它 代表 本 
地 文件 系统 中 的 一 个 文件 。 可 以 从 一 个 由 <input type=file 二 元 系 组 成 的 


files 数 组 中 ， 或 者 从 一 个 由 与 drop 事 件 的 Event 对 象 关 联 的 DataTransfer 对 
象 组 成 的 人 ies 数 组 中 ， 取 得 一 个 用 户 选 择 的 文件 。 





也 可 以 在 私有 的 沙 箱 文 件 系统 中 获取 File 对 象 ， 就 像 22.7 节 介绍 过 
的 一 样 。 在 写作 本 书 的 时 候 ， 文 件 系统 的 API 还 不 是 很 稳定 ， 该 部 分 没 
有 对 应 的 文档 。 

可 以 通过 FormData 对 象 或 者 将 File 传 入 XMLHttpRequest.send(0) 来 将 
一 个 文件 的 内 容 上 传 到 服务 器 ， 除 此 之 外 File 对 象 本 里 不 文 持 别 的 操 
作 。 可 以 使 用 FileReader 来 读 一 个 File (或 者 任意 Blob)〉 的 内 容 。 

属性 

readonly Date lastModifedDate 

当前 文件 的 修改 日 期 ， 如 果 不 可 用 则 为 null。 


readonly string name 


当前 文件 的 文件 名 〈 不 包括 路 径 ) 。 
FileError 

读 文 件 时 的 错误 

FileError 对 象 代 表 使 用 FileReader 或 FileReaderSync 读 一 个 文件 时 发 
生 的 错误 。 如 果 使 用 同步 API， 将 抛 出 FileError 对 象 。 如 果 使 用 异步 
API， 分 发 错误 事件 时 FileReader 对 象 的 error 属 性 的 值 将 是 对 应 的 
FileError 对 象 。 


注意 FileWriter API (22.7 节 介绍 过 ， 不 过 它 还 不 够 稳定 ， 因 此 该 部 
分 没有 相关 文档 ) 为 这 个 对 象 添加 了 新 的 错误 代码 利 量 。 


常量 
FileError 错 误 代 码 如 下 : 
unsigned Short NOT_FOUND_ERR=1I 


文件 不 存在 。 〈 可 能 在 用 户 选中 它 后 它 被 删除 了 ， 然 后 程序 尝试 去 
读 它 。) 





unsigned short SECURITY_ERR=2 

未 知 的 安全 问题 阻止 浏览 堪 执 行 读 取 文 件 的 代码 。 
unsigned short ABORT_ERR=3 

中 止 读 取 文件 的 尝试 。 

unsigned short NOT_READABLE ERR=4 


文件 不 可 读 ， 可 能 因为 它 的 权限 已 改变 或 者 因为 男 一 个 进程 把 它 锁 
定 了 。 





Unsigned short ENCODING ERR=5 


调用 readAsDataURLO 失 败 ， 因 为 文件 太 长 ， 无 法 编码 为 一 个 
data:/URL 。 


属性 

readonly unsigned short code 

这 个 属性 指明 发 生 的 错误 的 种 类 。 它 的 值 为 上 面 的 常量 之 一 。 
FileReader 

异步 读 取 一 个 File 或 Blob 

EventTarget 


FileReader 定 义 读 取 File 或 Blob 的 异步 API。 可 通过 下 面 的 步骤 读 取 
人 天 
| 文件 : 


:通过 FileReader() 构 造 函 数 创建 一 个 FileReader。 
定义 需要 的 事件 处 理 程序 。 
.将 File 或 Blog 对 象 传 入 4 个 读 取 方 法 中 的 一 个 。 


:触发 onload 处 理 程序 时 ， 文 件 内 容 将 可 以 通过 result 属 性 访问 。 或 
者 ， 如 果 触 发 onerror 处 理 程 序 ，error 属 性 将 指 同 一 个 提供 更 多 信息 的 
FileError 对 象 。 


A 可 以 重用 FileReader 对 象 或 根据 需要 丢弃 它 并 创建 一 
让 新 的 。 


关于 在 工作 线程 中 可 使 用 的 同步 API， 参 见 fileReaderSync。 
构造 函数 





new FileReader() 


使 用 FileReader() 构 造 函 数 创建 一 个 新 的 FileReader 对 象 ， 不 需要 参 
数 。 


常 
下 面 的 常量 是 readyState 属 性 可 能 的 值 : 
unsigned short EMPTY=0 

还 没有 读 取 方 法 被 调用 。 

unsigned short LOADING=1 

正在 读 取 中 。 

unsigned short DONE=2 

读 取 已 完成 ， 成 功 或 市 有 错误 。 

属性 


tn 





readonly FileError error 
如 有 果 读 取 中 出 现 错误 ， 这 个 属性 将 指 代 摘 述 该 错误 的 FileError。 


readonly unsigned short readyState 


这 个 属性 描述 FileReader 的 当前 状态 。 它 的 值 可 能 为 上 面 列 出 的 3 个 


常量 之 一 。 
readonly any result 


如 采 读 取 成 功 完 成 ， 这 个 属性 将 以 字符 串 或 ArrayBuffer 的 形式 〈 取 
决 于 调用 了 哪个 读 取 方法 ) 保存 对 应 的 File 或 Blob 内 容 。 如 果 readyState 
为 LOADING 或 者 触发 一 个 progress 事 件 ， 这 个 属性 可 能 包含 对 应 的 File 
i 如 有 果 没 有 调用 读 取 方法 或 者 发 生 了 错误 ， 这 个 属性 
将 为 null。 


方法 





void abort() 


这 个 方法 中 止 一 个 读 取 任务 。 它 将 readyState 设 置 为 DONE， 将 
result 设 置 为 null， 将 error 设 置 为 一 个 code 为 FileError.ABORT _ERR 的 
FileError 对 象 。 然 后 ， 它 将 触发 一 个 abort 事 件 和 一 个 loadend 事 件 。 


void readAsArrayBuffer(Blob blob) 


异步 读 取 blob 的 字 节 内 容 ， 结 采 为 一 个 ArrayBuffer 对 象 ， 可 通过 
result 属 性 访问 。 


void readAsBinaryString(Blob blob) 

异步 读 取 blob 的 字 节 内 容 ， 将 它们 编码 为 JavaScript 二 进 制 字符 串 ， 
并 将 结果 赋值 给 result 属 性 。JavaScript 二 进 制 字符 串 中 的 每 一 个 “ 字 
符 ” 的 字符 编码 都 在 0 一 255 之 间 。 可 以 使 用 String.charCodeAt(0) 来 提取 这 
些 字 市 值 。 注 意 ， 二 进 制 字 符 串 是 二 进 制 数 据 的 一 种 低 效 的 表示 形式 : 
如 果 可 能 应 该 使 用 ArrayBuffers 代 蔡 。 

void readAsDataURL(Blob blob) 


异步 读 取 blob 的 字 节 ， 将 它们 《以 及 该 Blog 的 类 型 ) 编码 为 
data://URL， 并 将 result 属 性 设置 为 返回 的 字符 串 。 


void readAsText(Blob blob,[string encoding]) 


异步 读 取 blob 的 字 节 内 容 ， 并 使 用 指定 的 encoding 将 它 解 码 为 一 个 
Unicode 文 本 字符 串 ， 然 后 将 result 属 性 设置 为 解码 后 的 字符 串 。 如 未 指 
定 encoding， 将 默认 使 用 UTF-8( 如 果 UTF-16 编 码 的 文本 以 一 个 字 节 顺 
序 标记 〈Byte Order Mark) 开始 的 话 也 会 自动 检测 并 解码 它 ) 。 


事件 处 理 程序 


和 所 有 异步 API 类 似 ，FileReader 是 基于 事件 的 。 可 以 使 用 这 儿 列 出 
的 处 理 程序 属性 来 注册 事件 处 理 程 序 ， 或 者 使 用 FileReader 实 现 的 
EventTarget() 方 法 。 


FileReader 事 件 在 FileReader 对 象 自身 上 人 触发。 它们 不 冒 泡 ， 也 没有 
可 取消 的 默认 行为 。FileReader 事 件 处 理 程序 总 是 传 入 ProgressEvent 对 
象 。 一 次 成 功 的 读 取 任务 以 一 个 loadstart 事 件 开始 ， 接 着 是 零 个 或 多 个 
progress 事 件 、 一 个 load 事 件 ， 以 及 一 个 loadend 事 件 。 不 成 功 的 读 取 任 
务 以 一 个 loadstart 事 件 开始 ， 接 着 是 零 个 或 多 个 progress 事 件 、 一 个 error 
或 abort 事 件 ， 以 及 一 个 loadend 事 件 。 








onabort 


当 读 取 任 务 通 过 abort() 方 法 中 止 时 触发 。 





OnNeIrror 


发 生菜 种 错误 时 触发 。FileReader 的 error 属 性 指 代 一 个 有 错误 代码 
的 FileError 对 象 。 


onload 


当 File 或 Blog 成 功 读 取 时 和 触发。FileReader 的 result 属 性 值 为 File 或 
Blob 的 内 容 ， 形 式 取决 于 调用 的 是 哪个 读 取 方法 。 


onloadend 


每 次 调用 FileReader 的 读 取 方法 最 后 都 会 产生 一 个 load 事 件 、 一 个 
error 事 件 或 一 个 abort 事 件 。 在 这 些 事件 之 后 FileReader 也 会 触发 一 个 
loadend 事 件 ， 这 样 有 些 脚本 就 可 以 只 监听 一 个 事件 而 不 是 所 有 的 3 个 事 
件 。 


onloadstart 


在 调用 一 个 read 方 法 之 后 但 是 在 读 取 数 据 之 前 触发 。 





onprogress 


当 正 在 读 取 File 或 Blob 数 据 时 触发 ， 大 约 每 秒 20 次 。ProgressEvent 
对 象 指 出 已 经 读 取 了 多 少 字 节 ，FileReader 的 result 属 性 可 能 包含 这 些 字 
节 的 表示 形式 。 











FileReaderSync 
同步 读 取 一 个 File 或 Blob 


FileReaderSync 古 FileReader A 个 同步 版 本 ， 仅 在 Worker 线 程 
中 可 用 。 同 步 API 比 异步 的 更 好 用 : 只 需要 简单 地 创建 一 个 
FileReaderSync() 对 象 ， 然后 调用 它 的 一 个 读 取 方法 ， 该 方法 将 返回 对 应 
File 或 Blob 的 内 容 或 者 抛 出 一 个 FileError 对 象 。 

构造 函数 


new FileReaderSync() 


使 用 FileReaderSyncO 构 造 画 数 创 建 一 个 新 的 FileReaderSync 对 象 ， 
后 者 不 需要 参数 。 


方法 


如 果 读 取 失 败 ， 无 论 因 为 什么 原因 ， 这 些 方法 都 将 抛 出 一 个 
FileError 对 象 。 


ArrayButffer readAsArrayBuffer(Blob blob) 
读 取 blob 的 字 节 内 容 并 以 ArrayBuffer 的 形式 返回 
string readAsBinaryString(Blob blob) 


读 取 blob 的 字 节 内 容 ， A (参见 
String.fromCharCode0 ) ， 然 后 返回 这 个 二 进 制 字符 串 。 





string readAsDataURL(Blob blob) 


读 取 blob 的 字 节 内 容 并 将 内 容 与 blob 的 type 属 性 编码 为 一 个 
data://URL， 返 回 这 个 URL。 


string readAsText(Blob blob,[string encoding]) 


读 取 blob 的 字 节 内 容 并 使 用 指定 的 encoding (如 果 没 有 指定 编码 则 
使 用 UTF-8 或 UTF-16)〉 解码 为 文本 ， 并 返回 这 个 文本 。 


Form 


HTML 文 档 中 的 二 form 帮 表单 
Node、 Element 


Form 对 象 代表 HTML 文 档 中 的 一 个 二 form 放 元 素 。 它 的 elements 属 
性 是 一 个 HTMLCollection， 提 供 了 访问 表单 的 所 有 元 素 的 一 个 方便 方 
法 。submitO0 和 reset0 方 法 允许 表单 在 程序 的 控制 下 提交 或 者 重 置 。 


文档 中 的 每 一 个 表单 都 表示 为 docuement.forms[] 数 组 的 一 个 元 素 。 
表单 的 元 素 〈 如 按钮 、 输 入 框 、 复 选 框 等 ) 都 收集 在 类 数组 对 象 
Form.elements 中 。 指 定名 字 的 表单 控件 可 以 直接 通过 名 字 引 用 : 控件 名 
可 以 像 Form 对 象 的 属性 名 一 样 使 用 。 也 就 是 说 ， 如 果 要 在 表单 {f 中 引用 
一 个 name 属 性 为 "phone" 的 Input 元 素 ， 可 以 使 用 JavaScript 表 达 式 
fphone。 


关于 HIML 表 单 的 更 多 内 容 可 参见 15.9 节 。 关 于 表单 中 可 以 使 用 的 
表单 控件 的 更 多 内 容 请 参考 FormControl、FieldSet、Input、Label、 
Select 以 及 TextArea。 


本 页 描述 HITML5 表 单 特 性 ， 在 写作 本 书 时 ， 这 些 特性 还 没有 广泛 
实现 。 


属性 
这 儿 列 出 的 大 部 分 属性 只 是 同名 的 HIML 属 性 的 简单 映射 。 








MN| 
J 


string acceptCharset 


一 个 或 多 个 允许 的 字符 集 ， 其 中 的 表单 数据 可 能 会 编码 之 后 再 提 


String action 
表单 提交 到 的 URL。 
string autocomplete 


字符 串 "on" 或 者 "off"。 如 果 为 "on"， 浏 贤 旨 将 根据 之 前 访问 本 页 时 


保存 的 值 预 填 表单 控件 。 


readonly HTMLFormControlsCollection elements 
一 个 类 数组 对 象 ， 由 当前 表单 包含 的 表单 控件 组 成 。 
string enctype 
旨 定 表单 控件 的 值 提交 前 的 编码 方式 。 该 属性 合法 的 值 如 下 : 
"application/x-www-form-urlencoded" (默认 ) 
"multipart/form-data" 
‘"text/plain" 
readonly long length 
elements 属 性 表示 的 表单 控件 的 数目 。 表 单元 素 自 里 就 表现 得 有 反 

















像 表 单 控件 的 类 数组 对 象 ， 对 于 一 个 表单 { 及 一 个 整数 n 来 说 ， 表 达 式 
ffn] 和 felements[m] 是 一 样 的 。 


string method 
用 于 提交 表单 到 action URL 中 的 HTTP 方 法 。 只 能 是 "get" 或 "post"。 


string name 


表单 的 名 字 ， 由 HTML 的 name 属 性 指定 。 可 以 将 这 个 属性 的 值 作 为 
文档 对 象 的 name 属 性 使 用 ， 对 应 的 文档 属性 的 值 为 这 个 Form 对 象 。 


boolean noValidate 


如 果 表 单 在 提交 之 前 没有 验证 则 为 tue。 这 个 属性 是 HTML 的 
novalidate 属 性 的 镜像 。 





string target 


窗口 或 窗 体 〈(frame〉 的 名 字 ， 用 于 显示 表单 提交 之 后 的 返回 文 
es 


a 
boolean checkValidity() 
在 文 持 表单 验证 的 浏览 器 中 ， 这 个 方法 将 检查 每 个 表单 控件 的 有 效 


性 。 如 果 所 有 表单 控件 都 有 效 则 返回 true， 如 果 任 何 控件 无 效 ， 它 将 在 
该 控件 触发 一 个 invalid 事 件 ， 然 后 返回 false。 








void dispatchFormChange() 


这 个 方法 在 当前 表单 的 每 个 控件 上 触发 一 个 formchange 事 件 。 通 常 
在 用 户 的 输入 触发 一 个 change 事 件 时 表单 会 自动 触发 这 个 事件 ， 所 以 一 
般 不 需要 调用 这 个 方法 。 





void dispatchFormInput() 
这 个 方法 在 当前 表单 的 每 个 控件 上 触发 一 个 forminput 事 件 。 通 党 在 


用 户 的 输入 触及 input 事 件 时 表单 会 自动 触发 这 个 事件 ， 所 以 一 般 不 需要 
调用 这 个 方法 。 





void reset() 
将 所 有 表单 元 系 重 设 为 它们 的 默认 值 。 


void submit() 





手动 提交 当前 表单 ， 不 触发 submit 事 件 。 
事件 处 理 程序 


与 表单 相关 的 这 些 事 件 处 理 程序 属性 是 定义 在 Element 上 的 ， 但 由 
于 它们 在 Form 元 素 上 触发 ， 因 此 这 儿 也 列 出 了 更 多 的 细 市 。 





onreset 


在 表单 的 元 素 重 置 之 前 调用 。 可 通过 返回 false 或 取消 这 个 事件 来 阻 
止 重 置 。 


onsubmit 


在 表单 提交 之 前 调用 。 可 通过 返回 false 或 取消 这 个 事件 来 阻止 提 


FormControl 

所 有 表单 控件 的 通用 特性 

大 多 数 HTML 表 单 控 件 是 input 二 元 素 ， 但 表单 也 可 以 包含 < 
button 之 、 扫 select> 以 及 <<textarea 二 控件。 这 一 页 是 关于 这 些 元 素 类 型 
都 有 的 特性 的 文档 。 关 于 HTML 表 单 的 介绍 可 参见 15.9 节 ， 关 于 表单 及 
表单 控件 的 更 多 内 容 可 参考 Form、Input、Select 以 及 TextArea。 

<<fieldset> 和 <<output> 元 素 实 现 这 儿 摘 述 的 属性 中 的 大 多 数 ， 但 
不 是 所 有 。 本 参考 页 将 FieldSet 和 Output 对 象 作 为 FormControls 处 理 ， 虽 
然 它 们 没有 实现 所 有 属性 。 


本 页 包含 部 分 HTML5 表 单 特性 特别 是 表单 验证 ) 的 描述 ， 在 写 
作 本 书 的 时 候 ， 这 些 特性 还 没有 广泛 实现 。 


属性 








boolean autofocus 


如 采 文 档 一 加 载 本 控件 就 能 目 动 获得 键盘 焦点 ， 则 本 属性 值 为 





true。 (FieldSet 和 Output 控 件 没 有 实现 本 属性 。) 
boolean disabled 


如 果 当 前 表单 控件 禁用 则 为 t ro e。 禁 用 的 控件 不 会 响应 用 户 的 输 
入 ， 也 不 会 参与 表单 验证 。 (Output 元 素 没 有 实现 这 个 属性 ，FieldSet 元 
素 使 用 它 来 禁用 其 包含 的 所 有 控件 。) 








readonly Form form 


引用 拥有 当前 控件 的 Form， 如 果 没 有 对 应 的 表单 则 为 null。 如 果 一 
个 控件 包含 在 一 个 二 form 二 元 素 中 ， 束 说 该 form 拥 有 这 个 元 素 。 盏 则 ， 
如 果 控 件 有 一 个 HTML form 属 性 ， 并 指定 某 个 二 form 二 的 ID， 则 那个 指 
定 的 表单 就 是 本 控件 的 拥有 者 。 





readonly NodeList labels 


与 当前 控件 相关 的 所 有 Label 元 素 组 成 的 一 个 类 数组 对 象 。 
(FieldSet 控 件 没 有 实现 这 个 属性 。) 


string name 


当前 控件 的 HIML name 属 性 的 值 。 控 件 的 name 可 用 做 Form 元 素 的 
属性 : 该 属性 的 值 束 是 这 个 控件 元 素 。 提 交 表 和 单 时 也 会 用 到 控件 名 。 


string type 


对 二 input 二 元 素来 说 ，type 属 性 的 值 指 定 元 素 的 类 型 ， 如 果 对 应 的 
<input 之 标签 没有 指定 type 属 性 则 为 "text"。 对 壕 button 之 、 雯 select 之 以 
及 textarea 元 素来 说 ，type 分 别 为 "button"、"select-one" (或 "select- 
multiple"， 如 果 设 置 了 multiple 属 性 ) 以 及 "textarea"。 对 去 fieldset 之 元 素 


来 说 ，type 为 "fieldset"， 对 二 output 二 元 素来 说 type 为 "output"。 
readonly string validation Message 


如 果 控 件 是 有 效 的 或 不 受 验证 控制 ， 这 个 属性 将 为 空 字符 串 。 合 
则 ， 这 个 属性 包含 一 个 说 明 为 什么 用 户 的 输入 无 效 的 本 地 化 字符 串 。 


readonly FormValidity validity 


这 个 属性 指 代 一 个 对 象 ， 该 对 象 指出 用 户 对 当前 控件 的 输入 是 否 为 
有 效 ， 以 及 如 果 无 效 的 话 为 什么 无 效 。 


string value 
每 个 表单 控件 都 有 一 个 字符 串 值 value， 将 用 于 提交 表单 。 对 文本 输 
入 控件 而 言 ， 这 个 值 即 是 用 户 的 输入 。 对 按钮 而 言 ， 这 个 值 就 是 对 应 的 


HTML ”value 属 性 。 对 output 元 素 而 言 ， 这 个 属性 类 似 于 自 Node 继 承 的 
textContent 属 性 。Fieldset 元 素 没有 这 个 属性 。 





readonly boolean willValidate 
如 有 果 当 前 控件 参与 表单 验证 则 本 属性 为 tue; 否则 为 false。 
事件 处 理 程序 
表单 控件 定义 了 下 面 这 些 事件 处 理 程序 属性 。 也 可 以 通过 所 有 
Element0O 都 实现 的 EventTarget() 方 法 来 注册 事件 处 理 程序 。 
事件 处 理 程序 。 触发 条 件 


onformchange 。。” 当 在 表单 内 的 任何 一 个 控件 上 触发 一 个 change 事 件 时 ， 表 单 将 对 它 的 
所 有 控件 广播 一 个 不 冒 泡 的 formchange 事 件 。 控 件 可 以 使 用 这 个 处 理 
程序 属性 来 检测 它们 的 兄弟 控件 上 的 变化 

onforminput 当 在 表单 内 的 任何 一 个 控件 上 触发 一 个 input 事 件 时 ， 表 单 将 对 它 的 所 
有 控件 广播 一 个 不 冒 泡 的 forminput 事 件 。 控 件 可 以 使 用 这 个 处 理 程序 
属性 来 检测 它们 的 兄弟 控件 上 的 变化 

Oninvalid 如 果 一 个 表单 控件 没有 通过 验证 ， 一 个 invalid 事 件 将 在 它 上 面 触发 。 
这 个 事件 不 会 冒 泡 ， 如 果 它 被 取消 ， 浏 览 器 将 不 会 为 这 个 控件 显示 错 
避 消 息 


方法 


boolean checkValidity() 


如 果 控 件 有 效 〈 或 者 它 不 参与 验证 ) 则 返回 true。 人 否则 ， 本 方法 将 
在 对 应 控件 上 触发 一 个 invalid 事 件 并 返回 false。 


void setCustom Validity(string error) 


如 果 error 是 一 个 非 空 字符 串 ， 本 方法 将 把 该 控件 标记 为 无 效 ， 并 将 
在 回 用 户 报告 该 元 素 的 无 效 性 时 将 error 作 为 本 地 化 消息 显示 。 如 果 error 
ee 之 前 设置 的 error 字 符 串 将 删除 ， 同 时 该 控件 将 认为 是 有 效 


FormData 
一 次 HTTP mutilpart/form-data 请 求 体 的 内 容 


FormData 类 型 是 XML Http Request Level 2(XHR 2) 的 一 个 特性 ， 该 
特性 让 使 用 XMLHttpRequest 实 现 multipart/form-data 编 码 的 HTTP PUT 请 
求 更 简单 。 如 果 想 在 一 个 请 求 中 上 传 多 个 File 对 象 ， 还 需要 复合 编码 


(multipart encoding) 。 


使 用 构造 函数 创建 一 个 FormData 对 象 ， 然 后 使 用 append() 方 法 来 为 
它 添加 名 / 值 对 。 在 添加 完 所 有 的 请 求 内 容 后 ， 束 可 以 将 该 FormData 传 
入 一 个 XMLHttpRequest 的 send() 方 法 。 


构造 函数 

new FormDatal) 

这 个 无 参数 的 构造 函数 返回 一 个 空 FormData 对 象 。 
个 





void append(string name,any value) 


区 方法 添加 指定 name 及 value 的 内 容 到 FormData 中 。 人 参数 value 可 
以 是 一 六 字符 串 或 者 一 个 Blob( 别 忘 了 File 对 象 也 是 Blob)。 


FormValidity 





表单 控件 的 有 效 性 
FormControl 的 validity 属 性 指 代 一 个 FormValidity 对 象 ， 该 对 象 是 对 


应 控件 的 有 效 状态 的 一 个 实时 表示 。 如 果 valid 属 性 为 false， 表 明 对 应 控 
件 无 效 ， 此 时 应 该 至 少 有 一 个 别 的 属性 为 tre 来 指出 验证 错误 一 个 或 
多 个 7 的 性 质 。 


现 。 


Form 验 证 是 一 个 HIML5 特 性 ， 在 写作 本 书 的 时 候 还 没有 广泛 实 


属性 

readonly boolean customError 
一 段 脚 本 在 当前 元 素 上 调用 FormControl.setCustomValidity()。 
readonly boolean patternMismatch 
输入 与 pattern 正 则 表达 式 不 匹配 。 
readonly boolean rangeOverfow 
输入 太 大 了 。 

readonly boolean rangeUnderfow 
输入 太 小 了 。 

readonly boolean stepMismatch 
输入 与 指定 step 不 匹配 。 

readonly boolean tooLong 

输入 太 长 了 。 


readonly boolean typeMismatch 


输入 类 型 有 误 。 
readonly boolean valid 


如 果 本 属性 为 tue， 则 对 应 表单 控件 是 有 效 的 ， 其 他 属性 都 将 为 
false。 如 果 本 属性 为 false， 则 对 应 表单 控件 无 效 ， 其 他 属性 至 少 有 一 个 


为 true。 





readonly boolean valueMissing 
必 填 的 表单 元 素 为 空 。 
Geocoordinates 
地 理 位 置 
本 类 型 的 对 象 表示 地 球 表面 的 一 个 位 置 。 
属性 
readonly double accuracy 
纬度 (atitude) 与 经 度 (longitude) 值 的 精确 度 ， 单 位 为 米 。 
readonly double altitude 
海拔 高 度 ， 单 位 为 米 ， 如 宋 不 可 用 则 为 null。 
readonly double altitudeAccuracy 


高 度 (altitude)〉 属性 的 精确 度 ， 单 位 为 米 。 如 果 altitude 为 null， 则 
altitudeAccuracy 也 为 null。 


readonly double heading 


用 户 前 进 的 方向 ， 从 正 北 开 始 顺 时 针 方 向 的 角度 ， 如 果 朝 向 不 可 用 
则 为 nul。 如 果 朝 向 信息 可 用 但 速度 为 0， 则 heading 值 将 为 NaN。 





readonly double latitude 


用 户 相 对 于 赤道 以 北 的 纬度 ， 十 进 制 度数 制 。 

readonly double longitude 

用 户 相 对 于 格林 尼 治 子午 线 以 东 的 经 度 ， 十 进 制 度数 制 。 
readonly double speed 


用 户 的 速度 ， 单 位 为 米 每 秒 ， 如 采 速 度 信息 不 可 用 则 为 nul 1。 这 个 
属性 永远 不 会 为 负数 值 。 可 参见 heading。 


Geolocation 

取得 用 户 的 纬度 和 经 度 

Geolocation 对 象 定 义 了 确定 用 户 精 确 地 理 位 置 的 方法 。 在 文 持 它 的 
浏览 器 中 ，Geolocation 对 象 可 以 通过 访问 navigator.geolocation 形 式 的 


Navigator 对 象 来 访问 。 这 /| ， 方法 依赖 一 些 其 他 类 型 : 位 置信 息 以 
Geoposition 对 象 的 形式 报告 ， 错 误 以 GeolocationError 对 象 的 形式 报告 。 





方法 
void clearWatch(long watchId) 


停止 监视 用 户 的 位 置 。 参 数 watchId 的 值 必须 是 对 应 的 
watchPosition() 方 法 的 返回 值 。 


void getCurrentPosition(function success,[function error],[object 
options]) 使 用 任何 指定 的 options (参见 下 面 的 option 的 属性 列表 〉 来 异步 
地 确定 用 户 的 位 置 。 这 个 方法 会 立刻 返回 ， 当 用 户 的 位 置 可 用 时 ， 它 将 
传 入 一 个 Geoposition 对 象 到 指定 的 success 加 方法 success 中 。 如 果 发 生 
了 错误 可 能 用 户 不 允许 共享 他 的 地 理 信息 ) ， 并 且 定 义 了 error 回 调 方 
法 error， 它 将 传 入 一 个 GeolocationError 对 依 到 错误 误 回 调 方法 中 。 


long watchPosition(function Success,[function error],[object options]) 





这 个 方法 类 似 于 getCurrentPosition()， 但 在 确定 用 户 当 前 位 置 之 
后 ， 它 会 继续 监视 用 户 的 位 置 并 在 每 次 发 现 位 置 明显 改变 后 调用 success 





回调 函数 。 本 方法 的 返回 值 是 一 个 数字 ， 可 将 这 个 数字 传 入 
clearWatch() 来 停止 追踪 用 户 的 位 置 。 


选项 


传 入 getCurrentPosition() 或 watchPosition() 的 参数 option 是 一 个 常规 的 
JavaScript 对 象 ， 带 有 零 个 或 多 个 下 列 属性 : 








boolean enableHighAccuracy 


这 个 选项 提示 需要 一 个 高 精确 度 的 位 置 ， 即 使 这 需要 更 长 时 间 来 确 
定 或 者 需要 使 用 更 多 的 电池 功率 。 默 认为 false。 在 支持 通过 Wi-Ei 信 和 号 
或 GPS 确定 位 置 的 设备 上 ， 将 这 个 选项 设置 为 tue 一 般 意味 着 “使 用 
GPS”。 





long maximumAge 


这 个 选项 指定 传 入 successCallback 的 第 一 个 Geoposition 对 象 可 接受 
的 最 长 生存 时 间 (单位 为 之 秒 )。 默 认为 0， 意 思 是 每 次 调用 
getCurrentPosition() 或 watchPosition() 将 请 求 一 次 新 的 位 置 修正 。 比 如 ， 
如 果 将 这 个 选项 设置 为 60 000， 将 允许 返回 任意 一 个 在 最 近 一 分 钟 内 确 
定 的 Geoposition。 





long timeout 


这 个 选项 指定 了 请 求 者 愿意 等 竺 一 次 位 置 修正 的 时 间 ， 单 位 为 宣 
秒 。 默 认 值 为 mnfinity。 如 果 过 去 的 时 间 超 过 timeout 坚 秒 ， 则 会 调用 
errorCallback。 注 意 ， 询 问 用 户 是 否 同意 共享 位 置信 息 的 时 间 不 算 在 
timeout 值 内 。 














GeolocationError 
查询 用 户 位 置 时 出 现 的 错误 


如 果 确 定 用 户 位 置 的 尝试 失败 了 ， 错 误 回 调 函 数 将 通过 一 个 描述 错 
误 原 因 的 GeolocationError 对 象 调用 。 


Am _E 
种 量 


这 些 常 量 是 code 属 性 可 能 的 值 : 
unsigned short PERMISSION_DENIED=1 
用 户 不 允许 共享 他 或 她 的 位 置信 息 。 


unsigned short POSITION_UNAVAILABLE=2 





由 于 未 指定 原因 ， 位 置 不 能 确定 。 例 如 ， 这 可 能 是 由 于 网 络 错误 等 
引起 的 。 


unsigned short TIMEOUT=3 


在 分 配 的 时 间 内 “人 参见 Geolocation 中 描述 的 timeout 选 项 ) 不 能 确定 
位 置信 息 。 


属性 
readonly unsigned short code 
这 个 属性 的 值 可 能 为 上 面 3 个 值 之 一 。 


readonly string message 





天 于 错误 的 更 多 信息 的 消 妃 。 这 条 消 轧 有 助 于 调试 ， 但 不 适合 同 最 
终 用 户 显示 。 


Geoposition 

时 间 惟 位置 报告 

Geoposition 对 象 表示 指定 时 间 的 用 户 的 地 理 信 息 。 这 类 对 象 只 有 两 
个 属性 : 一 个 时 间 惟 和 一 个 保存 了 实际 位 置 属性 的 Geocoordinates 对 象 
的 引用 。 

属性 


readonly Geocoordinates coords 


这 个 属性 引用 一 个 Geocoordinates 对 象 ， 该 对 象 的 属性 指定 用 户 的 
纬度 、 经 度 等 信息 。 


readonly unsigned long timestamp 


这 些 坐标 有 效 的 时 刻 ， 形式 为 纪元 开始 后 的 坚 秒 数 。 如 果 需 要 ， 可 
以 使 用 这 个 值 来 创建 一 个 Date 对 象 。 


HashChangeEvent 
hashchange 事 件 的 event 对 象 


上 vent 


当 文 档 URL 的 片断 标识 符 URL 中 以 哈 希 标识 “#? 开 始 的 部 分 发 
生变 化 时 ， 浏 览 器 将 触发 一 个 hashchange 事 件 。 这 可 能 是 因为 一 0 
改变 了 Location 对 象 的 hash 属 性 ， 也 可 能 是 因为 用 户 使 用 了 浏览 器 的 “ 返 
回 * 或 “前 进 ” 授 钮 在 浏览 器 的 历史 中 穿行 。 这 两 种 情况 都 会 触发 一 个 
hashchange 事 件 。 对 应 的 事件 对 象 是 HashChangeEvent。 二 
location.hash 的 历史 管理 以 及 hashchange 事 件 的 更 多 信息 请 参考 22.2 节 。 


属性 








readonly string newURL 


这 个 属性 保存 location.href 的 新 值 。 注 意 这 是 完整 的 URL， 而 不 仅仅 
是 它 的 hash 部 分 。 


readonly string oldURL 
这 个 属性 保存 location.href 的 老 值 。 


History 
窗口 的 浏览 历史 


History 对 象 表示 窗口 的 浏览 历史 。 但 是 ， 由 于 隐私 原因 ， 它 不 允许 
脚本 读 取 曾经 访问 过 的 真实 的 URL。History 对 象 的 方法 允许 脚本 将 窗口 








在 浏览 历史 中 同 前 或 癌 后 移动 ， 也 可 以 添加 新 的 条 目 到 浏览 历史 中 。 
属性 
readonly long length 


这 个 属性 指明 浏览 器 历史 列表 中 的 条 目 数 目 。 由 于 无 法 知道 当前 显 
示 的 文档 在 这 个 列表 中 的 索引 ， 因 此 知道 这 个 列表 的 大 小 没什么 特别 的 


用 途 。 





方法 
void back() 


back0 方 法 将 让 当前 History 对 象 所 属 的 窗口 或 框架 页 面 重新 访问 在 
当前 URL 之 前 刚 访问 过 的 URL 如果 存 在 的 话 )。 调 用 这 个 方法 效果 等 
同 于 单 击 浏览 器 的 后退? 按钮 。 也 等 同 于 : 














history.go(-1); 





void forward() 


forward() 方 法 将 让 当前 History 对 象 所 属 的 窗口 或 框 洪 页 面 重 新 访问 
在 当前 URL 之 后 紧 接着 访问 过 的 URL (如 果 存 在 的 话 ) 。 调 用 这 个 方法 
效果 等 同 于 单 击 浏览 占 的 “前 进 ” 按 钮 。 也 等 同 于 : 














history.go(1); 





void go([long delta]) 


History.go() 方 法 需要 一 个 整数 参数 ， 将 引发 浏览 器 访问 由 History 对 
象 维护 的 浏览 器 历史 中 的 距 当 前 位 置 指定 数目 位 置 的 URL。 如 果 参 数 为 
正 数 ， 则 浏览 器 沿 着 列表 同 前 移动 ， 如 果 为 负数 则 同 后 移动 。 也 就 古 
说 ， 调 用 history.go(-1) 等 同 于 调用 history.back()， 也 与 单 击 “ 后 退 ” 按 钮 效 
0 
文档 。 























void pushState(any data,string title,[string ur]]) 


这 个 方法 添加 一 个 新 的 条 目 到 窗口 的 浏览 历史 中 ， a 个 由 data 
“i 定 的 tile 和 unl 组 成 的 结构 化 副本 (参见 22.2 节 的 “结构 性 复 
制 ”) 。 如 果 用 户 迟 些 使 用 浏览 器 的 历史 导航 机 制 回 到 这 个 保存 的 状 
态 ， 一 个 popstate 事 件 将 在 当前 窗口 上 触发 ， 对 应 的 PopStateEvent 对 象 
将 在 它 的 state 属 性 中 维护 data 的 另 一 个 副本 。 


参数 title 提 供 当 前 状态 的 名 字 ， 浏 览 器 可 能 会 在 它 的 历史 UI 中 显示 
这 个 名 字 。 在 写作 本 书 的 时 候 ， 浏 览 器 忽略 这 个 参数 ) 。 如 果 指 定 参 
数 url， 它 将 显示 在 地 址 栏 中 ， 并 且 当 前 状态 将 可 永久 保存 并 可 保存 为 书 
签 或 与 他 人 分 享 。url 是 相对 于 当前 文档 的 地 址 解析 。 如 果 url 是 一 个 绝 
对 URL， 它 必须 与 当前 文档 同 源 。 使 用 URL 的 一 个 通用 方法 是 只 使 用 
以 “ 拓 开 头 的 卢 段 标识 符 。 








void replaceState(any data,string title,[string url]) 


这 个 方法 类 似 于 pushState()， 个 同 之 外 大 已 不 是 在 窗口 的 浏览 历史 
We 目 ， 而 是 将 当前 条 目 用 新 的 状态 data、title 以 及 ur 更 
新 


HTMLCollection 
可 用 键 名 或 数字 访问 的 元 素 集合 
HTMLCollection 是 一 个 由 Element 对 象 组 成 的 只 读 的 类 数组 对 象 ， 


它 也 定义 了 与 集合 此 的 元 素 的 name 及 id 值 对 应 的 属性 。Document 对 象 定义 
了 如 forms 和 image 等 HTMLCollection 属 性 。 








HTMLCollection 对 象 定义 了 item0 和 namedItem() 方 法 ， 用 于 根据 位 
置 或 名 字 检 索 元 素 ， 不 过 几乎 没有 使 用 它们 的 必要 : 可 以 简单 地 将 
HTMLCollection 当 做 JavaScript 对 象 处 理 并 访问 它 的 属性 及 数组 元 素 。 比 
如 : 











document .images[0]//AHTMLCollection 中 一 个 编号 的 元 素 
document .forms.address//HTMLCollection 中 一 个 命名 的 元 素 








属性 


readonly unsigned long length 


当前 集合 中 的 元 系数 目 。 
方法 


Element item(unsigned long index) 


返回 集合 中 索引 为 index 的 元 素 ， 如 果 index 出 界 了 则 返回 null。 也 可 
ee 
法 。 


object namedItem(string name) 


从 集合 中 返回 第 一 个 id 或 name 属 性 值 为 参数 name 的 元 素 ， 如 果 不 存 
在 对 应 元 素 则 返回 nul。 也 可 以 通过 在 数组 方 括 写 中 指定 元 素 名 的 方式 
来 代替 显 式 地 调用 这 个 方法 。 





HI1MLDocument 


参见 Document 


HTMLElement 
参见 Element 
HTIMLFormControlsCollection 
表单 控件 的 一 个 类 数组 对 象 


HTMLFormControlsCollection 是 一 种 特殊 的 HTMLCollection， 用 于 
Form 元 素 表 示 表 单 控件 的 集合 。 类 似 于 HITMLCollection， 可 以 像 数 组 一 
样 使 用 数字 作为 它 的 索引 ， 也 可 以 将 它 看 做 一 个 对 象 并 通过 表单 控件 的 
name 或 id 进行 检索 。HTML 表 单 经 党 包含 多 个 name 属 性 值 相 同 的 控件 

(通常 是 单 选 按钮 或 复 选 枉 ) ，HTMLFormControlsCollection 处 理 它 们 
的 方式 与 普通 的 HTMLCollection 不 同 。 





读 取 HIMLFormControlsCollection 的 属性 时 ， 如 果 表 单 包 含 多 个 同 
名 的 元 素 ，HIMLEFormControlsCollection 返 回 一 个 包含 共享 这 个 名 字 的 
所 有 表单 控件 组 成 的 类 数组 对 象 。 另 外 ， 返 回 的 类 数组 对 象 有 一 个 value 
属性 ， 值 为 第 一 个 选中 的 叫 这 个 名 字 的 单 选 按钮 的 value 属 性 值 。 甚 至 还 
可 以 通过 设置 这 个 value 属 性 来 选中 对 应 value 的 单 选 按钮 。 


HTMLOptionsCollection 
Option 元 素 的 集合 
HIMLCollection 


HTMLOptionsCollection 是 一 种 特殊 的 HIMLCollection， 表 示 一 个 
Select 元 素 中 的 Option 元 素 。 它 重 写 了 namedItem() 方 法 以 便 处 理 同 名 的 
多 个 Option 元 素 ， 它 也 定义 了 添加 和 删除 元 素 的 方法 。 由 于 历史 原因 ， 
HTMLOptionsCollection 定 义 了 一 个 可 写 的 langth 属 性 ， 可 通过 设置 这 个 
属性 来 截 短 或 扩展 对 应 的 集合 。 

属性 

unsigned long length 

这 个 属性 返回 集合 中 的 元 素 的 数目 。 然 而 ， 与 常规 HTMLCollection 
的 length 属 性 不 同 的 是 ， 它 不 是 只 读 的 。 如 果 将 它 设置 为 一 个 比 当 前 值 
小 的 数字 ，Option 元 素 的 集合 将 被 截 短 ， 不 在 集合 中 的 元 素 将 从 包含 的 


Select 元 素 中 移 除 。 如 果 将 lengh 设 置 为 一 个 比 当 前 值 大 的 数字 ， 衬 去 
option/ 二 元 素 将 被 创建 并 添加 到 Select 元 素 以 及 对 应 的 集合 中 。 








long selectedIndex 


集合 中 第 一 个 被 选中 的 Option 的 索引 ， 如 果 没 有 Option 被 选中 则 
为 -1。 可 以 通过 设置 这 个 属性 来 改变 选中 的 元 素 。 


方法 





void add(Element option,[any before]) 


将 option (必须 是 一 个 二 option 二 或 者 二 optgroup 二 元 素 ) 插入 到 当 


前 集合 (以 及 当前 Select 元 素 〉 中 before 指 定 的 位 置 处 。 如 果 before 为 
nul， 将 插入 到 尾部 。 如 果 before 是 一 个 整数 索引 ， 将 插入 到 这 个 索引 指 
定 的 元 素 的 前 面 。 如 果 before 是 男 一 个 Element，option 将 被 插入 到 这 个 
元 素 前 面 。 


Element item(unsigned long index) 





HTMLOptionsCollection 从 HTMLCollection 那 儿 继承 了 这 个 方法 。 它 
将 返回 指定 index 处 的 元 素 ， 如 果 index 出 界 了 则 返回 null。 也 可 以 用 直接 
使 用 方 括号 检索 集合 的 方式 代 蔡 显示 调用 这 个 方法 。 


object namedItem(string name) 


这 个 方法 返回 集合 中 具有 指定 名 字 或 ID 的 所 有 Option 元 素 。 如 果 没 
有 匹配 元 素 ， 它 将 返回 null。 如 果 有 一 个 Option 匹 配 ， 它 将 返回 这 个 元 
素 。 如 果 有 多 个 元 素 匹 配 ， 它 将 返回 由 这 些 元 素 组 成 的 一 个 NodeList。 
注意 ， 可 以 通过 使 用 name 作 为 属性 名 的 方式 直接 检索 一 个 
HTMLOptionsCollection 而 无 须 显 式 调用 这 个 方法 。 














void remove(long index) 


这 个 方法 移 除 集合 中 位 于 指定 index 处 的 二 option 二 元 素 。 如 果 调 用 
时 没 带 参数 或 者 参数 越界 了 ， 它 可 能 会 移 除 集合 中 的 第 一 个 元 素 。 


IFrame 

HTML=iframe> 

Node、Element 

IFrame 对 象 表 示 HTML 文 档 中 的 一 个 iframe 二 元 素 。 如 果 使 用 
getElementById0 或 类 似 的 查询 函数 来 查找 一 个 <<iframe>， 将 得 到 一 个 
IFrame 对 象 。 但 是 ， 如 果 通 过 Window 对 象 的 frames 属 性 来 查找 二 iframe 
二， 或 者 将 二 iframe> 之 的 name 作 为 包含 的 窗口 的 属性 来 得 找 ， 得 到 的 将 
是 该 二 iframe 二 代表 的 Window 对 象 。 


属性 





readonly Document contentDocument 


当前 和 iframe> 元 素 包 含 的 文档 。 如 果 <<iframe> 中 显示 的 文档 来 
自 不 同 的 源 ， 同 源 策略 〈 见 13.6.2 节 ) 将 会 阻止 对 该 文档 的 访问 。 


readonly Window contentWindow 


<iframe> 的 Window 对 象 。 (这 个 Window 对 象 的 frameElement 又 反 
回 引 用 这 个 IFrame 对 象 。) 


string height 


当前 <<iframe> 的 高 度 ， 单 位 为 CSS 像 素 。 这 个 属性 反映 对 应 的 
HTML height 属 性 。 


string name 


<iframe> 的 名 字 。 这 个 属性 反映 对 应 的 HIML name 属 性 ， 它 的 值 
可 用 于 Link 或 Form 对 象 的 target。 


readonly DOMSettableTokenList sandbox 


本 属性 反映 HITML5 sandbox 属 性 ， 人 允许 将 它 作 为 一 个 字符 串 或 者 一 
组 独立 标记 来 查询 及 设置 。 


sandbox 属 性 指明 浏览 器 应 该 对 二 iframe 二 中 的 不 可 信 的 内 容 实 施 额 
外 的 安全 限制 。 如 果 指 定 了 sandbox 但 值 为 空 ，<<iframe> 的 内 容 将 当做 
来 目 不 同 的 源 进 行 处 理 ， 将 不 允许 运行 脚本 ， 不 允许 显示 表单 ， 也 不 人 允 
许 改 变 它 包含 的 窗口 的 地 址 。sandbox 属 性 也 可 以 设置 为 一 个 由 空格 分 
隅 的 标记 列表 ， 其 中 每 一 项 都 指定 一 个 额外 的 安全 限制 。 可 用 的 标记 
有 "allow-same-origin"、"allow-scripts"、"allow-forms" 以 及 "allow-top- 
navigation 。 


写作 本 书 的 时 候 ，sandbox 属 性 还 没有 广泛 实现 。 更 多 细节 请 参考 
HTML 文档 。 








boolean seamless 


这 个 属性 反映 HTML 的 seamless 必 性。 如 果 它 的 值 为 tue， 浏 览 吉 将 


泻 染 对 应 天 iframe> 的 内 容 ， 让 它 看 起 来 像 是 包含 的 文档 的 一 部 分 。 这 
意味 着 ， 某 种 程度 上 ， 浏 览 器 必须 将 包含 的 文档 的 CSS 样 式 应 用 到 去 
iframe 之 的 内 容 上 。 


seamless 属 性 作为 HIML5 的 一 部 分 引入 ， 在 写作 本 书 的 时 候 还 没有 
三 入 实现 。 


String STC 
这 个 属性 反映 <<iframe> 的 Src 属 性: 它 指定 该 框架 内 容 的 URL。 
string Srcdoc 


这 个 属性 反映 对 应 的 srcdoc HTML 属 性 ， 它 以 一 个 字符 串 的 形式 指 
定 二 iframe 这 的 内 容 。srcdoc 属 性 最 近 才 作为 HTML5 的 一 部 分 引入 ， 在 
写作 本 书 的 时 候 还 没有 广泛 实现 。 

string width 


当前 天 iframe> 的 宽度 ， 单 位 为 CSS 像 素 。 这 个 属性 反映 对 应 的 
HTML width 属性 。 


Image 
HTIML 文 档 中 的 <<img> 
节点 、 元 素 


Image 对 象 以 <img 二 标签 的 形式 ， 代 表 舱 入 HTML 文 档 中 的 一 幅 图 
片 。 出 现在 文档 中 的 图 片 都 被 收集 在 document.images[] 数 组 中 。 


Image 对 象 的 src 属 性 是 最 有 趣 的 一 个 。 如 果 设 置 了 这 个 属性 ， 浏 览 
器 将 加 载 并 显示 新 的 值 指定 的 图 片 。 可 以 利用 这 个 特性 实现 一 些 可 视 化 
效果 ， 比 如 图 片 翻转 以 及 动画 。 示 例 请 参见 21.1 节 。 


可 以 通过 简单 地 使 用 document.createElement0O 或 Image0O 构 造 函数 创 
如 一 个 新 的 二 img 放 元 素来 创建 一 个 屏 大 外 Image 对 象 。 注 意 ， 这 个 构造 
水 数 没 有 用 于 指明 要 加 载 的 图 片 的 参数 ， 要 加 载 图 片 ， 只 须 简单 地 设置 


对 应 的 Image 对 象 的 src 属 性 。 要 实际 显示 这 张 图 片 ， 只 须 将 该 Image 对 象 
插入 到 文档 中 。 


构造 函数 
new Image([unsigned long width,unsigned long height]) 


可 以 通过 document.createElement(0 方 法 ， 像 创建 其 他 HTML 元 素 一 
样 创建 一 个 新 的 Image 元 素 。 不 过 ， 由 于 历史 原因 ， 客 户 端 JavaScript 也 
定义 了 Image0 构 造 函 数 用 于 完成 同样 的 任务 。 如 果 指 定 了 width 或 height 
参数 ， 它 们 将 为 对 应 img 二 标签 的 width 和 height 属 性 。 


属性 


除了 这 儿 列 出 的 属性 ，Image 元 素 也 有 下 面 的 HIML 属 性 ， 可 作为 
JavaScript 属 性 访问 : 





alt、usemap、ismap. 


readonly boolean complete 


如 果 没 有 指定 图 片 的 src， 或 者 图 片 已 经 完全 下 载 完 成 ， 则 此 属性 为 
true; 人 否则 为 false。 


unsigned long height 
i Se 异 硕 上 显示 的 高 度 ， 单 位 为 CSS 像 素 。 这 个 值 将 改变 图 

readonly unsigned long naturalHeight 

图 片 的 国有 高 度 。 


readonly unsigned long natural Width 


图 片 的 固有 宽度 。 


string src 


图 乒 的 URL。 设 置 这 个 属性 将 会 下 载 指定 的 图 乒 。 如 果 Image 对 象 
己 插 入 到 文档 中 了 ， 则 新 的 图 厂 将 会 显示 。 


unsigned long width 


图 片 在 屏幕 上 显示 的 实际 宽度 ， 单 位 为 CSS 像 系 。 设 置 这 个 值 将 改 
变 图 片 在 屏幕 上 的 宽度 。 


lImageData 


<canvas 之 的 像素 数据 数组 


ImageData 对 象 保存 一 块 矩 形 区 域 的 像素 的 红 、 绿 、 赣 以 及 
alpha 〈 透 明度 ) 分 量 。 可 通过 <<canvas 之 标签 的 
CanvasRenderingContext2D 对 象 的 createImageData() 或 者 getImageData() 方 
法 来 得 到 一 个 ImageData 对 象 。 


width 和 height 属 性 指定 像素 矩形 区 域 的 尺寸 。data 属 性 是 一 个 包含 
对 应 像素 数据 的 数组 。data[] 数 组 中 的 像素 以 从 左 到 右 、 从 上 到 下 的 顺 
序 出 现 。 每 一 个 像素 由 4 个 字 节 值 组 成 ， 分 别 表 示 R、G、B 及 A 分 量 。 
也 就 是 说 ， 在 一 个 ImageData 对 象 中 ， 位 于 (x,y) 处 的 像素 的 颜色 组 成 可 
以 以 类 似 这 样 的 方式 访问 : 








Var offset=(x+y*image.width)*4; 
var red=image.data[offset]; 

var green=image.data[offset+1]; 
var blue=image.data[offset+2]; 
var alpha=image.data[offset+3]; 





data[] 数 组 不 是 一 个 真正 的 JavaScript 数 组 ， 它 是 一 个 优化 过 的 类 数 
组 对 象 ， 其 元 素 的 值 为 0~255 之 间 的 整数 。 元 素 是 可 读 写 的 ， 但 数组 的 
长 度 是 固定 的 。 对 任意 一 个 ImageData 对 象 i 来 说 ，i.data.length 总 是 等 于 
iwidthxi heightx4。 


属性 





readonly byte[jdata 
一 个 只 读 的 引用 ， 指 代 一 个 元 系 为 字 市 的 可 读 写 的 类 数组 对 象 。 


readonly unsigned long height 
Image data 的 行 数 。 
readonly unsigned long width 
data 每 行 的 像素 数 。 

Input 
HTML<input> 元 素 
Node、Element、FormControl 


Input 对 象 表示 HTML 表 单 中 的 二 input 之 元 素 。 它 的 外 观 和 行为 取决 
于 它 的 type 属 性 : 比如， 一 个 Input 元 素 可 能 表示 一 个 简单 的 文本 输入 
框 、 一 个 复 选 框 、 一 个 单 选 框 、 一 个 按钮 、 一 个 文件 选择 元 素 。 由 于 去 
input 之 元 素 可 以 表示 如 此 多 种 表单 控件 ， 因 此 Input 元 素 是 最 复杂 的 元 素 
之 一 。 关 于 HTML 表 和 单 及 表单 元 素 的 概览 可 参见 15.9 节 。 注 意 Input 元 素 
的 一 些 重要 属性 (比如 type、value、name 以 及 form) 的 文档 在 
FormControl 参 考 页 中 。 


属性 
除了 这 儿 列 出 的 属性 ，Input 元 素 也 实现 了 Element 和 FormControl 定 


义 的 所 有 属性 。 这 个 列表 中 标 有 星 号 的 属性 是 HIML5 新 定义 的 ， 在 写 
作 本 书 的 时 候 还 没有 广泛 实现 。 











string accept 
当 type 属 性 为 "file" 时 ， 这 个 属性 是 一 个 以 运 号 分 隅 的 列表 ， 包 含 可 


选择 的 文件 的 MIME 类 型 。 字 符 串 "audio/*"、"video/*" 以 及 "image/*" 也 
是 合法 的 值 。 这 个 属性 是 accept 属 性 的 一 个 映射 。 








string autocomplete 


如 果 浏 览 器 可 以 根据 之 前 访问 会 话 的 值 预 填 这 个 Input 元 素 则 此 属性 
为 tue。 了 映射 autocomplete 属 性 。 也 可 参见 Form 的 autocomplete 属 性 。 


boolean checked 


适用 于 可 选中 的 input 元 素 ， 这 个 属性 指定 当前 元 素 是 否 “ 选 中 ”。 设 
置 这 个 属性 的 值 将 改变 对 应 input 元 系 的 可 视 外 观 。 


boolean defaultChecked 


适用 于 可 选中 的 input 元 素 ， 这 个 属性 指定 元 素 初 始 状 态 时 的 选中 情 
况 。 当 表单 被 重 置 后 ， 该 元 素 的 checked 属 性 将 被 重 置 为 这 个 属性 的 
值 。 它 是 checked 属 性 的 映射 。 











string defaultValue 


适用 于 具有 文本 值 的 元 素 ， 这 个 属性 保存 元 素 显 示 的 初始 值 。 当 表 
单 被 重 置 时 ， 元 系 将 被 重 置 为 这 个 值 。 它 是 value 属 性 的 映射 。 








readonly File[jfles 


适用 于 type 为 "file" 的 元 素 ， 这 个 属性 为 一 个 类 数组 对 象 ， 由 用 户 选 
中 的 File 对 象 或 其 他 对 象 组 成 。 


string formAction* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 
action 属 性 。 它 是 formaction 属 性 的 映射 。 


string formEnctype* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 
enctype 属 性 。 它 是 formenctype 属 性 的 映射 。 


String formMethod* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 
method 属 性 。 它 是 formethod 属 性 的 映射 。 


boolean formNoValidate* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 


noValidate 属 性 。 它 是 formnovalidate 属 性 的 映射 。 
String formTarget* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 禾 关 包含 的 表单 的 
target 属 性 。 它 是 formtarget 属 性 的 映射 。 


boolean indeterminate 


适用 于 复 选 枉 ， 这 个 属性 指定 该 元 素 是 否 处 于 不 确定 状态 人 
选中 也 不 是 未 选中 ) 。 这 个 属性 不 是 某 个 HIML 属 性 的 映射 ， 只 能 通过 
JavaScript 进 行 设置 。 





readonly Element list* 


一 个 二 datalist 二 元 素 ， 其 包含 的 二 option 放 元 素 可 被 浏览 器 用 做 提 
示 或 自动 完成 值 。 





string max* 
当前 Input 元 素 允 许 的 最 大 有 效 值 。 
long maxLength 


如 果 type 为 "text" 或 "password"， 这 个 属性 将 指定 允许 用 户 输入 的 最 
大 字符 数 。 注 意 它 与 size 属 性 不 一 样 。 它 是 maxlength 属 性 的 映射 。 


string min* 
当前 Input 元 素 允 许 的 最 小 有 效 值 。 
boolean multiple* 


如 果 对 应 input 元 素 可 能 接受 指定 type 的 多 个 值 则 本 属性 为 tue。 它 
是 multiple 属 性 的 映射 。 


string pattern* 


一 个 正则 表达 式 文本 ， 输 入 的 内 容 必 须 与 它 匹 配 ， 否 则 将 被 视 为 无 


效 。 这 个 属性 使 用 JavaScript 正 则 表达 式 语 法 (但 没有 开头 和 结尾 的 斜 
杠 ) ， 不 过 要 注意 这 个 属性 是 一 个 字符 串 ， 而 不 是 一 个 RegExp 对 象 。 
也 要 注意 ， 为 了 有 效 起 见 ， 整 个 输入 字符 串 都 必须 与 正则 表达 式 匹 配 ， 
而 不 只 是 一 个 子 串 。【〔 束 像 正则 表达 式 以 和 开头 并 以 $ 结 尾 一 样 。〉 这 个 
属性 是 pattern 属 性 的 映射 。 


string placeholder 


作为 对 用 户 的 提示 出 现在 Input 元 素 中 的 一 小 段 文本 字符 串 。 当 焦点 
处 于 该 元 素 上 时 ， 占 位 文本 将 消失 ， 同 时 输入 光标 将 出 现 。 这 个 属性 是 
placeholder 属 性 的 映射 。 





boolean readOnly 


如 果 为 true， 当 前 Input 元 素 将 不 可 编辑 。 它 是 readonly 属 性 的 映射 。 





boolean required* 


如 果 为 tue， 如 果 用 户 没 有 在 该 Input 元 素 中 输入 内 容 ， 则 容器 表单 
将 被 视 为 无 效 。 它 是 required 属 性 的 映射 。 


readonly Option selectedOption* 


如 果 指 定 了 list 属 性 ， 并 且 multiple 为 false， 这 个 属性 将 返回 列表 中 
选中 的 Option 元 素 子 节点 ， 如 果 存 在 这 样 的 子 节点 的 话 。 


unsigned long selectionEnd 


返回 或 设置 选中 文本 之 后 的 第 一 个 输入 字符 的 索引 。 也 可 参见 


setSelectionRange()。 


unsigned long selectionStart 


返回 或 设置 textarea 二 中 第 一 个 选中 字符 的 索引 。 也 可 参见 
setSelectionRange()。 


unsigned long size 


适用 于 允许 文本 输入 的 Input 元 素 ， 本 属性 指定 了 元 素 的 宽度 占 多 少 








字符 。 它 是 size 属 性 的 映射 。 注 意 与 maxLength 的 不 同 。 
String step* 
适用 于 数字 输入 类 型 (包括 日 期 及 时 间 输 入 〉， 这 个 属性 指定 了 允 


许 输入 的 值 的 粒度 或 步 长 大 小 。 这 个 属性 可 以 是 字符 串 "any" 或 者 一 个 
浮 点 数 。 它 是 step 属 性 的 映射 。 





Date valueAsDate* 

将 对 应 元 素 的 value (参见 FormControl〉 作 为 一 个 Date 对 象 返 回 。 
double valueAsNumber* 

将 对 应 元 素 的 value (参见 FormControl〉 作 为 一 个 数字 返回 。 

方法 

除了 这 儿 列 出 的 方法 ，Input 元 素 也 实现 了 Element 和 FormControl 所 


定义 的 所 有 方法 。 本 列表 中 带 有 星 写 标记 的 方法 是 在 HTML5 新 定义 
的 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 实现 。 











void select() 


这 个 方法 选中 当前 input 元 素 中 显示 的 所 有 文本 。 在 大 多 数 浏览 器 
中 ， 这 意味 着 对 应 文本 将 高 壳 显 示 ， 同 时 用 户 新 输入 的 文本 将 丛 换 这 段 
高 亮 显 示 的 文本 ， 而 不 是 在 它 后 面 追 加 。 








void setSelectionRange(unsigned long start,unsigned long end) 


这 个 方法 选中 当前 Input 元 素 中 显示 的 文本 ， 从 位 于 start 处 的 字符 开 
始 ， 直 到 《但 不 包含 ) 位 于 end 处 的 字符 。 


void stepDown([long D])* 
适用 于 文 持 step 属 性 的 元 素 ， 将 当前 值 减 少 n 个 步 长 (step) 。 


void stepUp([long n])* 


适用 于 文 持 step 属 性 的 元 系 ， 将 当前 值 增加 n 个 步 长 。 


jQuery 
jQuery 1.4 
jQuery 库 
描述 


这 是 jQuery 库 的 一 个 快速 参考 。 关 于 这 个 库 的 完整 细 市 以 及 用 例 见 
第 19 章 。 本 段 参考 的 组 织 与 格式 与 该 部 分 的 其 余 参 考 页 有 些 不 同 。 在 方 
法 签名 中 它 使 用 了 下 面 的 转换 。 参 数 sel] 是 jQuery 选择 左 。 参 数 idx 是 整数 
索引 。 参 数 elt 或 elts 古 文档 元 素 或 由 文档 元 系 组 成 的 类 数组 对 象 。 参 数 f 
是 回调 函数 ， 贬 僚 的 圆 括 写 用 于 声明 jQuery 将 传 入 提供 的 函数 的 参数 。 
方 括号 声明 可 选 参数 。 如 果 一 个 可 选 参数 后 面 紧 跟 独 一 个 等 号 和 一 个 
值 ， 那 个 值 将 在 参数 省 略 时 作为 默认 值 。 右 圆 括号 和 冒号 之 后 是 函数 或 
方法 的 返回 值 。 没 有 指定 返回 值 的 方法 将 返回 调用 它们 的 jQuery 对 象 。 


jQuery 工厂 函数 


jQuery 函数 是 若干 应 用 函数 的 一 个 命名 空间 ， 同 时 它 也 是 创建 一 个 
jQuery 对 象 的 工厂 方法 。jQuery0 可 以 以 下 面 展 示 的 各 种 方式 调用 ， 它 
总 是 返回 一 个 表示 一 个 文档 集合 (或 者 文档 对 象 本 身 〉 的 jQuery 对 象 。 
符号 $ 是 jQuery 的 别名 ， 在 下 面 的 各 种 方法 中 都 可 以 使 用 $0 来 代 蔡 
jQueryO): 





























jQuery(sel[,context=document]) 


返回 一 个 新 的 jQuery 对 象 ， 该 对 象 表示 的 文档 元 素 为 context 的 子孙 
节点 ， 并 且 匹 配 选 择 字 符 串 sel。 


jQuery(elts) 
返回 一 个 表示 指定 元 素 的 新 的 jQuery 对 象 。elts 可 以 是 单个 文档 元 


素 ， 也 可 以 是 一 个 由 文档 元 素 组 成 的 数组 或 类 数组 对 象 〈 比 如 一 个 
NodeList 或 其 他 jQuery 对 象 ) 。 





jQuery(html,[props]) 

将 html 作 为 一 个 HIML 格 式 的 字符 串 进 行 解 析 并 返回 一 个 新 的 
jQuery 对 象 ， 这 个 对 象 包含 html 字 符 串 中 定义 的 一 个 或 多 个 顶级 元 素 。 
如 果 html 描 述 了 一 个 单独 的 HIML 标 签 ， 则 参数 props 可 以 为 一 个 对 象 ， 
其 中 可 定义 这 个 新 建 元 素 的 HIML 属 性 或 事件 处 理 程 序 。 

jQuery() 

注册 函数 f， 当 document 加 载 完 成 并 且 就 绪 时 调用 。 如 果 document 
己 经 就 绕 ，f 将 作为 document 对 象 的 一 个 方法 立即 调用 。 返 回 一 个 只 包 
含 document 对 象 的 jQuery 对 象 。 

jQuery 选择 器 语法 


jQuery 选择 器 语法 与 CSS3 选 择 语法 非常 类 似 ，19.8.1 节 有 详细 介 
。 下 面 是 摘要 : 


简单 的 标签 、 类 以 及 ID 选 择 咒 


ASS 
Ld 


* tagname .Classname #id 
组 合 选择 器 
A B 8 是 A 的 子孙 市 点 
A > B B 是 A 的 子 节点 
A+B  B 是 紧 跟 着 A 的 兄弟 证 点 
A~B 8 是 A 的 兄弟 节点 


属性 过 滤器 


[attr] 

[attr=val] 
[attr!=val] 
[attr^=sval | 
[attr$=val] 
[attr*=val] 
[attr~=val] 


具有 某 个 属性 
具有 值 为 val 的 属性 
没有 值 为 val 的 属性 
属性 以 val 开 头 
属性 以 val 结 尾 

属性 包含 val 

属性 包含 单词 形式 的 val 


[attr|=val] 属性 以 val 及 一 个 可 选 的 连 字 符 开 始 
元 素 类 型 过 滤器 
:button :header :password :submit 
:checkbox :image :radio :text 
:file :input :reset 
:animated :disabled :hidden :visible 
:checked :enabled : :selected 
选择 位 置 过 滤器 
:eq(n) irst :last :nth(n) 
:even :gt(n) :lt(n) :odd 
文档 位 置 过 滤器 


:first-child 
:last-child 
:only-child 


其 他 过 滤器 


:nth-child(n) 
:nth-child(even) 
:nth-child(odd) 
:nth-child(xn+y) 


:Contains(text ) :not(selector) 


:empty :parent 
:has(selector) 


基本 jQuery 方法 及 属性 

这 些 是 jQuery 对 象 的 基本 方法 和 属性 。 它 们 不 会 改变 选项 或 选中 的 
元 素 ， 只 是 允许 查询 或 迭代 这 个 选中 元 素 的 集合 。 细 市 请 参见 19.1.2 
Ee 

context 


进行 选择 的 上 下 文本 或 根 节 点 。 它 是 $0 的 第 二 个 参数 ， 寿 不 指定 则 
是 Document 对 象 。 





each(f(idx,elt)) 


将 f 作 为 每 一 个 选中 元 素 的 方法 并 调用 一 次 。 如 果 该 函数 返回 false 
则 停止 迭代 。 返 回调 用 它 的 jQuery 对 象 。 


get(idx):elt 
get():array 


返回 jQuery 对 象 中 指定 索引 的 选中 元 素 。 也 可 以 使 用 常规 的 方 括号 
数组 索引 。 如 果 没 有 参数 ， 则 get() 和 toArray0 功 能 一 样 


index():int 

index(sel):int 

index(elt):int 

如 有 果 不 带 参数 ， 则 返回 第 一 个 选中 的 元 系 在 它 的 兄 第 节点 中 的 索 
如 果 带 一 个 选择 器 参数 ， 返 回 匹 配 选 择 器 sel 的 元 素 集合 中 第 一 个 选 


引 。 
中 元 素 的 索引 ， 如 果 没 有 找到 对 应 元 素 则 返回 -1。 如 果 带 一 个 元 素 参 
数 ， 则 返回 elt 在 选中 元 素 中 的 索引 ， 如 果 没 有 找到 对 应 元 系 则 返回 -1 














is(sel):boolean 

如 果 至 少 有 一 个 选中 元 素 也 匹配 sel 则 返回 true。 

length 

选中 元 素 的 数目 。 

map(f(idx,elt)):jQuery 

将 f 作 为 每 一 个 选中 元 素 的 方法 并 调用 一 次 ， 返 回 一 个 保存 返回 值 
人 

selector 

最 初 传 给 $0 的 选择 字符 串 。 

size():int 

返回 length 属 性 的 值 。 

toArray():array 

将 选中 元 素 作为 一 个 真实 的 数组 返回 。 

jQuery 选择 方法 

这 儿 描 述 的 方法 将 改变 选中 元 素 的 集合 ， 通 过 对 它们 的 过 滤 ， 可 能 
会 添加 新 的 元 素 ， 或 者 将 选中 元 素 作为 一 个 新 的 选择 的 起 点 。 在 jQuery 


1.4 及 之 后 的 版 本 中 ，jQuery 选 择 结果 总 是 按 文 档 中 的 顺序 排序 并 且 不 包 
含 重复 元 素 。 参 见 19.8.2 节 。 





add(sel,[context]) 
add(elts) 


add(html) 


add0 的 参数 将 传 入 $0， 返 回 的 选择 结果 将 与 当前 选择 结果 合并 。 


andSelf() 
将 前 一 个 选中 的 元 素 集合 (从 栈 中 ) 添加 到 当前 选择 结果 中 。 
children([sel]) 


选择 选中 元 系 的 子 市 点 。 如 果 不 指明 参数 则 选中 所 有 子 节 点 。 如 果 
指明 一 个 选择 器 ， 则 只 选择 匹配 的 子 节点 。 





closest(sel,[context]) 


选择 离 每 一 个 已 选择 元 素 最 近 的 祖先 元 素 ， 这 些 元 素 匹 配 sel 并 且 是 
context 的 子孙 元 素 。 如 果 省 略 context， 将 会 使 用 对 应 的 jQuery 对 象 的 


context 属 性 。 














contents() 
选择 每 一 个 选中 元 素 的 全 部 子 节点 ， 包 括 文本 节点 及 注释 。 
end() 





弹出 内 部 栈 ， 并 将 选择 结果 重 置 为 最 后 一 次 产生 改变 的 选择 方法 之 
前 的 状态 。 


ed(idx) 


只 选择 已 选中 元 素 中 指定 index 的 元 素 。 在 jQuery 1.4 中， 负数 索引 
将 从 尾部 开始 计数 。 


filter(sel) 
filter(elts) 
filter(f(idx):boolean) 


过 滤 选 择 结果 ， 让 它 只 包含 也 匹配 选择 右 sel 的 元 素 ， 或 者 只 包含 在 
类 数组 对 象 elts 中 的 元 素 ， 或 者 只 包含 将 断言 函数 f 作 为 元 素 的 方法 调用 


时 返回 true 的 元 素 。 


find(sel) 
选择 某 个 选中 元 素 的 所 有 匹配 sel 的 子孙 元 素 。 
first() 

只 选择 第 一 个 已 选中 的 元 素 。 

has(se]) 

has(elt) 


过 滤 选 择 结果 ， 让 它们 只 包含 这 些 选 中 元 素 : 它们 要 么 有 一 个 匹配 
sel 的 子孙 元 素 ， 要 么 是 elt 的 祖先 元 取 。 





last() 
只 选择 最 后 一 个 选中 的 元 素 。 
next([sel]) 


选择 每 个 已 选中 元 素 的 下 一 个 兄弟 节点 。 如 果 指 定 了 sel， 将 排除 那 
些 不 匹配 的 元 素 。 


nextAll([sel]) 


选择 每 个 已 选中 元 素 后 面 的 所 有 兄 第 三 把。 如 果 指 定 了 sel， 将 排除 
那些 不 匹配 的 元 素 。 








nextUntil(sel) 


选择 每 个 已 选中 元 素 后 面 的 所 有 兄弟 节点 ， 直 到 (但 不 包含 〉 第 一 
个 匹配 sel 的 兄弟 节点 。 








not(sel) 


not(elts) 


not(f(idx):boolean) 

这 是 filter() 的 反方 法 。 它 过 小 选择 结果 ， 并 排除 匹配 sel 的 元 素 ， 或 
者 包含 在 elts 中 的 元 素 ， 或 者 使 4 返回 true 的 元 素 。elts 可 以 是 一 个 单独 的 
元 素 ， 或 者 是 一 个 由 元 素 组 成 的 类 数组 对 象 。f 将 作为 每 一 个 选中 元 素 
的 方法 调用 。 
offsetParent() 
选择 距离 每 个 选中 元 素 位 置 最 近 的 祖先 元 素 。 
parent([sel]) 
选择 每 个 选中 元 系 的 父 元 素 。 如 果 指 定 了 sel， 将 排除 那些 不 匹配 的 





元 条 
parents([sel]) 


0 
元素。 


parentsUntil(sel) 


A ee De 
元 系 。 


prev([sel]) 


选择 每 个 选中 元 素 的 前 一 个 兄弟 元 么 。 如 果 指 定 了 sel， 将 排除 那些 
不 匹配 的 元 素 。 


prevAll([sel]) 


选择 每 个 选中 元 素 之 前 的 所 有 兄弟 元 系 。 如 果 指 定 了 sel， 将 排除 那 
些 不 匹配 的 元 素 。 








prevUntil(sel) 
选择 每 个 选中 元 素 之 前 的 兄弟 元 素 ， 直 到 (但 不 包含 ) 第 一 个 匹配 





sel 的 元 率 。 


pushStack(elts) 

将 当前 选择 结果 压 入 栈 中 ， 以 便 之 后 可 以 使 用 end() 方 法 还 原 它 ， 然 
后 选择 elts 数 组 (或 类 数组 对 象 》 中 的 元 素 。 

siblings([sel]) 





选择 每 个 选中 元 素 的 兄弟 节点 ， 不 包含 该 元 素 自己 。 如 果 指定 了 
sel， 将 排除 所 有 不 匹配 的 兄弟 节点 。 


slice(startidx,[endidx]) 
过 滤 选 择 结果 ， 使 它 只 包含 索引 大 于 等 于 startidx 并 小 于 但 不 等 


于 ) endidx 的 元 素 。 负 索引 将 从 选择 结 末 的 尾部 开始 计数 。 如 果 省 略 
endidx， 将 使 用 length 属 性 。 





jQuery 元 素 方法 

这 儿 描 述 的 方法 用 于 查询 及 设置 元 素 的 HIML 属 性 和 CSS 样 式 属 
性 。 带 有 名 为 current 的 参数 的 setter 回 调 函 数 将 被 传 入 它 正 在 计算 新 值 的 
任何 对 象 的 当前 值 。 参 见 19.2 节 。 


addClass(names ) 


addClass(f(idx,current):names) 


添加 指定 的 一 个 或 多 个 CSS 类 名 到 每 一 个 选中 元 系 的 class 属 性 中 。 
或 者 将 f 作 为 每 个 元 素 的 方法 调用 并 计算 出 要 添加 的 类 名 。 


attr(name):value 
attr(name,value) 
attr(name,f(idx,current):value) 


attr(obj ) 





如 果 只 传 入 一 个 字符 串 参 数 ， 则 返回 第 一 个 选中 元 对 的 指定 名 字 的 
属性 值 。 如 有 果 传 入 两 个 参数 ， 则 将 所 有 选中 元 素 的 指定 名 字 的 属性 设置 
为 指定 的 value， 或 者 将 ff 为 每 个 元 系 的 方法 调用 以 计算 出 新 的 值 。 如 
果 只 传 入 一 个 对 象 参 数 ， 则 将 这 个 对 象 的 属性 名 作为 元 素 的 属性 名 ， 同 
时 对 象 的 属性 值 为 作 元 素 的 属性 值 或 属性 计算 函数 。 

css(name):value 

css(name,value) 

css(name,f(idx,current):value) 

css(obj) 

类 似 于 attr()， 但 它 查 询 或 设置 CSS 格 式 属 性 ， 而 不 是 HTML 属 性 。 

data():obj 

data(key):value 

data(key,value) 

data(obj) 

如 果 不 带 参数 ， 则 返回 第 一 个 选中 元 素 的 data 对 象 。 如 果 传 入 一 个 
字符 串 参数 ， 则 返回 对 应 data 对 象 的 指定 名 字 的 属性 的 值 。 如 果 传 入 两 


个 参数 ， 则 将 所 有 选中 元 素 的 对 应 data 对 象 指 定名 字 的 属性 设置 为 指定 
value。 如 果 传 入 一 个 对 象 参数 ， 则 用 筷 昔 换 所 有 选中 元 素 的 data 对 象 。 





hasClass(name):boolean 

如 果 任 意 一 个 选中 元 素 的 class 属 性 中 包含 name 则 返回 true。 
height():int 

height(h) 


height(f(idx,current):int) 


返回 第 一 个 选中 元 素 的 高度 不 包含 内 边 距 、 边 框 和 外 边 距 ) ， 或 
者 将 所 有 选中 元 素 的 高 度 设 为 nb， 或 者 将 f 作 为 每 个 元 素 的 方法 调用 后 计 
算出 的 值 。 

innerHeight():int 

返回 第 一 个 选中 元 素 的 高 度 加 上 内 边 距 。 

innerWidth():int 


返回 第 一 个 选中 元 素 的 宽度 加 上 内 边 距 。 





offset():coords 

offset(coords) 

offset(f(idx,current):coords) 

返回 第 一 个 选中 元 素 〈 在 ) 的 X 及 Y 位 置 ， 或 者 将 所 有 选中 元 素 的 
位 置 设 为 coords 或 将 ff 为 每 个 元 素 的 方法 调用 计算 出 来 的 值 。 坐 标 是 一 
个 对 象 ， 具 有 top 和 jleft 属 性 。 

offsetParent():jQuery 


选择 距离 每 个 选中 元 素 位 置 最 近 的 祖先 元 素 ， 并 在 一 个 新 的 jQuery 
对 象 中 返回 它们 。 





outerHeight([margins=false]):int 


返回 第 一 个 选中 元 素 的 高 度 加 内 边 距 和 边框 的 值 ， 如 果 margins 为 
true， 则 再 加 上 外 边 距 。 


outerWidth([margins=false]):int 


返回 第 一 个 选中 元 素 的 宽度 加 内 边 距 和 边框 的 值 ， 如 果 margins 为 
true， 则 再 加 上 外 边 距 。 


position():coords 





返回 第 一 个 选中 元 素 相对 于 它 位 置 最 近 的 祖先 的 位 置 。 返 回 值 是 一 
个 带 top 和 1left 属 性 的 对 象 。 


removeAttr(name) 


从 所 有 选中 元 系 中 移 除 指定 名 字 的 属性 。 





removeClass(names) 


removeClass(f(idx,current):names) 


从 所 有 选中 元 系 的 class 属 性 中 移 除 一 个 或 多 个 指定 的 类 名 。 如 来 传 
入 的 不 是 字符 串 而 是 函数 ， 则 将 它 作 为 每 个 元 素 的 方法 调用 并 生成 要 删 
除 的 一 个 或 多 个 类 名 。 





removeData([key]) 


从 每 个 选中 元 系 的 data 对 象 中 删除 指定 名 字 的 属性 。 如 末 没 有 指定 
属性 名 ， 则 删除 整个 data 对 象 。 


scrollLeft():int 
scrollLeft(int) 


返回 第 一 个 选中 元 素 的 水 平 深 动 条 的 位 置 ， 或 者 设置 所 有 选中 元 素 
的 水 平 深 动 条 的 位 置 。 


scrollTop():int 
scrollTop(int) 


返回 第 一 个 选中 元 素 的 垂直 深 动 条 的 位 置 ， 或 者 设置 所 有 选中 元 系 
的 垂 二 滚动 条 的 位 置 。 


toggleClass(names,[add]) 
toggleClass(f(idx,current):names,[add]) 
切换 每 个 选中 元 素 的 一 个 或 多 个 指定 类 名 。 如 果 指 定 f， 则 将 它 作 


为 每 个 选中 元 素 的 方法 调用 以 便 计 算出 要 切换 的 一 个 或 多 个 类 名 。 如 果 
add 为 true 或 false， 则 添加 或 删除 对 应 的 类 名 ， 而 不 是 切换 它们 。 


val():value 
val(value) 


val(f(idx,current)):value 


返回 第 一 个 选中 元 系 的 表单 值 或 选中 状态 ， 或 将 所 有 选中 元 系 的 值 
或 选中 状态 设置 为 value 或 者 将 f 作 为 每 个 元 素 的 方法 调用 计算 出 的 值 。 


width( ):int 





width(w) 

width(f(idx,current):int) 

返回 第 一 个 选中 元 素 的 宽度 不 包括 内 边 距 、 边 框 和 外 边 距 ) ， 或 
ei 宽度 设置 为 vw， 或 将 f 作 为 每 个 元 素 的 方法 调用 计算 出 

jQuery 插入 及 删除 方法 

这 儿 描 述 的 方法 将 插入 、 删 除 或 蔡 换 文档 内 容 。 在 下 面 的 方法 声明 
中 ， 参 数 content 可 能 是 一 个 jQuery 对 象 、 一 个 HTML 字 符 串 或 者 一 个 独 


立 的 文档 元 素 ， 参数 target 可 能 是 是 一 个 jQuery 对 象 、 一 个 独立 的 文档 元 素 
或 者 一 个 选择 器 字符 串 。 更 多 细节 请 参见 19.2.5 节 或 19.3 节 。 


after(content) 
after(f(idx):content) 


在 每 个 选中 元 素 后 面 插 入 content， 或 者 将 f 作 为 每 个 选中 元 素 的 方 
法 调用 ， 并 将 它 的 返回 值 插入 到 每 个 对 应 选中 元 素 后 面 。 


append(content) 


append(f(idx,html):content) 


把 content 退 加 到 每 个 选中 的 元 素 后 面 ， 或 将 f 作 为 每 个 选中 元 素 的 
方法 调用 ， 将 将 它 的 返回 值 退 加 到 每 个 选中 元 素 后 面 。 


appendTo(target):jQuery 


将 选中 元 素 追 加 到 每 个 指定 target 元 素 的 尾部 ， 如 果 有 多 个 目标 ， 
必要 时 复制 选中 元 素 。 


before(content) 

before(f(idx):content) 

类 似 于 after()， 但 在 选中 元 素 之 前 而 不 是 之 后 插入 。 

clone([data=false]):jQuery 

对 每 个 选中 元 系 进 行 尝试 复制 ， 返 回 一 个 表示 这 些 复制 对 象 的 新 
jQuery 对 象 。 如 果 data 为 tue， 则 也 会 复制 选中 元 素 对 应 的 data (包含 事 
件 处 理 程序 〉。 

detach([sel]) 

类 似 于 remove0， 但 不 删除 分 离 元 素 对 应 的 data。 

emptyW 

删除 所 有 选中 元 素 的 内 容 。 

html0:string 

html(htmlText) 

html(f(idx,current):htmlText) 

如 果 不 带 参数 ， 则 将 第 一 个 选中 元 素 以 HTML 格 式 化 的 字符 串 返 
回 。 如 果 传 入 一 个 参数 ， 则 将 所 有 选中 元 系 的 内 容 设 置 为 指定 的 
htmlText， 或 者 设置 为 将 f 作 为 这 些 元 素 的 方法 调用 时 的 返回 值 。 


insertAfter(target):jQuery 


在 每 个 target 元 素 之 后 插入 选中 的 元 素 ， 如 果 有 多 个 目标 ， 必 要 时 
复制 选中 元 素 。 


insertBefore(target):jQuery 


在 每 个 target 元 素 之 前 插入 选中 的 元 素 ， 如 果 有 多 个 目标 ， 必 要 时 
复制 选中 元 素 。 


prepend(content) 
prepend(f(idx,html):content) 


类 似 append()， 但 它 在 每 个 选中 元 素 的 开头 部 分 插入 content， 而 不 
是 在 结尾 部 分 。 


prependTo(target):jQuery 


类 似 appendTo0， 除 了 选中 元 素 是 插入 到 目标 元 素 的 开头 部 分 而 不 
是 结尾 部 分 。 


removel([sel]) 

从 文档 中 移 除 所 有 选中 元 素 或 所 有 匹配 sel 的 选中 元 素 ， 同 时 移 除 所 
有 与 它们 相关 的 数据 〈 包 括 事件 处 理 程序 ) 。 注 意 ， 移 除 的 元 素 将 不 再 
是 文档 的 一 部 分 ， 但 还 是 返回 的 jQuery 对 象 的 成 员 。 

replaceAll(target) 


将 选中 元 素 插 入 到 文档 中 并 蔡 换 每 一 个 target 元 系 ， 如 果 有 多 个 目 
标 ， 必 要 时 将 复制 选中 元 素 。 


replaceWith(content) 
replaceWith(f(idx,html):content) 


使 用 content 丛 换 每 个 选中 元 素 ， 或 将 f 作 为 每 个 选中 元 素 的 方法 调 
用 ， 传 入 元 系 的 索引 及 当前 HIML 内 容 ， 然 后 用 返回 值 答 换 对 应 元 系 。 


text():string 


text(plainText) 
text(f(idx,current):plainText) 


如 琳 不 带 参 数 ， 则 以 纯 文本 字符 串 的 形式 返回 第 一 个 选中 元 系 的 内 
容 。 如 有 果 传 入 一 个 参数 ， 则 将 所 有 选中 元 素 的 内 容 设置 为 指定 的 
plainText 或 将 作为 这 些 元 素 的 方法 调用 时 的 返回 值 。 


unwrap() 


移 除 每 个 选中 元 素 的 父 节 点 ， 将 它们 蔡 换 为 选中 元 素 及 其 兄弟 元 


wrap(wrapper) 
wrap(f(idx):wrappeT) 


使 用 wrapper 将 每 一 个 选中 元 素 包 庄 起 来 ， 如 果 有 多 个 选中 元 素 ， 
必要 时 会 复制 这 个 包装 元 素 。 如 果 传 入 的 是 一 个 函数 ， 则 将 它 作 为 每 个 
选中 元 素 的 方法 调用 以 计算 出 wrapper。wrapper 可 以 是 一 个 元 素 、 一 个 
J 一 个 选择 器 或 者 一 段 HTML 字 符 串 ， 但 它 必须 只 有 一 个 最 

云 几 条 。 





wrapAll(wrapper) 

使 用 wrapper 将 所 有 选中 元 素 作为 一 组 包 庄 起 来 ， 方 式 为 将 wrapper 
插入 到 第 一 个 选中 元 素 的 位 置 ， 然 后 把 所 有 选中 元 素 复制 到 wrapper 的 
最 内 层 元 素 中 。 

wrapInner(wrapper) 


wrapInner(f(idx):wrapper) 


类 似 wrapO0， 但 它 使 用 wrapper 〈 或 { 的 返回 值 ) 将 每 一 个 选中 元 素 
的 内 容 包 庄 起 来 ， 而 不 是 把 元 素 上 自身 包 事 起 来 。 


jQuery 事件 方法 
本 节 的 方法 用 于 注册 事件 处 理 程序 以 及 触发 事件 。 参 见 19.4 节 。 














event-typel() 
event-type(f(event)) 


将 f 注 册 为 event-type 的 处 理 程序 ， 或 触发 一 个 event-type 类 型 的 事 
件 。jQuery 定 义 了 下 面 这 些 使 用 这 个 模式 的 便捷 方法 : 


ajaxComplete() blur() focusin() mousedown() mouseup() 
ajaxError() change() focusout() mouseenter() resize() 
ajaxSend() click() keydown() mouseleave() scroll() 
ajaxStart() dblclick() keypress() mousemove() select() 
ajaxStop() error() keyup() mouseout() submit() 
ajaxSuccess() focus() 1oad () mouseover( ) unload() 


bind(type,[data],f(event)) 
bind(events) 


在 每 个 选中 元 素 上 将 f 注 册 为 指定 type 的 事件 的 处 理 程序 。 如 果 指 定 
了 data， 则 在 调用 { 之 前 先 将 它 添加 到 事件 对 象 上 。type 可 能 定义 了 多 种 
事件 类 型 ， 也 可 能 包含 命名 空间 。 


如 果 传 入 了 一 个 单独 的 对 象 ， 则 将 它 视 为 一 个 事件 类 型 到 处 理 程序 
男 数 的 映射 ， 并 在 每 个 选中 元 素 上 为 所 有 指定 的 事件 注册 处 理 程 序 。 





delegate(sel,type,[datal,f(event)) 


将 f 注 册 为 一 个 实时 事件 处 理 程序 。 当 类 型 为 type 的 事件 在 匹配 sel 的 
某 个 元 素 上 发 生 并 冒 泡 到 任意 一 个 选中 元 素 上 时 触发 {。 如 果 指 定 了 
data， 将 在 调用 f 之 前 把 它 添 加 到 事件 对 象 中 。 


die(type,[f(event)]) 
注销 由 live0 在 当前 选中 元 素 中 匹配 选择 器 字符 串 的 元 素 上 注册 的 类 


型 为 type 的 事件 的 实时 事件 处 理 程序 。 如 果 指 定 了 特定 的 事件 处 理 程序 
妆 数 f{， 则 只 注销 这 一 个 。 


hover(f(event)) 


hover(enter(event),leave(event)) 


在 所 有 选中 元 素 上 为 "mouseenter" 和 "mouseleave" 事 件 注册 处 理 程 
。 如 果 只 指定 了 一 个 方法 ， 则 将 它 同 时 用 做 两 个 事件 的 处 理 程序 。 


了 1 


live(type,[datal,f(event)) 


将 f 注 册 为 类 型 为 type 的 事件 的 实时 事件 处 理 程序 。 如 果 指 定 了 
data， 则 在 调用 f 之 前 将 它 添加 到 事件 对 象 中 。 这 个 方法 不 使 用 选中 元 素 
的 集合 ， 但 它 的确 要 用 到 选择 器 字符 串 以 及 当前 jQuery 对 象 的 context 对 
象 。 当 类 型 为 type 的 事件 冒 泡 到 context 对 象 ( 通 常 为 document) 并 且 事 
件 的 目标 元 素 匹 配 选 择 器 时 ， 将 触发 {。 参 见 delegate()。 








one(type,[datal,f(event)) 


one(events ) 


0 不 同 之 处 是 注册 的 事件 处 理 程序 将 在 执行 一 次 之 后 自 
动 注销 。 


ready({0)) 


注册 f 为 当 文 档 束 绪 时 调用 ， 或 者 如 果 文 档 已 经 束 绪 则 立刻 调用 
它 。 这 个 方法 用 不 到 选中 的 元 系 ， 它 和 $( 同 义 。 


toggle(fl(event),f2(event),...) 


在 所 有 选中 元 素 上 注册 一 个 "click" 事 件 处 理 程序 ， 这 个 处 理 程序 会 
在 指定 的 处 理 程序 函数 中 改变 (或 切换 ) 。 


trigger(type,[params]) 
trigger(event) 
在 所 有 选中 元 系 上 触发 一 个 类 型 为 ype 的 事件 ， 并 将 params 作 为 一 


个 额外 的 参数 传 给 事件 处 理 程序 。params 可 以 省 略 ， 可 以 是 一 个 单独 的 
值 ， 也 可 以 是 一 个 值 数 组 。 如 果 传 入 一 个 event 对 象 ， 则 它 的 type 属 性 将 


指定 事件 的 类 型 ， 其 余 属 性 将 复制 到 将 传 入 处 理 程序 的 事件 对 象 中 。 





triggerHandler(type,[params]) 
类 似 trigger0， 但 不 允许 触发 的 事件 冒 泡 或 触发 浏览 侨 的 默认 行 








unbind([type],[f(event)]) 


如 末 不 带 参数 ， 则 在 所 有 选中 元 系 上 注销 全 部 jQuery 事件 处 理 程 
序 。 如 果 传 入 一 个 参数 ， 则 在 所 有 选中 元 系 上 注销 类 型 为 ype 的 事件 的 
事件 处 理 程序 。 如 果 传 入 两 个 参数 ， 则 在 所 有 选中 元 素 上 类 型 作为 type 
事件 的 处 理 程 序 注 销 f。type 可 以 指定 多 个 事件 类 型 ， 也 可 以 包含 命名 空 
间 。 











undelegate() 

undelegate(sel,type,[f(event)]) 

如 果 不 带 参数 ， 则 注销 选中 元 系 委 派 的 所 有 实时 事件 处 理 程序 。 如 
条 传 入 两 个 参数 ， 则 注销 所 有 选中 元 又 中 匹配 sel 的 元 素 委派 的 类 型 为 
type 的 实时 事件 处 理 程序 。 如 采 传 入 三 个 参数 ， 则 只 注销 处 理 程序 f。 

jQuery 特效 及 动画 方法 


这 儿 描 述 的 方法 提供 了 视觉 特效 和 自 定 义 动画。 它们 大 多 数 都 返回 
调用 自己 的 jQuery 对 象 。 参 见 19.5 节 。 


动画 选项 





complete duration easing queue specialEasing step 


jQuery.fx.off 
将 这 个 属性 设置 为 true 会 禁用 所 有 特效 及 动画 。 
animate(props,opts) 


使 用 由 opts 定 义 的 选项 ， 在 每 个 选中 元 素 上 以 动画 方式 改变 由 props 


对 象 指定 的 CSS 属 性 。 这 两 个 对 象 的 细节 请 参见 19.5.2 节 。 
animate(props,[duration],[easing],[fO]) 
使 用 指定 的 duration 和 easing 函 数 ， 在 每 个 选中 元 素 上 以 动画 方式 改 
变 由 props 对 象 指定 的 CSS 属 性 。 动 画 完成 时 将 f 作 为 每 个 选中 元 素 的 方 
法 调用 。 
clearQueue([qname="fx"]) 
为 每 个 选中 元 素 清除 特效 队列 或 指定 名 字 的 队列 。 
delay(duration,[qname="fx"]) 
添加 指定 duration 的 延 时 到 特效 队列 或 指定 名 字 的 队列 中 。 
dequeue([qname="fx"]) 


移 除 并 调用 特效 队列 或 指定 名 字 队 列 中 的 下 一 个 函数 。 一 般 不 需要 
执行 这 个 操作 。 


fadeIn([duration=400],[fO]) 

fadeOut([duration=400],[{fO]) 

以 动画 的 方式 ， 在 指定 的 duration 毫 秒 内 改变 选中 元 素 的 透明 度 ， 
以 便 使 它 淡 入 或 淡出 。 完 成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 素 
的 方法 调用 。 

fadeTo(duration,opacity,[f()]) 

以 动画 的 方式 ， 在 指定 的 duration 毫 秒 内 将 选中 元 素 的 透明 度 改 变 
为 opacity。 完 成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 素 的 方法 调 
用 。 

hidel() 


hide(duration,[fO]) 


如 果 没 有 指定 参数 ， 则 立刻 隐藏 每 个 选中 元 系 。 否 则 ， 以 动画 的 方 
式 改 变 每 个 选中 元 素 的 尺寸 及 透明 度 ， 让 它们 在 duration 军 秒 之 后 隐 
藏 。 完 成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 素 的 方法 调用 。 

slideDown([duration=400],[fO]) 

slideUp([duration=400],[fO]) 

slideToggle([duration=400],[fO]) 


以 动画 的 方式 ， 在 指定 的 duration 时 间 内 改变 每 个 选中 元 素 的 高 
度 ， 以 便 显示 、 隐 藏 或 者 切换 元 素 的 可 见 性 。 完 成 时 ， 如 果 调 用 f， 则 
将 它 作 为 每 个 选中 元 素 的 方法 调用 。 


Show() 





show(duration,[fO]) 

如 果 不 带 参数 ， 则 立刻 显示 每 个 选中 元 系 。 人 否则 ， 以 动画 的 方式 改 
变 每 个 选中 元 素 的 尺寸 及 透明 度 ， 让 它们 在 duration 昌 秒 之 后 完全 可 
见 。 完 成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 系 的 方法 调用 。 

stop([clear=false],[jump=false]) 


在 所 有 选中 元 素 上 停止 当前 动画 (如 果 有 正在 运行 中 ) 。 如 果 clear 
为 tue， 则 同时 也 清除 每 个 元 素 的 特效 队列 。 如 果 jump 为 tue， 则 在 停止 
之 前 跳 到 动画 的 最 终 效果 。 


toggle([show]) 

toggle(duration,[f()]) 

如 果 show 为 ttre， 则 调用 show0 立 刻 显示 选中 元 素 。 如 果 show 为 
false， 则 调用 hide0 立 刻 隐 藏 选中 元 素 。 如 果 show 和 省略， 则 切换 元 叉 的 
可 见 性 。 


如 果 指 定 duration， 则 在 指定 时 间 内 ， 通 过 以 动画 改变 选中 元 素 的 
尺寸 和 透明 度 的 方式 ， 切 换 元 素 的 可 见 性 。 如 果 调 用 f， 则 将 
它 作 为 每 个 选中 元 素 的 方法 调用 。 





queue([qgname="fx"]):array 
queue([qgname="fx"],f(next)) 


queue([qgname="fx"],newq) 


如 琳 不 带 参 数 或 只 有 一 个 队列 名 ， 则 返回 第 一 个 选中 元 系 的 指定 名 
字 的 队列 。 如 果 传 入 一 个 函数 参数 ， 则 将 f 添 加 到 所 有 选中 元 素 的 指定 
名 字 的 队列 中 。 如 采 传 入 一 个 数组 参数 ， 则 将 所 有 选中 元 素 的 指定 名 字 
的 队列 从 换 为 由 函数 组 成 的 新 数组 newdq。 


jQuery Ajax 函数 


jQuery ”Ajax 大 多 数 相 关 的 功能 采用 了 工具 函数 的 形式 ， 而 不 是 方 
法 。 下 面 是 部 分 jQuery 库 中 最 复杂 的 函数 。 完 整 细节 请 参见 19.6 节 。 


Ajax 状态 人 码 








SUCCeSS error notmodified timeout parsererror 
Ajax 数据 类 型 

text html xml script json jsonp 
Ajax 事 件 


ajaxStart ajaxSend ajaxSuccess ajaxError ajaxComplete ajaxstop 


Ajax 选项 
async context global processData type 
beforeSend data ifModified scriptCharset url 
cache dataFilter jsonp suCCess username 
complete dataType jsonpCallback timeout xhr 
contentType error password traditional 


jQuery.ajax(options):XMLHttpRequest 


这 是 一 个 复杂 但 完全 通用 的 Ajax 函数 ， 是 jQuery 的 所 有 Ajax 工具 的 
基础 。 它 只 需要 一 个 对 象 作 为 参数 ， 该 对 象 的 属性 指定 了 对 应 的 Ajax 请 
求 的 所 有 细节 以 及 人 处理 服务 器 的 啊 应 的 处 理 程序 。 最 常用 选项 的 描述 在 
19.6.3 节 ， 回 调 选项 的 摘 述 也 在 19.6.3 节 。 


jQuery.ajaxSetup(options ) 


这 个 函数 设置 jQuery 的 Ajax 选项 的 默认 值 。 传 入 的 选项 对 象 的 类 型 
与 传 入 jQuery.ajax() 的 一 样 。 如 果 后 续 的 Ajax 请 求 没有 指定 自己 的 值 ， 
则 会 使 用 这 儿 指 定 的 值 。 这 个 函数 没有 返回 值 。 


jQuery.getJSON(url,[datal],[f(object,status)]):XMLHttpRequest 


异步 请 求 指定 的 ul， 同 时 添加 任意 指定 的 data。 接 收 到 响应 时 ， 将 
它 解析 为 JSJON， 然 后 将 啊 应 文本 传 入 到 回调 函数 f 中 。 如 果 存 在 用 于 请 
求 的 XMLHttpRequest 对 象 ， 则 返回 这 个 对 象 。 








jQuery.getScript(url,[f(text,status)]):XMLHttpRequest 


异步 请 求 指定 的 Ul。 啊 应 到 达 时 ， 将 它 作 为 一 个 脚本 执行 ， 然 后 将 
啊 应 文本 传 入 f。 如 果 存 在 用 于 请 求 的 XMLHttpRequest 对 象 ， 则 返回 这 
个 对 象 。 人 多 许 器 域 ， 但 跨 域 时 不 会 传 入 脚本 文本 给 f， 也 不 会 返回 
XMLHttpRequest 对 象 。 


jQuery.get(url,[datal],[f(data,status,xhr)],[type]):XMLHttpRequest 


生成 一 个 到 unl 的 异步 HTTP ” ”GET 请求 ， 如 果 指 明了 data， 则 将 它 作 
为 查询 参数 部 分 添加 到 URL 中 。 收 到 啊 应 时 ， 将 它 解释 为 指定 type， 或 
者 根据 啊 应 的 Content-Type 头 指定 的 类 型 ， 必 要 时 还 会 执行 或 解析 它 。 
最 后 ， 将 《可 能 解析 过 的 ) 啊 应 数据 连同 jQuery 状态 码 、 对 应 的 用 于 请 
求 的 XMLHttpReduest 对 象 传 入 到 回调 函数 f 中 。 该 XMLHttpRequest 对 象 
(如 果 存 在 的 话 〉 也 是 jQuery.getO 的 返回 值 。 


jQuery.post(url,[datal,[f(data,status,xhr)],[type]):XMLHttpRequest 


类 似 jQuery.get()， 但 生成 一 个 HTTP POST 请 求 ， 而 不 是 一 个 GET 请 


jQuery.param(o,[old=false]):string 


以 www-form-urlencoded 格 式 序 列 化 o 的 属性 名 和 属性 值 ， 以 便 将 它 
添加 到 一 个 URL 中 或 作为 一 个 HITP POST 请 求 的 正文 。 如 果 作 为 data 参 
数 传 入 一 个 对 象 ， 大 多 数 jQuery Ajax 函数 会 自动 完成 这 个 转换 。 如 果 你 
想 要 jQuery 1.3 风 格 的 浅 序 列 化 ， 请 把 true 作 为 第 二 个 参数 传 入 。 


jQuery.parseJSON(text):object 


解析 JSON 格 式 的 文本 并 返回 生成 的 对 象 。 当 请 求 JSON 编 码 的 数据 
时 ，jQuery 的 Ajax 函数 会 隐 式 调用 这 个 方法 。 





load(url,[datal,[f(text,status,xhr)]) 


异步 请 求 trl， 同 时 添加 指定 的 data。 收 到 响应 时 ， 将 它 解释 为 一 个 
HITML 字 符 串 ， 并 将 它 插入 到 每 个 选中 元 素 的 位 置 ， 蔡 换 现 存 的 内 容 。 
最 后 ， 将 f 作 为 每 个 选中 元 素 的 方法 调用 ， 参 数 为 响应 文本 、jQuery 状 态 
码 以 及 当前 请 求 的 XMLHttpRequest 对 象 。 


如 果 ur 包 含 一 个 空格 ， 则 该 空格 之 后 的 文本 将 用 做 选择 器 ， 啊 应 文 
档 中 只 有 匹配 选择 器 的 部 分 才 会 插入 到 选中 元 素 中 。 


不 同 于 大 多 数 jQuery Ajax 工具 ，load0 是 一 个 方法 ， 不 是 一 个 图 
数 。 类 似 于 大 多 数 jQuery 方法 ， 它 返回 调用 它 的 jQuery 对 象 。 


serialize():string 


序列 化 选中 表单 及 表单 元 素 的 名 字 与 值 ， 返 回 一 个 www-form- 
urlencoded 格 式 的 字符 串 。 


jQuery 工具 函数 


这 些 是 杂项 jQuery 函数 和 属性 不 是 方法 ) 。 更 多 细 市 请 参见 19.7 





开 


jQuery.boxModel 
jQuery.support.boxModel 的 一 个 弃 用 的 同义词 。 


jQuery.browser 





这 个 属性 指 代 一 个 标识 浏览 器 厂商 和 版 本 的 对 象 。 在 这 个 对 象 中 ， 
Internet Explorer 具 有 属性 msie，Firefox 具 有 属性 mozilla，Safari 和 和 
Chrome 具 有 属性 webkit，Opera 具 有 属性 opera。 它 的 version 属 性 就 是 浏 
览 器 的 版 本 号 。 


jQuery.contains(a,b):boolean 
如 果 文 档 元 素 a 包 含 元 素 b 则 返回 true。 


jQuery.data(elt):data 








jQuery.data(elt,key):value 
jQuery.data(elt,data) 


jQuery.data(elt,key,value) 


data0) 方 法 的 一 个 低级 版 本 。 如 果 传 入 一 个 元 素 参数 ， 则 返回 该 元 
素 的 data 对 象 。 如 果 传 入 一 个 元 素 以 及 一 个 字符 串 ， 则 从 该 元 素 的 data 
对 象 中 返回 指定 名 字 的 值 。 如 果 传 入 一 个 元 素 以 及 一 个 对 象 ， 则 设置 该 
元 素 的 data 对 象 。 如 果 传 入 一 个 元 素 、 一 个 字符 串 以 及 一 个 值 ， 则 设置 
该 元 素 的 data 对 象 中 指定 名 字 的 值 为 传 入 的 值 。 


jQuery.dequeue(elt,[qname="fx"]) 


移 除 并 调用 指定 元 素 指 定名 字 的 队列 中 的 第 一 个 函数 。 与 
$(elt).dequeue(qnqme) 相 同 。 





jQuery.each(o,f(name,value)):o 
jQuery.each(a,f(index,value)):a 


为 o 的 每 个 属性 调用 一 次 f， 传 入 对 应 的 属性 名 和 属性 值 ， 并 将 f 作 为 
属性 值 的 方法 调用 。 如 果 第 一 个 参数 十 一 个 数组 ， 或 一 个 类 数组 元 素 ， 
则 将 f 作 为 数组 中 每 个 元 素 的 方法 调用 ， 将 数组 的 索引 和 元 素 值 作为 参 
如 果 {f 返 回 false 则 友 代 将 停止 。 这 个 函数 返回 它 的 第 一 个 参 








jQuery.error(msg) 


抛 出 一 个 包含 msg 的 异 节 。 可 以 在 插件 中 调用 这 个 函数 ， 也 可 以 在 
调试 时 重 写 (例如 jQuery.error=alert) 它 。 


jQuery.extend(obj):object 
jQuery.extend([deep=false],target,obj…):object 


如 果 传 入 一 个 参数 ， 将 obj 的 属性 复制 到 全 局 的 jQuery 命名 空间 中 。 
如 果 传 入 两 个 或 更 多 参数 ， 则 按 顺 序 复 制 第 二 个 及 之 后 的 对 象 的 属性 到 
target 对 象 中 。 如 果 可 选 参数 deep 为 tue， 则 将 执行 深 找 贝 ， 属 性 将 会 递 
归 复 制 。 返 回 值 为 扩展 的 对 象 。 





jQuery.globalEval(code):void 


执行 指定 JavaScript code， 就 像 它 们 是 顶级 天 script> 一 样 。 没 有 返 
回 值 。 


jQuery.grep(a,f(eltidx):boolean,[invert=false]):array 


返回 一 个 新 数组 ， 其 中 只 包含 a 中 令 { 返 回 true 的 元 素 。 或 者 ， 如 果 
invert 为 true 的 话 ， 则 只 返回 令 f 返 回 false 的 元 素 。 


jQuery.inArray(V,aj:integer 


在 数组 或 类 数组 对 象 a 中 寻找 元 素 v， 如 果 找 到 则 返回 元 素 的 索引 ， 
否则 返回 -1 








jQuery.isArray(x):boolean 

仅 当 x 是 一 个 真正 的 JavaScript 数 组 时 返回 true。 
jQuery.isEmptyObject(x):boolean 

仅 当 x 不 包含 可 枚 举 属性 时 返回 true。 
jQuery.isFunction(x):boolean 


仅 当 x 是 一 个 JavaScript 函 数 时 返回 true。 


jQuery.isPlainObject(x):boolean 


仅 当 x 是 一 个 普通 JavaScript 对 象 时 返回 true， 比 如 一 个 由 对 象 直接 
量 (object literal) 创建 的 对 象 。 


jQuery.isXMLDoc(x):true 
仅 当 x 是 一 个 XML 文 档 或 一 个 XML 文 档 的 元 系 时 返回 true。 


jQuery.makeArray(a):array 
返回 一 个 新 的 JavaScript 数 组 ， 其 中 包含 和 类 数组 对 象 a 相 同 的 元 


jQuery.map(a,f(elt,idx)):array 


返回 一 个 新 的 数组 ， 值 为 对 于 数组 (或 类 数组 对 象 ) a 的 每 一 个 元 
人 返回 值 。 值 为 null 的 返回 值 将 忽略 ， 返 回 的 数组 是 平整 


jQuery.merge(a,b):array 


将 数组 b 中 的 元 系 奶 加 到 a 中 ， 并 返回 a。 参 数 可 以 是 类 数组 对 象 或 
真正 的 数组 。 


jQuery.noConflict([radical=false]) 


将 符号 $ 重 置 为 jQuery 库 加 载 前 的 值 并 返回 jQuery。 如 果 radical 为 
true， 则 也 还 原 符 号 jQuery 的 值 。 








jQuery.proxy(f,o):function 
jQuery.proxy(o,name):function 


返回 一 个 函数 ， 该 函数 将 f 作 为 o 的 一 个 方法 调用 ， 或 者 将 of[name] 作 
为 o 的 一 个 方法 调用 。 


jQuery.queue(elt,[qgname="fx"],[{]) 


得 询 或 设置 elt 的 指定 名 字 的 队列 ， 或 深 加 一 个 新 的 函数 f 到 这 个 队 
列 中 。 和 $(elt).gueue(gname,f) 等 同 。 


jQuery.removeData(elt,[name]):void 


站 从 elt 的 data 对 象 中 移 除 指定 名 字 的 属性 ， 或 移 除 对 应 的 data 对 象 本 


jQuery.Support 


一 个 对 象 ， 包 含 若干 描述 当前 浏览 器 的 特性 与 bug 的 属性 。 大 多 属 
性 只 有 插件 开发 者 感 兴趣 。 在 怪异 模式 (guirks ”mode) 的 下 浏览 左下 
jQuery.support.boxModel 为 false。 


jQuery.trim(s):string 


回 字符 串 s 的 一 个 副本 ， 其 中 去 反 了 头 部 和 尾部 的 空白 字符 。 





Keykvent 
参见 Event 
Label 
适用 于 表单 控件 的 <label>> 
Node、Element 
Label 对 象 表示 HIML 表 单 中 的 <label> 元 素 。 
属性 
readonly Element control 


当前 标签 关联 的 FormControl。 如 果 指 定 htmlFor， 这 个 属性 为 该 属 
性 指定 的 控件 。 和 否则， 这 个 属性 为 该 <label> 的 第 一 个 FormControl 子 元 
FE 


readonly Form form 


这 个 属性 指 代 包含 当前 标签 的 Form 元 素 。 或 者 ， 如 果 设 置 HTML 
form 属 性 ， 则 指 代 那个 ID 标识 的 Form 元 素 。 


string htmlFor 


这 个 属性 是 HIML for 属性 的 映射 。 由 于 for 是 JavaScript 中 的 保留 
词 ， 因 此 为 了 创建 一 个 合法 的 标识 符 ， 这 个 属性 名 以 "html" 为 前 经 。 如 
果 设 置 这 个 值 ， 这 个 属性 应 该 指定 与 本 标签 关联 的 FormControl 的 ID。 
(不 过 ， 通 常 有 更 简单 的 方法 ， 只 需要 简单 地 将 该 FormControl 作 为 本 
Label 的 一 个 子孙 元 素 即 可 。) 


Link 


HTML 超 链接 








Node、 Element 


HTML 链 接 由 <a>>、<area> 以 及 <<link> 元 素 创 建 。 入 a 之 标签 用 
于 在 文档 正文 中 创建 超 链 接 。 二 area 二 标签 是 一 个 较 少 用 到 的 特性 ， 用 
于 创建 < 图 片 热 区 ”。 扫 link> 标 签 用 于 在 文档 的 head 之 中 引用 外 部 资 
源 ， 如 样式 表 、 图 标 等 。 坟 a> 和 到 area> 元 素 在 JavaScript 中 的 表示 方 
式 相 同 。 雪 link 之 元素 在 JavaScript 中 的 表示 方式 有 些 不 同 ， 为 了 方便 ， 
这 两 类 链接 的 文档 在 这 儿 编 写 在 了 一 起 。 


当 一 个 代表 =a 二 元 系 的 Link 对 象 用 做 字符 串 时 ， 它 将 返回 它 的 href 
属性 的 值 。 
属性 


除了 这 儿 列 出 的 属性 ， 链 接 对 象 也 有 反映 基本 的 HTML 特 性 的 属 
性 : hreflang、media、ping、rel、sizes、target 以 及 type。 注 意 ， 返 回 链 
接 的 href 的 UREL 分 解 decomposition) 属性 (如 host 和 pathname) 只 适用 
于 <a> 以 及 <<area> 元 素 ， 不 适用 于 <link> 元 素 ， 同 时 ，sheet、 
disabled 以 及 relList 元 素 只 适用 于 引用 样式 表 的 <link 二 元 素 。 


boolean disabled 





适用 于 指 代 样 式 表 的 和 link> 元 系 ， 这 个 属性 控制 该 样式 表 是 否 应 
用 到 当前 文档 中 。 


string hash 

href 的 片断 标识 符 ， 包 含 开 头 的 哈 硕 《〈#) 标记 ， 例 如 "#results"。 
string host 

href 的 主机 名 和 端口 部 分 ， 例 如 "http:/ww.oreilly.com:1234"。 
string hostname 

href 的 主机 名 部 分 ， 例 如 "http:/www.oreilly.com"。 

string href 


链接 的 href 属 性 。 当 一 个 <a> 或 生 area> 元 素 用 做 字符 串 时 ， 它 将 
是 这 个 属性 返回 的 值 。 


string pathname 

href 的 path 部 分 ， 例 如 "catalog/search.html"。 
string port 

href 的 亲口 部 分 ， 例 如 “1234”。 

string protocol 

href 的 协议 部 分 ， 包 括 尾部 的 冒号 ， 例 如 "http:"。 


readonly DOMTokenL ist relList 





类 似 Element 的 classList 属 性 ， 这 个 属性 让 从 二 link 二 元 素 的 HTML 
rel 属 性 中 查询 、 设 置 以 及 删除 操作 更 容易 。 


string search 


href 的 查询 部 分 ， 包 括 开 头 的 问号 ， 例 如 "?q=JavaScript&m=10"。 
readonly CSSStyleSheet sheet 
适用 于 引用 样式 表 的 <link 二 元 素 ， 这 个 属性 表示 已 连接 的 样式 





string text 
二 a 二 或 二 area 二 元 素 的 纯 文本 内 容 。 等 同 于 Node.textContent。 
string title 


所 有 HTMYL 元 素 都 支持 title 属 性 ， 一 般 它 用 于 指定 该 元 素 的 工具 提 
示 信 息 文 本 。 如 果 在 rel 设 置 为 "alternate stylesheet" 的 二 link 二 元 素 上 设置 
这 个 属性 ， 将 为 它 提供 一 个 名 字 ， 用 户 将 可 以 通过 这 个 名 字 启 用 或 禁用 
该 样式 表 ， 如 果 浏 览 器 支持 蔡 换 样式 表 的 话 ， 指 定 的 title 还 可 能 以 某 种 
形式 出 现在 浏览 器 的 用 户 界 面 上 。 





Location 


代表 并 控制 浏览 器 的 地 址 


Window 或 Document 对 象 的 location 属 性 指 代 一 个 Location 对 象 ， 这 
个 对 象 代 表 当 前 文档 的 页 面 地 址 〈 即 "location" ) 。href 属 性 包含 该 文档 
的 完整 URL，Location 对 象 的 其 他 属性 各 目 摘 述 了 这 个 URE 的 一 部 分 
这 些 属性 很 像 Link 对 象 的 URL 属 性 。 当 Location 对 象 用 做 字符 串 时 ， 将 
返回 href 属 性 的 值 。 这 意味 着 可 以 在 使 用 location.href 表 达 式 的 地 方 使 用 


]ocation 。 


除了 代表 当前 浏览 器 地 址 ，Location 对 象 也 控制 这 个 地 址 。 如 果 把 
一 个 包含 URL 的 字符 串 赋值 给 Location 对 象 或 它 的 href 属 性 ，Web 浏 览 器 
将 加 载 并 显示 这 个 URL。 也 可 以 通过 设置 其 他 Location 属 性 改变 当前 
URL 的 一 部 分 的 方式 ， 让 浏览 器 加 载 一 个 新 的 文档 。 例 如 ， 如 果 设 置 
search 属 性 ， 浏 览 嚣 将 以 一 个 追加 的 新 查询 字符 串 重 新 加 载 当前 URL。 
如 果 设 置 hash 属 性 ， 浏 览 器 不 会 加 载 新 的 文档 ， 但 它 会 创建 一 个 新 的 历 
史记 录 。 并 且 ， 如 果 该 hash 属 性 标识 文档 中 的 一 个 元 素 ， 则 浏览 器 将 滚 
动 文档 ， 以 便 让 该 元 素 可 见 。 








属性 


Location 对 象 的 属性 指 代 当前 文档 的 URE 的 多 个 部 分 。 在 下 面 描述 
的 属性 中 ， 给 出 的 例子 都 是 这 个 (虚构 的 )URL 的 一 部 分 : 





http://www.oreilly.com:1234/catalog/search.html?q=JavaScript&m=10#results 





string hash 


URE 的 锚 部 分 ， 包 括 开 头 的 哈 希 〈#) 符号 ， 例 如 '" 太 esults"。 文 档 
URL 的 这 个 部 分 指定 文档 中 某 个 锚 的 名 字 。 


string host 

URL 的 主机 名 和 端口 部 分 ， 例 如 "http:/www.oreilly.com:1234"。 
string hostname 

URL 的 主机 名 部 分 ， 例 如 "http://www.oreilly.com"。 

string href 


文档 的 URL 的 完整 文本 ,不同 于 其 他 只 指定 URL 的 一 部 分 的 
Location 属 性 。 将 这 个 属性 设置 为 一 个 新 的 URL 将 导致 浏览 器 读 取 并 显 
示 新 URL 的 内 容 。 把 一 个 值 直接 赋值 给 Location 对 象 将 设置 这 个 属性 ， 
把 一 个 Location 对 象 用 做 一 个 字符 串 将 使 用 这 个 属性 的 值 。 


string pathname 
URL 的 路 径 名 部 分 ， 例 如 "/catalog/search.html"。 


string port 


URL 的 端口 部 分 ， 例 如 “1234”。 注 意 这 个 属性 是 一 个 字符 串 ， 而 不 
起 


string protocol 





URL 的 协议 部 分 ， 包 括 尾 部 的 冒号 ， 例 如 "http:"。 

string search 

URL 的 查询 部 分 ， 包 括 开 涉 的 问号 ， 例 如 "?q=JavaScript&m=10"。 
方法 

void assign(string url) 

加 载 并 显示 指定 url 的 内 容 ， 等 同 于 href 属 性 设置 为 url。 

void reload() 

重新 加 载 当 前 显示 的 文档 。 

void replace(string url) 


加 载 并 显示 指定 url 的 内 容 ， 在 浏览 器 的 历史 记录 中 答 换 措 当 前 文 
档 ， 这 样 浏览 器 的 “后 退 ? 按 钮 将 把 浏览 右 带 到 前 一 个 显示 的 文档 。 





MediaElement 

媒体 播放 元 素 

Node、 Element 

MediaElement 是 二 audio 过 和 二 video 放 元 素 共 同 的 超 类 。 这 两 个 元 
素 定 义 的 API 几 乎 一 模 一 样 ， 这 些 相 同 的 API 在 这 儿 有 描述 ， 不 过 ， 音 
频 和 视频 相关 的 细节 请 参见 Audio 及 Video。 关 于 这 些 媒 体 元 素 的 介绍 请 
参见 21.2 节 。 

常量 


NETWORK 常 量 是 networkState 可 能 的 值 ，HAVE 常 量 是 readyState 
属性 可 能 的 值 。 


unsigned short NETWORK_EMPTY=0 


当前 元 素 还 没有 开始 使 用 网 络 。 在 src 属 性 设置 之 前 可 能 处 于 这 个 状 


a 


unsigned short NETWORK_IDLE=1 
当前 元 系 现 在 不 在 从 网 络 加 载 数据 。 它 可 能 已 经 加 载 完全 部 资源 


了 ， 或 者 它 可 能 已 经 缓存 了 它 现 在 需要 的 数据 ， 也 或 者 可 能 是 它 的 
preload 设 置 为 mone"， 并 且 还 没有 要 求 加 载 或 播放 媒体 。 











unsigned short NETWORK_LOADING=2 

当前 元 素 当 前 正在 使 用 网 络 加 载 媒体 数据 。 

unsigned short NETWORK_NO_SOURCE=3 
当前 元 系 没 有 使 用 网 络 ， 因 为 它 找 不 到 可 以 播放 的 媒体 资源 。 





unsigned short HAVE_NOTHING=0 
没有 媒体 数据 或 无 数据 已 加 载 。 

unsigned short HAVE_METADATA=1 

媒体 元 数据 已 加 载 ， 但 当前 播放 位 置 的 数据 还 没有 加 载 。 这 意味 着 


可 以 查询 该 媒体 的 时 长 或 视频 的 大 小 ， 并 且 可 以 通过 设置 currentTime 来 
搜索 媒体 ， 但 浏览 堪 现 在 不 能 播放 currentTime 位 置 的 媒体 。 








unsigned short HAVE_CURRENT_DATA=2 
currentTime 的 媒体 已 加 载 ， 但 还 没有 加 载 足够 的 数据 以 允许 媒体 开 


始 播 放 。 对 视频 来 说 ， 通 常 这 意味 看 当前 帧 已 加 载 ,， 但 下 一 帧 还 没有 。 
在 音频 或 视频 的 结尾 也 会 发 生 这 个 状态 。 








unsigned short HAVE_FUTURE DATA=3 


己 下 载 了 足以 开始 播放 的 媒体 数据 ， 但 如 果 不 暂停 以 便 加 载 更 多 数 
据 的 话 ， 数 据 可 能 将 不 足以 持续 播放 到 媒体 结束 。 


unsigned short HAVE_ ENOUGH DATA=4 


己 加 载 了 足够 的 数据 ， 浏 览 器 有 可 能 可 以 在 不 暂停 的 情况 下 一 直播 
放 到 巡 体 结束 。 


属性 
boolean autoplay 


如 果 为 tue， 对 应 媒体 元 素 将 在 下 载 了 足够 数据 时 自动 开始 播放 。 
本 属性 为 对 应 的 HIML autoplay 属 性 的 映射 。 


readonly TimeRanges buffered 
当前 缓存 的 媒体 数据 的 时 间 范 围 。 
boolean controls 


如 果 为 tue， 则 对 应 媒体 元 素 应 该 显示 一 系列 的 播放 控件 。 本 属性 
为 对 应 的 HTML controls 属 性 的 映射 。 





readonly string currentSrc 


媒体 数据 的 URL， 来 自 src 属 性， 或 者 当前 元 素 的 一 个 二 Source 二 子 
节点 ， 如 果 没 有 指定 媒体 数据 ， 则 为 空 字符 串 。 





double currentTime 


当前 播放 时 间 ， 单 位 为 秒 。 设 置 这 个 属性 将 使 媒体 元 素 跳 到 一 个 新 
的 播放 位 置 。 


double defaultPlaybackRate 

正常 播放 的 播放 速度 。 默 认 值 为 1.0。 

readonly double duration 

当前 媒体 的 时 长 ， 单 位 为 秒 。 如 采 长 度 未 知 〈 比 如 元 数据 还 没有 加 


载 ) ， 这 个 属性 将 为 NaN。 如 果 媒 体 为 一 个 不 确定 长 度 的 流 ， 则 这 个 属 
性 将 为 Infinity。 


readonly boolean ended 
如 果 已 到 达 媒 体 的 结尾 则 本 属性 为 true。 
readonly MediaError error 


发 生 错 误 时 会 设置 这 个 属性 ， 其 他 情况 下 它 为 nul。 它 指 代 一 个 对 
该 对 象 的 code 属 性 描述 错误 的 种 类 。 


readonly double initialTime 


初始 播放 位 置 ， 单 位 为 秒 。 这 个 属性 通常 为 0， 但 有 些 媒体 〈“ 比 如 





流 媒体 ) 可 能 有 不 同 的 起 点 。 


boolean loop 


如 末 为 tue， 则 当前 媒体 元 系 将 在 每 次 到 达 结 尾 时 目 动 重新 开始 。 








本 属性 是 HTML loop 属 性 的 映射 。 


boolean muted 


旨 定 当前 音频 是 否 静 首 。 可 以 通过 设置 这 个 属性 来 让 一 段 首 频 静音 











或 取消 静 首 。 对 二 video 二 元 素 而 言 ， 可 以 用 一 个 audio="muted" 属 性 来 
让 媒体 默认 静 首 。 


readonly unsigned short networkState 

当前 是 否 正 在 加 载 媒体 数据 。 合 法 的 值 在 上 面 常量 部 分 列 出 了 。 
readonly boolean paused 

如 果 当 前 播放 暂停 了 则 此 属性 为 true。 

double playbackRate 

当前 播放 速度 。1.0 是 正常 播放 。 如 果 值 大 于 1.0 表 示 快 进 。 值 在 0 一 


1.0 之 间 表 示 慢 放 。 如 果 值 小 于 0， 则 媒体 将 回放 。【《 回 放 时 ， 媒 体 总 是 








处 于 静音 状态 ， 同 时 ， 如 果 播 放 速 度 特 别 快 或 特别 慢 也 将 静音 。) 


readonly TimeRanges played 
已 经 播放 的 时 间 范 围 。 


string preload 








这 个 属性 是 同名 的 HIML 属 性 的 映射 ， 可 以 通过 筷 设 置 在 用 户 请 求 
媒体 播放 之 前 ， 浏 览 器 应 该 获取 多 少 媒体 数据 。 值 "none" 表 示 不 需要 预 
加 载 数据 。 值 "metadata" 表示 浏览 吉 应 该 取得 媒体 的 元 数据 《例如 时 间 
长 度 ) ， 但 不 用 获取 实际 的 数据 本 身 。 值 "auto" 〈 或 者 空 字符 串 ， 如 宋 
设置 preload 属 性 但 是 没有 指定 值 ) 表示 一 旦 用 户 决定 播放 该 媒体 ， 浏 览 
器 可 以 加 载 整个 媒体 资源 。 





readonly unsigned short readyState 


媒体 播放 的 准备 状态 ， 基 于 已 缓存 的 数据 的 数量 。 合 法 的 值 为 上 面 
定义 的 以 HAVE 开头 的 常量 。 





readonly TimeRanges seekable 


可 设置 currentTime 的 时 间 范 围 。 播 放 简 单 媒 体 文件 时 ， 这 个 值 一 般 
为 0 一 duration 之 间 的 一 个 时 间 。 但 对 流 媒 体 而 言 ， 过 去 的 时 间 可 能 不 再 
在 缓存 中 ， 将 来 的 时 间 可 能 还 不 可 用 。 





readonly boolean seeking 


当 媒 体 元 素 正在 切换 到 一 个 新 的 currentTime 播 放 位 置 时 ， 本 属性 为 
true。 如 果 新 的 播放 位 置 已 经 在 缓存 中 ， 这 个 属性 将 只 有 很 短 的 一 段 时 
间 为 t ue。 但 如 果 媒 体 元 素 必 须 加 载 新 的 媒体 数据 的 话 ，seeking 将 保持 
true 状 态 一 段 较 长 的 时 间 。 





string src 


这 个 属性 是 媒体 元 素 的 HTML src 属 性 的 映射 。 通 过 设置 这 个 属 
， 可 让 媒体 元 素 加 载 新 的 媒体 数据 。 注 意 这 个 属性 和 currentSrc 不 一 


readonly Date startOffsetTime 


播放 时 间 为 0 的 位 置 对 应 的 真实 时 间 的 日 期 及 时 间 ， 如 有 果 媒 体 的 元 
数据 包含 这 个 信息 的 话 。《 比 如 ， 视 频 文件 可 能 包含 录制 它 的 时 间 。 ) 


double volume 


这 个 属性 查询 或 设置 音频 播放 的 音量 。 它 的 值 应 该 在 0 一 1 之 间 。 也 
可 参见 muted 属 性 。 


事件 处 理 程序 


<audio 之 和 <<video 之 标签 定义 了 下 面 这 些 事 件 处 理 程 序 ， 它 们 都 
可 以 作为 HTML 属 性 或 JavaScript 属 性 使 用 。 在 写作 本 书 时 ， 有 一 些 浏览 
器 还 不 支持 这 些 属性 ， 需 要 使 用 addEventListener()( 参 见 EventTarget) 
来 注册 事件 处 理 程序 。 媒 体 事 件 不 会 冒 泡 ， 也 没有 可 取消 的 默认 行为 。 
相关 的 事件 对 象 是 一 个 常规 的 Event 对 象 。 





事件 处 理 程序 


onabort 


oncanplay 


oncanplaythrough 


ondurationchange 
onemptied 
onended 


onerror 


onloadeddata 
onloadedmetadata 
onloadstart 
onpause 

onplay 
onplaying 


onprogress 


onratechange 
onseeked 


onseeking 


onstalled 
onsuspend 


ontimeupdate 


触发 条 件 

元 素 已 停止 加 载 数 据 ， 一 般 是 基于 用 户 的 请 求 。error.code 为 
error.MEDIA ERR ABORTED 

已 加 载 了 足够 的 媒体 数据 ， 可 以 开始 播放 ， 不 过 可 能 需要 更 多 的 缓冲 
数据 

已 加 载 了 足够 的 媒体 数据 ， 媒 体 可 能 可 以 在 不 暂停 以 便 缓 冲 更 多 数据 
的 情况 下 持续 播放 

duration 长 度 属性 已 改变 

一 个 错误 或 退出 导致 networkState 返 回 NETWORK_EMPTY 的 中 止 

由 于 已 到 达 媒 体 的 结尾 ， 播 放 终止 


网 络 连接 或 其 他 错误 阻止 媒体 数据 加 载 。error.code 为 一 个 不 是 
MEDIA_ERR_ABORTED 的 值 (参见 MediaError) 


当前 播放 位 置 的 数据 第 一 次 加 载 

媒体 的 元 数据 已 加 载 ， 媒 体 的 时 长 和 大 小 已 就 绪 

元 素 开 始 请 求 媒体 数据 

pause() 方 法 被 调用 ， 播 放 已 暂停 

play() 方 法 被 调用 ， 或 者 autoplay 属 性 引发 了 相同 的 事件 
媒体 已 经 开始 播放 


网 络 活动 正在 继续 加 载 媒体 数据 。 一 般 每 秒 触发 2~ 8 次 。 注 意 ， 
与 这 个 事件 关联 的 对 象 是 一 个 简单 的 Event 对 象 ， 而 不 是 其 他 触发 
“progress” 事 件 的 API 中 使 用 的 ProgressEvent 对 象 


playbackRate 或 defaultPlaybackRate 已 改变 
seeking 属 性 已 改 回 false 


脚本 或 用 户 请 求 播放 跳 到 媒体 的 一 个 未 缓存 的 位 置 ， 正 在 加 载 数据 ， 
期 间 播放 将 停止 。seeking 属 性 为 true 


元 素 正 尝试 加 载 数据 ， 但 没有 数据 到 达 
元 素 已 缓存 了 足够 数据 ， 已 临时 停止 下 载 


curirentTime 属 性 已 改变 。 在 正常 的 播放 过 程 中 ， 这 个 事件 每 秒 触发 
4 一 60 次 


事件 处 理 程序 。 触发 条 件 
onvolumechange ”音量 (volume) 或 静音 (muted) 属性 已 改变 


onwaiting 由 于 没有 缓 钟 足够 的 数据 ， 不 能 开始 播放 ， 或 者 播放 已 经 停止 。 当 
准备 好 足够 的 数据 时 ， 会 触发 一 个 播放 事件 


方法 
string canPlayTypel(string type) 


这 个 访问 询问 媒体 元 素 它 是 否 能 播放 指定 MIME type 的 媒体 。 如 果 
播放 占 确 定 不 能 播放 这 个 类 型 ， 它 将 返回 空 字 符 串 。 如 果 它 认为 自己 可 
以 “但 不 确定 ) 播放 这 个 类 型 ， 它 将 返回 字符 串 "probably"。 媒 体 元 素 
通常 不 会 返回 "probably"， 除 非 type 包 含 一 个 列 出 指定 媒体 编码 的 
codecs= 参 数 。 如 果 媒 体 元 素 不 确定 它 是 否 可 以 播放 指定 type， 这 个 方法 
将 返回 "maybe"。 


void load() 


这 个 方法 重 置 媒体 元 素 ， 让 它 选 择 一 个 媒体 资源 并 开始 加 载 数据 。 
当 媒 体 元 素 首先 插入 到 文档 中 ， 或 当 设 置 了 它 的 src 属 性 时 ， 这 个 动作 会 
自动 发 生 。 但 是 ， 如 果 添 加 、 移 除 或 修改 了 对 应 媒体 元 素 的 术 source> 
子孙 元 素 ， 必 须 显 式 地 调用 load0)。 





void pause() 

暂停 媒体 的 播放 。 

void play() 

开始 播放 媒体 。 
MediaError 


二 audio 疙 或 二 video 放 > 错误 


当 <<audio> 或 video> 之 标签 上 发 生 错 误 时 ， 将 触发 一 个 错误 事 
件 ， 对 应 的 error 属 性 将 设置 为 一 个 MediaError 对 象 。 对 应 的 code 属 性 将 
指明 发 生 的 错误 的 类 型 ,下面 的 常量 定义 该 属性 可 能 的 值 。 

常量 

unsigned short MEDIA ERR _ ABORTED=1 

用 户 请 求 浏览 器 停止 加 载 媒 体 。 

unsigned short MEDIA_ ERR_ NETWORK=2 

媒体 类 型 正确 ， 但 一 个 网 络 错误 阻止 它 的 加 载 。 

unsigned short MEDIA_ERR_DECODE=3 

媒体 类 型 正确 ， 但 一 个 编码 错误 阻止 它 的 解码 及 播放 。 

unsigned short MEDIA_ERR SRC_NOT_SUPPORTED=4 

由 src 属 性 指定 的 媒体 不 是 浏览 右 可 播放 的 类 型 。 

属性 

readonly unsigned short code 


这 个 属性 描述 用 生 的 媒体 错误 的 类 型 。 它 的 值 将 是 上 面 的 常量 之 





MessageChannel 


一 对 已 连接 的 MessagePorts 





MessageChannel 简 单 来 说 是 一 对 已 连接 的 MessagePort 对 象 。 在 任何 
一 方 上 调用 postMessage0 都 将 在 另 一 方 上 触发 一 个 消息 事件 。 如 果 想 用 
Window 或 Worker 线 程 建立 一 个 私有 的 通信 通道 ， 只 需要 创建 一 个 
MessageChannel 并 将 MessagePort 对 中 的 一 个 成 员 传 入 对 应 的 Window 或 
Worker( 使 用 postMessage() 的 ports 参 数 ) 。 





MessageChannel 和 MessagePort 类 型 是 HIML5 的 高 级 特性 ， 在 写作 
本 书 的 时 候 ， 一 些 浏 览 器 文 持 路 域 消 轧 《〈 见 22.3 节 ) 以 及 worker 线 程 
( 见 22.4 节 ) ， 但 还 不 支持 MessagePort 类 型 的 私有 通信 通道 。 


构造 函数 





new MessageChannel() 





这 个 不 融 参 数 的 构造 函数 返回 一 个 新 的 MessageChannel 对 象 。 

属性 

readonly MessagePort port1 

readonly MessagePort port2 

这 是 定义 了 通信 通道 的 两 个 已 连接 的 端口 。 两 者 是 对 称 的 :为 代码 


保留 某 一 个 或 男 一 个 ， 将 男 一 个 传 入 到 你 想 与 之 通信 的 Window 或 
Worker。 


Messagek.vent 
从 另 一 个 执行 上 下 文 来 的 消息 
事件 


有 很 多 API 都 使 用 消息 事件 来 在 不 相关 的 执行 上 下 文中 实现 异步 通 
信 。Window、Worker、WebSocket、EventSource 以 及 MessagePort 对 象 
都 定义 了 用 于 处 理 消 息 事 件 的 onmessage 属 性 。 与 消息 事件 关联 的 消 县 
可 以 是 任意 能 像 22.2 市 描述 的 “结构 性 复制 ”那样 复制 的 JavaScript 值 。 消 
恩 将 被 一 个 MessageEvent 对 象 包装 起 来 ， 可 以 通过 data 属 性 访问 。 各 种 
依赖 消息 事件 的 API 也 在 MessageEvent 对 象 中 定义 一 些 额外 的 属性 。 消 
奶 事 件 不 会 冒 泡 ， 也 没有 可 取消 的 默认 行为 。 


属性 








readonly any data 





这 个 属性 保存 正在 发 送 的 消息 。data 可 以 是 能 通过 结构 化 复制 算法 
(参见 22.2 市 的 “结构 性 复制 ”) 的 任意 类 型 ; 这 包括 对 象 以 及 数组 这 样 
的 核心 JavaScript 值 ， 但 不 包括 函数 。 尽 管 Blob 和 ArrayBuffer 可 以 使 用 ， 
但 是 Document 和 Element 节 点 等 客户 尖 的 值 不 \ 可 以 使 用 。 


readonly string lastEventId 


适用 于 EventSource 〈 见 18.3 节 ) 上 的 消息 事件 ， 这 个 字段 包含 由 服 
务 器 发 送 的 lastEventId 字 符 串 ， 如 果 存 在 的 话 。 


readonly string origin 


适用 于 EventSource 〈 见 18.3 节 ) 或 Window〈 见 22.3 节 ) 上 的 消息 事 
件 ， 这 个 属性 包含 消息 发 送 者 的 原始 URL 。 


readonly MessagePort[ ]ports 


适用 于 Window〔 见 22.3 节 ) 、Worker( 见 22.4 方 ) 或 MessagePort 上 
的 消息 事件 ， 如 果 在 对 应 的 postMessage() 的 调用 中 传 入 了 MessagePort 对 
象 ， 这 个 属性 将 以 数组 的 形式 包含 这 些 MessagePort 对 象 。 


readonly Window source 


适用 于 Window〔 见 22.3 节 ) 上 的 消息 事件 ， 这 个 属性 指 代 消息 发 送 
自 的 Window。 


MessagePort 
传递 异步 消息 


EventTarget 


MessagePort 用 于 事件 驱动 的 异步 消息 传递 ， 通 常 在 JavaScript 执 行 
上 下 文 之 中 ， 如 window 或 worker 线 程 。MessagePort 必 须 以 成 对 相连 的 
形式 使 用 : 参见 MessageChannel。 在 MessagePort 上 调用 postMessage() 将 
在 与 它 连接 的 MessagePort 上 触发 一 个 消息 事件 。 踊 域 的 消息 API《〈 见 
22.3 节 ) 以 及 Web Worker〈 见 22.4 节 ) 也 使 用 postMessage() 方 法 和 消息 
事件 来 通信 。 这 些 API 实 际 上 使 用 的 是 隐 式 的 MessagePort 对 象 。 显 式 地 








使 用 MessageChannel 和 MessagePort 将 启用 额外 的 私有 通信 通道 ， 例 如 ， 
允许 在 两 个 兄弟 Worker 线 程 中 直接 通信 。 
MessageChannel 和 MessagePort 类 型 是 HIML5 的 高 级 特性 ， 在 写作 


本 书 的 时 候 ， 一 些 浏览 器 支持 跨 域 消 妃 ( 见 22.3 节 〉 以 及 worker 线 程 
( 见 22.4 节 ) ， 但 不 支持 MessagePort 类 型 的 私有 通信 通道 。 


丽人 
void close() 


这 个 方法 将 MessagePort 从 它 已 连接 的 端口 (如 果 有 的 话 ) 断 开 。 之 
后 继续 调用 postMessage0O 将 没有 效果 ， 并 且 将 不 再 发 送 消 息 事 件 。 








void postMessage(any message,[MessagePort[]ports]) 


通过 指定 端口 发 送 指定 的 message 的 一 个 副本 ， 并 将 它 以 消息 事件 
的 格式 发 送 到 它 已 连接 的 端口 。 如 果 指 定 了 ports， 也 将 它们 当做 消息 的 
部 分 一 起 发 送 。message 可 以 是 适用 结构 性 复制 算法 (“结构 性 复 


制 ?， 见 22.2 节 ) 的 任意 值 。 





void start() 

这 个 方法 将 让 MessagePort 开 始 触发 消息 事件 。 在 这 个 方法 调用 之 
前 ， 任 何 通过 并 口 发 送 的 数据 都 处 于 绥 存 中。 这 样 延 迟 消 息 的 方式 允许 
脚本 在 发 送 消 息 之 前 先 注册 好 所 有 事件 处 理 程序 。 注 意 ， 只 有 在 使 用 
EventTarget 方 法 addEventListener() 时 才 需 要 调用 这 个 方法 。 如 果 只 是 简 
单 地 设置 onmessage 属 性 ，start() 将 隐 式 地 调用 。 





事件 处 理 程序 


onmessage 
这 个 属性 定义 一 个 适用 于 消息 事件 的 事件 处 理 程 序 。 消 息 事 件 由 
MessagePort 对 象 触 有 发， 它们 不 会 冒 泡 ， 也 没有 默认 行为 。 注 意 ， 设 置 这 


个 属性 将 调用 start0 方 法 开始 消 恩 事件 的 发 送 。 








Meter 


图 形 标尺 或 计量 器 
Node、 Element 


Meter 对 象 表 示 HTML 二 meter 二 元 素 ， 以 图 形 化 的 表示 方式 显示 可 
能 的 值 中 的 范围 ， 这 个 范围 可 以 标注 区 域 为 低 、 适 合 以 及 高 。 


这 个 对 象 的 大 部 分 属性 简单 地 映射 了 同名 的 HTML 属 性 。JavaScript 
属性 为 数字 ， 虽 然 对 应 的 HIML 属 性 为 字符 串 。 


本 二 meter 二 是 一 个 HTML5 元 素 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 地 


属性 
readonly Form form 


当前 元 素 的 祖先 Form 元 素 ， 或 者 由 HTMLform 属 性 指定 的 Form 元 
如 果 存 在 的 话 。 


double high 


如 果 指 定 ， 则 表示 high 和 max 之 间 值 的 属性 应 该 图 形 化 地 表示 
为 "high"。 


? 
沁 上 
< 


readonly NodeList labels 
由 与 当前 元 素 关联 的 Label 元 素 组 成 的 类 数组 对 象 。 
double low 


如 果 指 定 ， 则 表示 min 和 low 之 间 值 的 属性 应 该 图 形 化 地 表示 
为 "low"。 


double max 
当前 二 meter> 可 显示 的 最 大 值 。 默 认为 1。 


double min 


当前 过 meter 之 可 显示 的 最 小 值 。 默 认为 0。 
double optimum 

如 果 指 定 ， 这 个 值 将 被 认为 是 最 佳 值 。 
double value 


当前 过 meter 之 表示 的 值 。 


MouseEvent 


参见 Event 


Navigator 
关于 Web 浏 览 器 的 信息 


Navigator 对 象 包含 一 些 描述 正在 其 中 运行 代码 的 Web 浏 览 器 的 属 
性 。 可 以 使 用 这 些 属性 来 实现 对 特定 平台 的 定制 。 这 个 对 象 的 名 字 是 对 
Netscape Navigator 浏 览 器 的 引用 ， 但 所 有 浏览 器 都 文 持 它 。Navigator 对 
象 只 有 一 个 实例 ， 可 以 通过 任意 Window 对 象 的 navigator 属 性 引用 它 。 


历史 上 ，Navigator 对 象 曾 用 于 “客户 端 噢 探 ”， 对 不 同 的 浏览 器 运行 
不 同 的 代码 。 例 14-3 显 示 了 这 种 用 途 的 一 个 简单 方法 ，14.4 节 中 接 下 来 
的 文字 描述 了 依赖 Navigator 对 象 的 缺陷 。 跨 浏览 器 兼容 的 更 好 的 方法 在 
13.4.3 节 有 描述 。 


属性 





readonly string appName 


浏览 器 的 名 字 。 对 基于 Netscape 的 浏览 器 而 言 ， 这 个 属性 的 值 
为 "Netscape"。 在 下 中 ， 这 个 属性 的 值 为 "Microsoft Internet Explorer"。 
为 了 兼容 现 有 的 代码 ， 许 多 浏览 器 返回 较 老 的 或 欺骗 性 的 信息 。 





readonly string appVersion 


i 。 为 了 兼容 现 有 的 代码 ， 大 多 数 浏览 右 对 于 
这 个 属性 返回 过 时 的 旧 值 。 


readonly Geolocation geolocation 


当前 浏览 右 的 Geolocation 对 象 的 一 个 引用 。 访 对 象 的 方法 允许 脚本 
请 求 用 户 的 当前 地 理 位 置信 息 。 


readonly boolean onLine 


如 果 浏 览 器 不 会 从 网 络 上 下 载 任何 东西 ， 则 这 个 属性 为 false。 这 可 
能 是 因为 浏览 器 确信 计算 机 当前 没有 连接 到 网 络 ， 或 者 用 户 将 浏 we 
置 为 无 网 络 状态 。 如 果 浏 览 器 将 尝试 下 载 (因为 计算 机 可 能 在 线 )， 
个 属性 将 为 tue。 当 这 个 属性 的 状态 改变 时 ， 浏 览 右 将 在 Window 对 > 
触发 online 和 offline 事 件 。 


readonly string platform 


运行 当前 浏览 器 的 操作 系统 以 及 /或 硬件 平台 。 这 个 属性 没有 标准 
的 值 集合 ， 不 过 一 些 典 型 的 值 是 "Win32"、"MacPPC" 以 及 "Linux i586"。 


readonly string userAgent 


浏览 器 用 于 HTTP 请 求 的 user-agent 头 信息 的 值 。 例 如 : 





Mozilla/5.0(X11;U;Linux i686;en-US) 
ApplewebKit/534.16(KHTML,1ike Gecko) 
Chrome/10.0.648.45 

Safari/534.16 





方法 
void registerContentHandler(string mimeType,string url,string title) 


这 个 方法 作为 处 理 程序 请 求 指定 ul 的 注册 方式 显示 指定 mimeType 
的 内 容 。title 是 一 个 可 供 人 阅读 的 站 点 标题 ， 浏 览 器 可 能 会 加 用 户 显 
示 。Uurl 参 数 必须 包含 字符 串 "%s"。 当 这 个 内 容 处 理 程序 用 于 处 理 指定 
mimeType 的 网 页 时 ， 访 网 页 的 URE 将 编码 并 插入 到 ul 的 "9%s" 的 位 置 ， 
然后 浏览 器 将 访问 这 个 生成 的 URL。 这 是 HTML5 的 一 个 新 属性 ， 可 能 


有 些 浏览 器 还 未 实现 。 
void registerProtocolHandler(string scheme,string url,string title) 


这 个 方法 类 似 于 registerContentHandler()， 但 它 将 一 个 网 站 注册 为 用 
做 URL 协 议 scheme 的 处 理 程序 。scheme 应 该 是 一 个 类 
似 "mailto" 或 "sms" 的 不 带 冒 号 的 字符 串 。 这 是 HTML5 的 一 个 新 属性 ， 可 
能 有 些 浏览 器 还 未 实现 。 


void yieldForStorageUpdates() 


使 用 Document.cookie 或 Window.localStorage 或 
Window.sessionStorage (参见 Storage 及 第 20 章 ) 的 脚本 无 法 知道 同时 运 
行 在 其 他 窗口 中 的 〈 同 源 ) 脚本 对 存储 的 改变 。 浏 览 器 可 以 《虽然 在 写 
作 本 书 时 ， 还 不 是 所 有 浏览 器 都 可 以 ) 用 类 似 数据 库 的 锁 机 制 来 阻止 同 
时 更 新 。 在 文 持 这 种 机 制 的 浏览 器 中 ， 这 个 方法 将 显示 地 释放 锁 ， 并 且 
可 能 消除 其 他 窗口 中 同时 运行 的 脚本 的 阻 守 。 调 用 这 个 方法 后 ， 检 索 到 
的 存储 的 值 可 能 与 调用 它 之 前 的 值 不 一 样 。 


Node 


文档 树 上 的 所 有 对 象 〈 包 括 Document 对 象 本 身 ) 都 实现 Node 接 
口 ， 这 些 接口 提供 了 过 有 历 及 操作 这 个 树 的 基本 属性 和 方法 。parentNode 
属性 和 childNodes[] 数 组 允许 在 这 个 文档 树 中 上 下 移动 。 枚 举 给 定 节 点 
的 方式 有 两 种 ， 裔 历 childNodes[] 的 元 素 ， 或 者 使 用 firstChild 和 
nextSibling 属 性 (或 lastChild 及 previousSibling 属 性 ， 用 于 反问 循环 )〉。 
appendChild()、insertBefore()、removeChild() 以 及 replaceChild() 方 法 允许 
通过 改变 一 个 节点 的 子 节点 的 方式 修改 文档 树 。 


文档 树 中 的 每 个 对 象 都 同时 实现 了 Node 接 口 和 一 个 更 专业 化 的 子 接 
口 ， 比 如 Element 或 Text。nodeType 属 性 指明 一 个 节点 实现 的 是 哪 种 子 接 
口 。 可 以 在 使 用 更 专业 化 的 接口 的 属性 和 方法 之 前 ， 先 用 这 个 属性 测试 
节点 的 类 型 。 例 如 : 

















Var n;// 保 存 当 前 正在 使 用 的 节点 
if(n.nodeType==1){// 也 可 以 使 用 常量 Node .ELEMENT_NODE 
var tagname=n.,tagName;// 如 果 节 点 是 一 个 Element， 这 个 值 将 是 它 的 标签 名 









































tn 


常 

unsigned short ELEMENT_NODE=1 

unsigned short TEXT_NODE=3 

unsigned short PROCESSING INSTRUCTION_NODE=7 

unsigned short COMMENT_NODE=8 

unsigned short DOCUMENT_NODE=9 

unsigned short DOCUMENT_TYPE_NODE=10 

unsigned short DOCUMENT_FRAGMENT_ NODE=11 

这 些 常 量 是 nodeType 属 性 可 能 的 值 。 注 意 ， 它 们 是 Node() 构 造 函 数 
的 静态 属性 ， 不 是 个 别 Node 对 象 的 属性 。 也 要 注意 ， 在 IE8 及 更 早 的 版 


人 如 果 需 要 兼容 ， 可 以 将 这 些 值 硬 编码 ， 或 者 定义 自 
己 的 常量 。 





unsigned short DOCUMENT_POSITION_DISCONNECTED=0x01 
unsigned short DOCUMENT_POSITION_PRECEDING=0x02 
unsigned short DOCUMENT_POSITION_FOLLOWING=0x04 
unsigned short DOCUMENT_POSITION_ CONTAINS=0x08 
unsigned short DOCUMENT_POSITION_CONTAINED BY=0x10 


这 些 常量 定义 compareDocumentPosition() 的 返回 值 中 的 位 ， 可 能 大 
on 或 off。 


属性 
readonly string baseURI 
这 个 属性 指定 本 Node 的 基准 URL， 相 对 URL 将 基于 这 个 基准 URL 进 





行 解析 。 对 HTMEL 文 档 中 的 所 有 节点 来 说 ， 这 是 由 文档 的 本 base 之 元 素 
定义 的 URL， 或 仅仅 是 移 除 了 片断 标识 符 的 Document.URL。 


readonly NodeList childNodes 

这 个 属性 为 一 个 类 数组 对 象 ， 包 含 当 前 节点 的 子 节 点 。 这 个 属性 永 
远 不 会 为 nul 1: 对 没有 子 节 点 的 节点 而 言 ，childNodes 是 一 个 langth 为 0 
的 数组 。 注 意 ，NodeList 对 象 是 实时 的 : 对 本 元 素 的 子 节 点 列表 的 任何 
改变 都 将 立即 在 NodeList 中 可 见 。 

readonly Node frstChild 


当前 市 反 的 第 一 个 子 节 点 ， 如 果 当 前 市 点 没有 子 市 把 则 为 null。 











readonly Node lastChild 


当前 节点 的 最 后 一 个 子 市 皮 ， 如 果 当 前 节点 没有 子 节 点 则 为 null。 








readonly Node nextSibling 


parentNode 的 childNodes[] 数 组 中 紧 跟 着 当前 节点 的 兄 第 节点 ， 如 果 
没有 对 应 的 节点 则 为 null。 





readonly string nodeName 
节点 的 名 字 。 对 Element 节 点 而 言 ， 值 为 元 素 的 标签 名 ， 也 可 以 通 


过 Element 接 口 的 tagName 属 性 得 到 。 对 大 多 数 其 他 类 型 的 节点 而 言 ， 该 
值 为 一 个 取决 于 节点 类 型 的 常量 字符 串 。 











readonly unsigned short nodeType 


节点 的 类 型 ， 即 ， 当 前 节点 实现 了 哪个 子 接口 。 合 法 的 值 为 上 面 列 
出 的 常量 。 由 于 这 些 常 量 不 被 Internet Explorer 支 持 ， 然 而 ， 可 能 得 用 硬 
编码 的 值 来 蔡 代 对 应 的 常量 。 在 HIML 文 档 中 ， 这 个 属性 常用 的 值 为 : 
Element 节 点 为 1，Text 节 点 为 3，Comment 节 点 为 8， 以 及 唯一 的 顶级 
Document 节 点 为 9。 





string nodeValue 





节点 的 值 。 对 Textm 点 而 言 ， 它 的 值 为 对 应 的 文本 内 容 。 


readonly Document ownerDocument 





与 当前 节点 关联 的 Document 对 象 。 对 Document 节 点 而 言 ， 这 个 属 
性 为 null。 注 意 ， 即 使 一 个 节点 还 没有 插入 到 文档 中 ， 它 仍然 具有 


Owner。 
readonly Node parentNode 


当前 节点 的 父 节点 (或 容器 节点 ) ， 如 果 没 有 父 节点 则 为 null。 注 
意 ，Document 和 DocumentFragment 节 点 永远 没有 父 节 点 。 同 样 地 ， 对 于 
己 经 从 文档 中 删除 的 节点 ， 或 者 新 创建 并 且 还 没有 插入 到 文档 树 中 的 节 
点 ，parentNode 值 为 null。 








readonly Node previousSibling 


parentNode 的 childNodes[] 数 组 中 在 当前 节点 前 方 并 与 当前 节点 相 邻 
的 兄弟 节点 ， 如 有 果 没 有 对 应 的 节点 则 为 null。 








string textContent 


对 Text 和 Comment 节 点 而 言 ， 这 个 属性 只 是 data 属 性 的 一 个 同 义 
词 。 对 Element 和 DocumentFragment 节 点 而 言 ， 碍 询 这 个 属性 将 返回 所 
有 子孙 Text 节 点 拼接 的 文本 内 容 。 设 置 Element 或 DocumentFragment 的 这 
WE 蔡 换 访 元 素 或 碎 放 的 所 有 子孙 节点 为 单个 内 容 为 指定 值 的 Text 
i 








方法 
Node appendChild(Node newChild) 


这 个 方法 将 节点 newChild 添 加 到 文档 中 ， 将 它 作为 当前 节点 的 最 后 
一 个 子 节 点 插入 。 如 果 newChild 已 经 在 文档 树 中 ， 它 将 先 从 文档 树 中 移 
除 ， 再 插入 到 新 的 位 置 。 如 果 newChild 是 一 个 DocumentFragment (文档 
碎片 ) 节点 ， 它 将 不 会 插入 它 本 身 ， 而 是 将 它 的 子 节 点 按 顺 序 退 加 到 当 
前 节点 的 childNodes[] 数 组 后 面 。 注 意 ， 来 自 (或 创建 于 ) 一 个 文档 的 
节点 不 能 插入 到 另 一 个 文档 中 。 这 束 是 说 ，newChild 的 ownerDocument 
属性 必须 与 当前 节点 的 ownerDocument 属 性 一 致 。 (参见 























Document.adoptNode0 ) 。 这 个 方法 返回 传 入 的 Node。 
Node cloneNode(boolean deep) 


在 节点 上 调用 CloneNode() 方 法 将 返回 这 个 节点 的 一 份 副本 。 如 果 传 
入 参数 true， 这 个 而 点 的 子孙 节点 也 将 递归 地 复制 。 否 则 ， 它 只 复制 这 
个 节点 而 忽略 它 的 子 节 点 。 返 回 的 节点 不 是 文档 树 的 一 部 分 ， 它 们 的 
parentNode 属 性 为 null。 当 复制 一 个 Element 节 点 时 ， 它 的 所 有 属性 也 会 
复制 。 不 过 要 注意 ， 注 册 在 节点 上 的 事件 监听 函数 不 会 复制 。 





unsigned short compareDocumentPosition(Node other) 


这 个 方法 比较 当前 节点 与 指定 的 other 节点 在 文档 中 的 位 置 ， 并 返回 
一 个 数字 ， 这 个 数字 的 置 位 (set bit) 情况 描述 了 两 个 节点 的 关系 。 如 
果 两 个 节点 相同 ， 将 没有 位 置 位 ， 这 个 方法 返回 0。 和 否则， 返回 值 的 一 
个 或 多 个 位 将 置 位 。 上 面 列 出 的 DOCUMENT_POSITION 常量 给 出 了 
每 一 位 的 符号 名 ， 各 项 含义 如 下 : 

















DOCUMENT POSITION 值 含义 


DISCONNECTED 0x01 ”这 两 个 节点 不 在 同一 个 文档 中 ， 所 以 它们 的 位 置 
无 法 比较 

PRECEDING 0x02 other 节点 出 现在 当前 节点 之 前 

FOLLOWING 0x04 other 节点 出 现在 当前 节点 之 后 

CONTAINS 0x08 other 节点 包含 当前 节点 。 当 该 位 置 位 时 ， 
PRECEDING 位 也 总 是 置 位 

CONTAINED BY 0x10 当前 节点 包含 的 other 节 点 。 当 该 位 置 位 时 ， 
FOLLOWING 位 也 总 是 置 位 


boolean hasChildNodes() 


如 果 当 前 节点 有 一 个 或 多 个 子 节 点 则 返回 true;， 如果 不 包含 节点 则 





返回 false。 
Node insertBefore(Node newChild,Node refChild) 


这 个 方法 将 节点 newChild 作 为 当前 节点 的 子 节 点 插入 到 文档 树 中 ， 
并 返回 这 个 插入 的 节点 。 新 节点 将 添加 到 当前 节点 的 childNodes[] 数 组 
中 ， 以 便 它 立 即 出 现在 refChild 节 点 前 面 。 如 果 refChild 为 null，newChild 
将 插入 到 childNodes[] 的 结尾 ， 和 appendChild0 方 法 一 样 。 注 意 ， 不 能 通 
过 不 是 当前 节点 的 子 节 点 的 refChild 调 用 这 个 方法 。 


如 有 果 newChild 己 经 在 文档 树 中 了 ， 它 将 先 从 文档 树 中 移 除 ， 再 重新 
插入 到 新 的 位 置 。 如 果 newChild 是 一 个 DocumentFragment 节 点 ， 插 入 的 
a ， 而 是 它 的 所 有 子 节 点 将 按 顺 序 插入 到 指定 的 位 























boolean isDefaultNamespace(string namespace) 


如 果 指 ee URL 和 和 ee 回 的 默 
认命 名 空间 UREL 一 样 ， 则 返回 true; 否则 返回 false。 


boolean isSEqualNode(Node other) 


如 果 当 前 节点 和 other 节点 完全 相同 则 返回 true， 
标签 名 、 属 性 以 及 (递归 的 ) 子 节点 。 如 果 两 个 节点 不 相同 则 返 


false。 





boolean isSameNode(Node other) 


如 果 当 前 节点 和 other 节点 是 人 点 则 返回 true;， 否则 返回 
false。 也 可 以 简单 地 使 用 “==?” 操 作 符 


string lookupNamespaceURI(string prefx) 





这 个 方法 返回 与 指定 命名 空 en 了 名 空间 URL， 如 果 不 
存在 则 返回 null。 如 果 prefx 为 null， 则 返回 默认 命名 空间 的 URL。 


string lookupPrefx(string namespace) 


这 个 方法 返回 与 指定 namespace URL 关 联 的 命名 空间 前 级 ， 如 果 不 


存在 则 返回 null。 
void normalize() 


这 个 方法 通过 合并 相 邻 节点 以 及 移 除 空 节 后 的 方式 ， 让 当前 市 点 的 
文本 子孙 节点 标准 化 。 文 档 一 般 不 会 有 空 的 或 相 邻 的 文本 节点 ， 但 在 脚 
本 添加 或 移 除 市 点 时 这 种 情况 有 可 能 出 现 。 


Node removeChild(Node oldChild) 


这 个 方法 从 当前 节点 的 childNodes[] 数 组 中 移 除 oldChild。 如 果 在 一 
个 节点 上 调用 这 个 方法 ， 但 传 入 的 节点 不 是 它 的 子 节点 将 会 出 错 。 
removeChild0 在 移 除 oldChild 节 点 后 将 返回 这 个 节点 。oldChild 仍 然 是 一 
个 有 效 的 节点 ， 可 以 在 稍 后 重新 插入 到 文档 中 。 


Node replaceChild(Node newChild,Node oldChild) 








这 个 方法 使 用 newChild 蔡 换 oldChild， 并 返回 oldChild。oldChild 必 
须 是 当前 节点 的 一 个 子 节点 。 如 果 newChild 已 经 是 当前 文档 的 一 部 分 ， 
它 将 先 从 文档 中 移 除 ， 再 重新 插入 到 新 的 位 置 。 如 果 newChild 是 一 个 
DocumentFragment， 插 入 的 将 不 是 这 个 节点 本 身 ， 而 是 它 的 子 节 点 将 按 
顺序 插入 到 原来 由 oldChild 占 据 的 位 置 。 


NodeList 


由 Node 组 成 的 只 读 的 类 数组 对 象 


NodeList 是 一 个 只 读 的 类 数组 对 象 ， 其 元 素 为 Node 对 象 〈 通 第 为 
Element) 。 它 的 length 属 性 指明 这 个 列表 包含 多 少 节 点 ， 可 通过 索引 0 
~length-1 来 遍历 这 这 些 节 点 。 也 可 以 传 入 期 望 的 索引 到 item(0) 方 法 来 代 蔡 
直接 检索 NodeList。NodeList 的 元 素 总 是 有 效 的 Node 对 象 ， 也 就 是 说 ， 
NodeList 绝 对 不 会 包含 nul] 元 素 。 


NodeList 很 党 用， 例如 ，Node 的 childNodes 属 性 ， 
Document.getElementsByTagName()、Element.getElementsByTagName() 
以 及 HIMLDocument. getElementsByYName() 方 法 的 返回 值 都 是 NodeList。 
NodeList 是 类 数组 对 象 ， 但 是 ， 我 们 经 常 非 正式 地 将 它们 当做 数组 来 引 
用 ， 用 到 的 语句 类 似 “childNodes[] 数 组 ”。 




















需要 注意 ，NodeList 对 象 通常 是 实时 的 : 它们 不 是 静态 快照 ， 而 会 
实时 反映 出 文档 树 的 改变 。 例 如 ， 如 果 有 一 个 代表 指定 节点 的 子 节 点 的 
NodeList， 然 后 删除 其 中 一 个 子 节点 ， 则 该 子 节 点 也 会 从 NodeList 中 移 
除 。 在 壳 历 一 个 NodeList 的 元 素 时 要 小 心 ; 循环 体 中 的 代码 可 能 会 改变 
文档 树 《〈 比 如 删除 节点 ) ， 这 可 能 会 影响 到 NodeList 的 内 容 ! 


属性 








readonly unsigned long length 


当前 NodeList 中 的 节点 的 数目 。 
方法 
Node item(unsigned long index) 
返回 指定 index 位 置 的 Node， 如 果 有 索引 超出 范围 则 返回 null。 
Option 
Select 元 素 中 的 二 option 二 


Node、 Element 


Option 对 象 描述 Select 对 象 中 显示 的 一 个 选项 。 这 个 对 象 的 属性 指 
明 它 是 人 否 默 认 选中 ， 是 否 当 前 处 于 选中 状态 ， 0 
options[] 数 组 中 的 位 置 ， 它 显示 的 文本 ， 以 及 如 果 它 被 选中 ， 提 交 包 
的 表单 时 它 传 给 服务 器 的 值 。 


由 于 历史 原因 ，Option 元 素 定 义 了 一 个 构造 函数 ， 可 以 用 它 来 创建 
及 初始 化 新 的 Option 元 素 。 (当然 ， 也 可 以 使 用 普通 的 
Document.createElement() 方 法 。) 一 旦 创建 新 的 Option 对 象 ， 它 束 可 以 
追加 到 某 个 Select 对 象 的 options 集 合 中 。 细 节 可 参见 
HIMLOPptionsCollection 。 


构造 函数 








new Option([string text,string value,boolean defaultSelected,boolean selected]) 





Option0 构 造 函 数 可 创建 一 个 二 option 二 元 素 。4 个 可 选 参 数 定义 了 
元 素 的 textContent (参见 Node) 、value 的 初始 值 、defaultSelected 以 及 选 
中 selected 属 性 。 

属性 

boolean defaultSelected 


这 个 属性 对 应 HTML selected 属 性 。 它 定义 当前 选项 的 初始 选中 状 
态 ， 当 表单 重 置 时 也 会 使 用 这 个 值 。 


boolean disabled 


如 果 当 前 选项 禁用 则 为 tue。 如 果 Option 或 包含 它们 的 过 optgroup 之 
有 HTML disabled 属 性 的 话 ， 它 们 将 禁用 。 





readonly Form form 
当前 Option 元 素 所 属 的 二 form 放 元 素 ， 如 果 存 在 的 话 。 
readonly long index 


当前 Option 元 素 在 它 包 含 的 Select 元 素 中 的 索引 。 该 属性 的 相关 
内 容 也 可 参见 HTMLOptionsCollection)。 


string label 


如 果 存 在 对 应 的 HTML label 属 性 的 话 ， 返 回 这 个 属性 的 值 ， 否 则 返 
回 当前 Option 的 textContent (参见 Node) 。 


boolean selected 
如 果 本 选项 当前 处 于 选中 状态 则 为 tue; 否则 为 false。 
string text 


当前 Option 元 素 的 textContent (参见 Node〉 ， 返 回 的 值 头 尾 的 空白 
字符 都 已 去 掉 ， 同 时 两 个 或 多 个 连续 的 空格 也 会 蔡 换 为 一 个 空格 。 


string value 


如 果 Option 存 在 HTML value 属 性 的 话 ， 返 回 这 个 属性 的 值 ， 人 否则 返 
回 当前 元 素 的 textContent。 


Output 
HTML 表 单 二 output 二 元 素 


Node、 Element、FormControl 


Output 对 象 表示 HTML 表单 中 的 <output> 元 素 。 在 支持 它 的 浏览 
中 ，Output 对 象 实现 FormControl 的 大 多 数 属性 。 


属性 
string defaultValue 


这 个 属性 是 Output 元 素 的 textContent 〈 人 参见 Node) 的 初始 值 。 当 表 
单 重 置 时 ， 它 的 值 将 恢复 为 这 个 值 。 如 果 设 置 了 这 个 属性 ， 并 且 对 应 的 
Output 元 系 当 前 正在 显示 它 之 前 的 defaultValue， 则 新 的 值 将 显示 。 合 
则 ， 当 前 显示 的 值 将 不 会 改变 。 


readonly DOMSettableTokenList htmlFor 


<output 之 元 素 的 HIML for 属 性 是 一 个 空格 分 隔 的 由 元 素 的 ID 组 成 
的 列表 ， 这 些 元 素 的 值 都 会 影响 这 个 二 output 过 元素 显 示 的 计算 内 容 。 
因为 for 是 JavaScript 的 一 个 保留 词 ， 所 以 对 应 的 JavaScript 属 性 名 为 
htmlFor。 可 以 像 一 个 普通 字符 串 值 一 样 对 这 个 属性 进行 读 写 操作 ， 或 
者 使 用 DOMTokenList 的 方法 来 从 这 个 列表 查询 并 设置 单个 元 素 ID。 





PagelransitionEvent 


pageshow 和 pagehide 事 件 的 事件 对 象 
Event 


当 一 个 文档 首次 加 载 时 ， 在 load 事 件 之 后 ， 浏 览 器 将 触发 一 个 


pageshow 事 件 ， 之 后 ， 每 次 这 个 页 面 从 内 存 历史 缓存 中 恢复 时 都 会 触发 
一 个 新 的 pageshow 事 件 。PageTransitionEvent 对 象 与 每 个 pageshow 事 件 
关联 ， 当 恢复 而 不 是 加 载 或 重新 加 载 页 面 时 ， 这 个 对 象 的 persisted 属 性 


将 为 true。 


pagehide 事 件 也 有 一 个 关联 的 PageTransitionEvent 对 象 ， 不 过 对 
pagehide 事 件 而 言 对 应 的 persisted 属 性 总 是 为 true。 


pageshow 和 pagehide 事 件 在 Window 对 象 上 和 触发。 它们 不 冒 泡 ， 也 没 
有 可 取消 的 默认 行为 。 


属性 





readonly boolean persisted 


对 pageshow 事 件 来 说 ， 当 从 网 络 或 硬盘 缓存 加 载 〈 或 重新 加 载 ) 页 
面 时 ， 这 个 属性 为 false。 如 果 自 内 存 绥 存 恢复 正在 显示 的 页 面 并 且 没 有 
重新 加 载 ， 则 这 个 属性 为 true。 


对 pagehide 事 件 来 说 ， 这 个 属性 总 是 为 true。 








PopStateEvent 
历史 转换 事件 


Event 


管理 自身 的 历史 《参见 22.2 节 ) 的 Web 应 用 程序 可 使 用 History 的 
pushState() 方 法 来 在 浏览 历史 中 创建 一 个 新 的 条 目 ， 并 将 一 个 状态 值 或 
对 象 与 之 关联 。 当 用 户 使 用 浏览 器 的 “后 退 ” 或 “前 进 ” 按 钮 在 这 些 保 存 的 
状态 之 间 导 航 时 ， 浏 览 器 将 在 Window 对 象 上 触发 一 个 popstate 事 件 ， 并 
传 入 关联 的 PopStateEvent 对 象 中 已 保存 的 应 用 状态 的 一 个 副本 。 


属性 








readonly any state 


这 个 属性 保存 传 入 到 History.pushState() 或 History.replaceState() 方 法 





中 的 状态 值 或 对 象 的 一 个 副本 。state 可 以 是 任意 能 用 结构 复制 算法 ( 参 
见 “ 结 构 性 复制 ”，22.2 节 〉 克隆 的 值 。 


ProcessingJInstruction 

XML 文档 中 的 进度 指示 

Node 

这 个 不 常用 的 接口 表示 XML 文档 中 的 处 理 指 令 〈Processing 
Instruction，PI) 。 使 用 HTML 文 档 的 程序 员 永 远 不 会 遇 到 


ProcessingInstruction 节 点 。 


属性 





string data 


处 理 指令 的 内 容 《〈 即 ， 目 标 之 后 的 第 一 个 非 空 字符 ， 直 到 但 不 包括 
结尾 的 ?二 ”) 。 


readonly string target 

处 理 指令 的 目标 。 这 是 紧 跟着 开头 的 “<?” 的 第 一 个 标识 符 ， 它 指 
定 当 前 处 理 指令 的 目标 “处 理 器 ”。 
Progress 

Node、Element 


Progress 对 象 表示 一 个 HIML 雪 progress 过 元素， 以 进度 条 的 一 个 图 
形 化 表示 方式 ， 显 示 某 种 任务 的 完成 度 。 


如 果 完 成 这 项 任务 所 需 的 工作 的 数量 或 时 间 未 知 ， 则 Progress 元 际 
将 处 于 不 确定 状态 。 在 这 种 状态 下 ， 它 只 是 简单 地 显示 菏 种 “工作 ” 动 
画 ， 表 示 有 些 事 正在 发 生 。 如 果 任 务 的 总 数 《〈 或 时 间 、 字 节 ) 以 及 已 完 
成 数量 都 已 知 ， 则 Progress 元 素 将 处 于 一 种 确定 状态 ， 可 以 以 茶 种 图 形 














化 的 完成 百分比 的 形式 显示 进度 。 


<progress 之 是 一 个 HIML5 元 素 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 
地 支持 。 


属性 
readonly Form form 


当前 元 素 对 应 的 Form 元 双 ， 如 条 存在 的 话 ， 这 个 Form 一 般 为 当前 
元 素 的 祖先 ， 或 者 由 HTML form 属 性 标识 。 


readonly NodeList labels 
与 当前 元 素 关 联 的 Label 元 素 组 成 的 类 数组 对 象 。 

double max 

要 完成 的 工作 的 总 数 。 比 如 ， 在 使 用 Progress 元 素来 显示 一 个 


XMLHttpRequest 的 上 传 或 下 载 进 度 时 ， 可 以 将 这 个 属性 设置 为 要 传输 
的 总 的 字 节 数 。 这 个 属性 是 max 属 性 的 映射 。 默 认 值 为 1.0。 





readonly double position 


如 果 这 是 一 个 进度 可 确定 的 Progress 元 素 ， 这 个 属性 为 value/max 的 
计算 结果 。 人 否则 ， 这 个 属性 将 是 -1。 


double value 


0 一 max 之 间 的 一 个 值 ， 标 识 已 经 完成 的 进度 。 这 个 属性 是 value 属 
性 的 映射 。 如 果 存 在 这 个 属性 ， 表 示 该 Progress 元 素 的 进度 可 确定 。 如 
果 它 不 存在 ， 则 表示 该 Progress 元 素 的 进度 不 可 确定 。 如 果 想 从 进度 可 
确定 模式 切换 为 进度 不 可 确定 模式 〈 比 如 由 于 来 自 MediaElement 的 停 消 
事件 ) ， 可 以 使 用 Element 的 removeAttribute() 方 法 。 








ProgressEvent 


下 载 、 上 传 或 文件 读 取 进 度 


上 vent 


ApplicationCache、FileReader 以 及 《第 2 级 ) XMLHttpRequest 对 象 
都 会 触发 Progress 事 件 ， 通 知 感 兴趣 的 程序 的 数据 传输 过 程 的 进度 〈 比 
如 ， 网 络 下 载 或 上 传 或 文件 读 取 ) 。 这 类 事件 一 般 称 为 Progress 事 件 ， 
但 实际 上 只 有 一 个 这 样 的 事件 真 的 在 名 字 里 有 "progress"。 其 他 由 
FileReader 和 XMLHttpRequest 触 发 的 Progress 事 件 为 loadstart、]load、 
loadend、error 以 及 abort。XMLHttpRequest 也 会 触发 一 个 超时 Progress 事 
件 。ApplicationCache 会 触发 很 多 事件 ， 但 只 有 那个 名 为 "progress" 的 事 
件 是 这 儿 摘 述 的 这 类 Progress 事 件 。 


Progress 事 件 依次 触发 ， 以 loadstart 事 件 开 始 ， 并 总 是 以 loadend 事 件 
结束 。loadend 之 前 的 事件 可 能 是 load、error 或 者 abort， 取 决 于 传送 数据 
的 操作 是 否 成 功 ， 以 及 如 果 不 成 功 的 话 是 如 何 失败 的 。 在 开始 的 
loadstart 和 最 后 的 两 个 事件 之 间 ， 可 能 会 有 0 个 或 多 个 进度 事件 〈 带 有 真 
实 的 事件 名 "progress") 触发 。 (ApplicationCache 对 象 会 触发 一 个 不 同 
的 事件 序列 ， 但 它 作 为 它 的 缓存 更 新 进程 的 一 部 分 触发 的 进度 事件 是 一 
个 Progress 事 件 。 ) 

一 个 定义 了 已 传送 了 多 少 字 节 的 数据 的 ProgressEvent 对 象 将 传 入 到 
Progress 事 件 的 事件 处 理 程 序 中 。 这 个 ProgressEvent 对 象 与 Progress 中 质 
述 过 的 HTML 过 progress 志 元素 没有 关系 ， 但 传 给 XMLHttpRequest 的 
onprogress 事 件 处 理 程序 〈 例 如 ) 的 ProgressEvent 对 象 可 用 来 更 新 去 
progress 之 元 素 的 状态 ， 以 便 辐 用 户 显示 可 视 化 的 下 载 完 成 百分比 值 。 


属性 
readonly boolean lengthComputable 


如 有 果 要 传送 的 字 节 的 总 数 已 知 则 为 tue; 否则 为 false。 如 果 这 个 属 
性 为 tue， 一 个 ProgressEvent e 的 数据 传送 完成 百分比 可 以 像 这 样 计算 : 














var percentComplete=Math.floor(100*e.loaded/e.total); 





readonly unsigned long loaded 


到 目前 为 止 已 传送 了 多 少 字 节 。 


readonly unsigned long total 


节 的 总 数 ， 则 返回 为 这 个 数字 ; 否则 返回 0。 
例如 ， 这 个 信息 可 能 来 自 Blob 的 size 属 性 或 者 web 服务 器 返回 的 Content- 
Length 头 信息 。 


Screen 

关于 显示 屏 的 信息 

Window 的 screen 必 性 指 代 一 个 Screen 对 象 。 这 个 全 局 对 象 
CWindow) 的 screen 属 性 包含 在 其 上 显示 对 应 浏览 器 的 计算 器 显示 器 的 
信息 。JavaScript 程 序 可 以 根据 这 个 信息 来 优化 它们 的 输出 ， 以 便 适 应 用 
户 的 显示 功能 。 例 如 ， 一 个 程序 可 以 根据 显示 尺寸 ， 选 择 显示 大 图 还 是 
小 图 。 


属性 














readonly unsigned long availHeight 


指明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 可 用 高 度 ， 单 位 为 像素 。 这 个 
可 用 高 度 不 包含 垂直 方向 上 显示 固定 的 菏 面 功能 的 空间 ， 比 如 在 屏幕 底 
部 的 工具 栏 或 停靠 栏 。 














readonly unsigned long availWidth 


虽 明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 可 用 宽度 ， 单 位 为 像 闵 。 
可 用 宽度 不 包含 水 平方 网上 显示 固定 的 桌面 功能 的 空间 。 








readonly unsigned long colorDepth 
readonly unsigned long pixelDepth 
这 两 个 同 义 属性 都 指定 屏幕 每 像素 的 色彩 深度 的 位 。 
readonly unsigned long height 
指明 在 其 上 显示 网 页 浏览 絮 的 屏 右 的 总 局 度 ， 单 位 为 像素 。 也 可 参 


见 availHeight。 


readonly unsigned long width 


中 明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 总 宽度 ， 单 位 为 像素 。 也 可 参 
见 availWidth 。 


Script 
HTML 二 script 二 元素 
Node、Element 


Script 对 象 表示 HIML<script 之 元素 。 它 的 大 多 数 属 性 只 是 同名 的 
HTML 属 性 的 简单 映射 ， 不 过 text 属 性 和 继承 自 Node 的 textContent 属 性 的 
工作 原理 类 似 。 


注意 ， 一 个 <<script> 至 多 只 运行 一 次 。 改 变 一 个 已 存在 的 和 script 
> 元 素 的 src 或 text 属 性 不 会 使 它 运行 新 的 脚本 。 不 过 ， 可 以 通过 在 新 创 
建 的 二 script 二 元 素 上 设置 这 些 属性 来 执行 一 个 脚本 。 还 需要 注意 ，< 
script 二 标签 只 有 在 插入 一 个 Document 后 才 会 运行 。 在 src 或 type 被 设置 
或 者 当 它 插入 到 文档 时 执行 脚本 ， 这 取决 于 哪个 操作 最 后 及 生 。 


属性 





boolean async 


如 有 果 二 script 二 元 素 有 async 属 性 则 为 tue; 否则 为 false。 参 见 13.3.1 
i 


string charset 


由 src ”URL 指定 的 脚本 的 字符 编码 。 通 常 不 设置 这 个 属性 ， 默 认 使 
用 包含 的 文档 的 相同 编码 来 解析 当前 脚本 。 


boolean defer 


如 果 <<script 之 元 素 有 defer 属 性 则 为 true; 否则 为 false。 参 见 13.3.1 


开 


string src 

要 加 载 的 脚本 的 URL。 

string text 

在 <<script 之 标签 和 结束 的 和 </script 之 标签 之 间 的 文本 。 
String type 


当前 脚本 语言 的 MIME 类 型 。 默 认为 "text/javascript"， 和 常规 
JavaScript 脚 本 可 以 不 用 设置 这 个 属性 (或 对 应 的 HTML 属 性 ) 。 如 果 将 
这 个 属性 设置 为 一 个 自 定义 的 MIME 类 型 ， 可 在 对 应 的 二 script 二 元 素 中 
磐 入 其 他 脚本 使 用 的 任意 文本 数据 。 


Select 
图 形 化 的 选择 列表 
Node、Element、FormControl 


Select 元 素 表示 HTML 二 select 二 标签 ， 用 于 同 用 户 显 示 一 个 图 形 化 
的 选择 列表 。 如 果 存 在 对 应 的 HTML ”multiple 属 性 ， 则 用 户 可 以 从 列表 
中 选择 任意 个 选项 。 如 果 这 个 属性 不 存在 ， 则 用 户 只 能 选择 一 个 选项 ， 
同时 选项 将 有 类 似 单 选 按 钮 的 行为 一 一 选中 一 个 选项 的 同时 将 取消 之 前 
选中 的 任意 选项 。 


Select 元 素 中 的 选项 可 以 以 两 种 不 同 的 方式 显示 。 如 果 size 属 性 有 值 
并 且 值 大 于 1， 或 者 指定 了 multiple 属 性 ， 则 选项 将 在 浏览 器 窗口 中 显示 
为 一 个 size 行 的 列表 框 。 如 果 size 比 选项 的 数目 小 ， 则 列表 框 将 包含 一 个 
深 动 条 。 男 一 方面 ， 如 果 size 为 1 并 有 旦 没有 指定 multiple 属 性 ， 则 当前 选 
中 的 选项 将 显示 在 单独 的 一 行 中 ， 其 他 选项 的 列表 可 通过 一 个 下 拉 羔 
访问 。 第 一 种 显示 样式 将 选项 显示 得 更 加 清晰 ， 但 需要 占用 浏览 器 窗口 
中 的 更 多 空间 。 第 二 种 显示 样式 需要 的 空间 最 少 ， 但 不 会 显 式 显示 其 他 
可 选 选 项 。 当 设置 了 mnultiple 属 性 时 ，size 默 认 值 为 4， 人 否则 size 的 默认 值 
为 1。 

















Select 元 系 的 options[] 属 性 最 值得 关注 。 它 是 一 个 由 入 option 之 元 素 

《参见 Option) 组 成 的 类 数组 对 象 ， 这 些 二 option 二 描述 Select 元 素 显 示 

的 选项 。 由 于 历史 原因 ， 这 个 类 数组 对 象 在 添加 及 删除 二 option 二 元 素 
时 有 一 些 与 众 不 同 的 行为 。 细 节 可 参见 HTMLOptionsCollection。 


对 没有 指定 multiple 属 性 的 Select 元 素来 说 ， 可 以 通过 selectedIndex 
属性 来 判断 选中 了 哪个 选项 。 不 过 ， 如 果 人 允许 复 选 的 话 ， 这 个 属性 就 只 
能 告诉 你 第 一 个 选中 的 选项 。 要 判断 选中 的 选项 的 完整 集合 ， 必 须 授 历 
options[] 数 组 并 检查 每 一 个 Option 对 象 的 selected 属 性 。 


属性 
除了 这 儿 列 出 的 属性 外 ，Select 元 素 也 定义 了 Element 和 FormControl 


的 属性 ， 另 外 还 通过 下 面 的 JavaScript 属 性 映射 了 对 应 的 HTML 属 性 : 
multiple、required 以 及 size。 





unsigned long length 


options 集 合 中 元 素 的 数目 。Select 对 象 本 身 就 是 一 个 类 数组 对 象 ， 
对 一 个 Select 对 象 s 以 及 一 个 数字 n 来 说 ，s[n] 等 同 于 s.options[n]。 





readonly HTMLOptionsCollection options 


当前 Select 元 素 包 含 的 Option 元 素 组 成 的 类 数组 对 象 。 关 于 这 个 集 
合 的 历史 原因 造成 的 特殊 行为 ， 可 参见 HTMLOptionsCollection 。 


long selectedIndex 


选中 的 选项 在 options 数 组 中 的 位 置 。 如 果 没 有 选项 选中 ， 则 这 个 属 
性 为 -1。 如 有 果 选 中 多 个 选项 ， 这 个 属性 返回 第 一 个 选中 的 选项 的 索引 。 


设置 这 个 属性 的 值 ， 将 导致 指定 的 选项 选中 ， 同 时 所 有 其 他 选项 取 
消 选 中 ， 即 使 这 个 Select 对 象 指定 了 multiple 属 性 。 在 处 理 列表 框 选项 
( 当 size 这 1) 时 ， 可 以 通过 设置 selectedIndex 为 -1 来 取消 选中 所 有 选 
项 。 注 意 ， 用 这 种 方式 改变 选择 不 会 触发 onchange0O 事 件 处 理 程序 。 








readonly 再 ITMLCojlection selectedOptions 
由 选中 的 Option 元 系 组 成 的 只 读 的 类 数组 对 象 。 这 是 HTML5 新 定义 


的 属性 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 文 持 。 

方法 

这 儿 列 出 的 方法 都 委托 给 options 属 性 的 同名 方法 ， 细 节 可 参见 
HTMLOptionsCollection。 除 了 这 些 方法 外 ，Select 元 素 也 实现 了 Element 
和 FormControl 的 方法 。 

void add(Element element,[any before]) 

这 个 方法 和 options.add() 一 样 ， 用 于 添加 一 个 新 的 Option 元 素 。 


any item(unsigned long index) 


这 个 方法 和 options.item0 一 样 ， 返 回 一 个 Option 元 素 。 在 用 户 直接 
检索 Select 对 象 时 也 会 调用 这 个 方法 。 


anynamedItem(string name) 


这 个 方法 和 options.namedItem() 一 样 。 参 见 
HIMLOPptionsCollection 。 


void remove(long index) 


这 个 方法 和 options.remove() 一 样 ， 用 于 移 除 一 个 Option 元 素 。 参 见 
HIMLOPptionsCollection 。 


Storage 


客户 端 存储 的 name/value 对 


Window 的 localStorage 和 sessionStorage 属 性 都 是 Session 对 象 ， 表 示 
持久 的 客户 端 关 联 数组 ， 这 些 数组 将 字符 串 键 与 值 对 上 应。 理论 上 ， 
Session 对 象 可 以 存储 任意 可 用 结构 性 复制 算法 (参见 “结构 性 复制 ”， 
2 复制 的 值 。 不 过 ， 在 写作 本 书 的 时 候 ， 各 浏览 器 还 只 文 持 字 符 


Storage 对 象 的 方法 允许 添加 新 的 键 / 值 对 、 移 除 键 / 值 对 ， 以 及 但 询 





指定 的 键 对 应 的 值 。 不 过 ， 不 需要 显 式 地 调用 这 些 方法 : 可 以 使 用 数组 
检索 或 delete 操 作 符 来 代 蔡 ， 还 能 将 localStorage 和 sessionStorage 当 做 普 
通 JavaScript 对 象 来 处 理 。 


如 采 改 变 了 有 某 个 Storage 对 象 的 内 容 ， 有 权限 访问 同一 个 存储 器 〈 
为 它们 正在 显示 来 自 同 一 个 源 的 文档 〉 的 任何 其 他 Window 都 将 通过 一 
个 StorageEvent 事 件 通 知 这 个 改变 。 


属性 





readonly unsigned long length 

己 存 储 的 键 / 值 对 的 数目 。 

方法 

void clear() 

移 除 所 有 已 存储 的 健 / 值 对 。 

any getItem(string key) 

返回 与 key 对 应 的 值 。《〈 在 写作 本 书 时 各 大 浏览 右 的 实现 中 ， 返 回 
值 总 是 为 一 个 字符 串 。) 当 为 了 检索 名 为 key 的 属性 而 检索 Storage 对 和 象 
时 ， 会 隐 式 调用 这 个 方法 。 

string key(unsigned long n) 


返回 当前 Stroage 对 象 中 的 第 n 个 键 ， 如 果 n 大 于 或 等 于 length 则 返回 
nul。 注 意 ， 添 加 或 移 除 键 / 值 对 时 键 的 顺序 可 能 会 改变 。 


void removeItem(string key) 


从 当前 Storage 对 象 中 移 除 键 key 以 及 它 对 应 的 值 。 使 用 delete 操 作 删 
除 当前 Storage 对 象 的 名 为 key 的 属性 时 ， 将 会 隐 式 调用 这 个 方法 。 


void setItem(string key,any value) 


添加 指定 的 key 和 value 到 当前 Storage 对 象 中 ， 如 果 已 经 存在 键 key， 


则 使 用 新 的 值 蔡 换 对 应 的 老 值 。 如 果 为 当前 Storage 对 象 的 名 为 key 的 属 
性 赋值 value， 则 会 隐 式 调用 这 个 方法 。 这 就 是 说 ， 可 以 使 用 普通 的 
JavaScript 属 性 的 访问 及 赋值 语法 来 代 蔡 显 式 地 调用 setItem()。 


StorageEvent 


Event 


Window 对 象 的 localStorage 和 sessionStorage 属 性 指 代 代表 客户 端 存 
储 区 的 Storage 对 象 〈 参 见 20.1 节 ) 。 如 果 多 个 窗口 、 标 签 或 框架 页 面 正 
在 显示 来 自 同 一 个 源 的 文档 ， 则 这 些 窗口 将 有 权限 访问 同一 个 存储 区 。 
如 果 一 个 窗口 中 的 脚本 改变 了 某 个 存储 区 的 内 容 时 ， 在 其 他 共享 访问 这 
个 存储 区 的 Window 对 象 上 都 会 触发 一 个 存储 事件 。“〈 注 意 ， 这 个 事件 
不 会 在 造成 这 个 改变 的 窗口 触发 。) 存储 事件 将 在 Window 对 象 上 触 
发 ， 且 不 会 冒 泡 ， 也 没有 可 供 取消 的 默认 操作 。 与 存储 事件 关联 的 对 象 
是 一 个 StorageEvent 对 象 ， 它 的 属性 摘 述 发 生 在 存储 区 的 改变 。 


属性 














readonly string key 


这 个 属性 为 刚 设置 或 删除 的 键 。 如 果 整 个 存储 区 被 Storage.clear() 方 
法 清空 了 ， 则 这 个 属性 (以 及 newValue 和 oldValue) 将 为 null。 


readonly any newValue 


指定 key 的 新 值 。 如 果 对 应 的 键 移 除 ， 则 这 个 值 将 为 null。 在 写作 本 
书 的 时 候 ， 各 浏览 器 的 实现 还 只 允许 存储 字符 串 值 。 


readonly any oldValue 


刚刚 改变 的 键 的 旧 值 ， 如 果 这 个 键 是 新 添加 到 存储 区 的 ， 则 这 个 值 
为 nul 1]。 在 写作 本 书 的 时 候 ， 各 浏览 器 的 实现 还 只 允许 存储 字符 串 值 。 





readonly Storage storageArea 


这 个 属性 等 同 于 接收 这 个 事件 的 Window 的 localStorage 或 
sessionStorage 属 性 ， 指 明 哪 个 存储 区 发 生 了 改变 。 


readonly string Url 


这 是 改变 了 存储 区 的 脚本 所 属 的 文档 的 URL。 





Style 
HTML<style> 元 素 
Node、Element 
Style 对 象 表示 HITML<<style 之 标签 。 
属性 
boolean disabled 


将 这 个 属性 设置 为 true 将 禁用 与 这 个 二 style> 元 素 关 联 的 样式 表 ， 
将 它 设置 为 false 将 重新 启用 它 。 


string media 


这 个 属性 反映 了 HTML media 属 性 ， 指 定 了 当前 样式 应 用 的 媒体 。 





boolean scoped 


如 果 HTML scoped 属性 出 现在 当前 过 style 二 元 素 上 ， 则 此 属性 为 
true; 否则 为 false。 在 写作 本 书 的 时 候 ， 各 浏览 器 还 不 支持 这 个 属性 。 


readonly CSSStyleSheet sheet 

当前 过 style 二 元 素 定 义 的 CSSStyleSheet。 

string title 

所 有 HTML 元 素 都 支持 一 个 title 属 性 。 在 二 style 二 元 素 上 设置 这 个 
属性 后 ， 用 户 将 可 以 通过 标题 来 选择 样式 表 作 为 一 个 蔡 换 样式 表 )， 
指定 的 标题 可 能 会 以 某 种 形式 显示 在 Web 浏 览 右 的 用 户 界面 上 。 


string type 


反映 对 应 的 HIML type 属 性。 默认 值 为 "textycss"， 一 般 不 需要 设置 
这 个 属性 。 


Table 

HIML=table> 

Node、Element 

Table 对 象 表 示 HTML <table 过 元素 ， 它 定义 了 奋 干 方便 的 属性 和 方 
法 来 查询 及 修改 表格 的 各 个 部 分 。 这 些 方法 及 属性 让 表格 操作 更 简单 ， 
不 过 它们 的 功能 也 可 以 使 用 核心 DOM 方 法 来 复制 。 


HTML 表 格 由 段落 (section) 、 行 以 及 单元 格 组 成 。 参 见 
TableCell、TableRow 以 及 TableSection。 


属性 


除了 这 儿 列 出 的 属性 ，Table 元 素 也 有 一 个 summary 属 性 ， 对 应 同名 
的 HTML 属 性 。 





Element caption 


指 代 当 前 表格 的 <caption> 元 素 ， 如 果 这 个 元 素 不 存在 则 为 null。 





readonly 再 TIMLCollection rows 


由 当前 表格 中 所 有 行 对 应 的 TableRow 对 象 组 成 的 类 数组 对 象 。 这 包 
含 在 二 thead 之 、<<tfoot> 以 及 过 tbody> 标 签 中 定义 的 所 有 行 。 


readonly HIMLCollection tBodies 


由 当前 表格 中 所 有 二 tbody 二 段落 对 应 的 TableSection 对 象 组 成 的 类 
数组 对 象 。 


TableSection tFoot 


当前 表格 的 <tfoot 二 > 元 系 ， 如 果 不 存在 对 应 的 元 素 则 为 null。 


TableSection tHead 

当前 表格 的 入 thead> 元 素 ， 如 有 果 不 存在 对 应 的 元 又 则 为 null。 
方法 

Element createCaption() 


这 个 方法 返回 一 个 对 应 当前 表格 的 入 caption> 的 Element 对 象 。 如 
果 当 前 表格 已 经 有 一 个 二 caption 之 ， 这 个 方法 将 简单 地 返回 它 。 如 果 当 
前 表格 没有 过 caption 之 ， 则 这 个 方法 先 创建 一 个 新 的 〈 空 ) 标题 ， 将 它 
插入 表格 ， 然 后 再 返回 它 。 


TableSection createTBody() 


这 个 方法 创建 一 个 新 的 入 tbody> 元 系 ， 将 它 插 入 到 表格 中 ， 并 返 
回 它 。 新 元 素 将 插入 到 表格 的 最 后 一 个 <tbody 二 之 后 ， 或 者 插入 到 表 
格 的 结尾 处 。 


TableSection createTFoot() 


这 个 方法 返回 代表 当前 表格 中 第 一 个 二 tfoot 二 元 素 的 TableSection。 
如 果 当 前 表格 已 经 有 一 个 页 脚 ， 这 个 方法 将 简单 地 返回 它 。 如 果 当 前 表 
格 没有 二 tfoot>， 则 这 个 方法 先 创建 一 个 新 的 〈 空 ) 二 tfoot>， 将 它 插 
入 表格 ， 然 后 再 返回 它 。 


TableSection createTHead() 


这 个 方法 返回 代表 当前 表格 中 第 一 个 二 thead 之 元素 的 
TableSection。 如 果 当 前 表格 已 经 有 一 个 页 眉 ， 这 个 方法 将 简单 地 返回 
它 。 如 果 当 前 表格 中 没有 天 thead 之 ， 则 这 个 方法 先 创 建 一 个 新 的 〈 空 ) 











void deleteCaption() 


移 除 当前 表格 的 第 一 个 <<caption 之 元 素 ， 如 果 存 在 这 样 的 元 象 的 
i 


void deleteRow(long index) 


这 个 方法 从 当前 表格 中 删除 指定 位 置 的 行 。 表 格 的 各 行 按 它们 在 文 


档 源 码 中 的 出 现 顺 序 编 号 。<thead 之 和 <<tfoot> 部 分 中 的 行 与 表格 中 其 
他 行 一 起 编号 。 


处 ， 


void deleteTFoot() 
移 除 当前 表格 的 第 一 个 <tfoot> 元 素 ， 如 果 存 在 这 样 的 元 素 的 话 。 
void deleteTHead() 


移 除 当 前 表格 的 第 一 个 二 thead 二 元 素 ， 如 果 存 在 这 样 的 元 素 的 话 。 
TableRow insertRow([long index]) 


这 个 方法 创建 一 个 新 的 二 tr 元素， 将 它 插 入 当前 表格 的 指定 index 
并 返回 它 。 


新 的 行将 插入 到 索引 为 index 处 的 已 有 行 前 方 相 邻 的 位 置 ， 并 与 这 


个 指定 的 行 在 同一 个 部 分 中 。 如 果 index 等 于 当前 表格 的 行 数 (或 -1) ， 
则 新 行将 妃 加 到 当前 表格 的 最 后 一 个 部 分 中 。 如 果 表 格 初始 状态 为 空 ， 
则 这 个 新 行将 先 插 入 到 一 个 新 的 <tbody 二 段落 ， 然 后 随 着 这 个 <<tbody 
> 一 起 插入 到 表格 中 。 


中 。 


可 以 使 用 方便 的 方法 TableRow.insertCell0 来 添加 内 容 到 新 创建 的 行 
也 可 参见 TableSection 的 insertrRow() 方 法 。 


TableCell 


HIML 表 格 中 的 单元 格 

Node、Element 

TableCell 对 象 表 现 为 二 td 二 或 过 了 h 二 元 素 。 
属性 

readonly long cellIndex 


当前 单元 格 在 它 所 属 的 行 中 的 位 置 。 


unsigned long colSpan 
对 应 的 HIML conspan 属 性 的 值 ， 数 字形 式 。 
unsigned long rowSpan 


对 应 的 HTML rowspan 属 性 的 值 ， 数 字形 式 。 
TableRow 
HTML 表 格 中 的 tr 二 > 元素 


Node、 Element 


TableRow 对 象 表 示 HTML 表 格 中 的 一 行 (一 个 过 tr 过 元 素 ) ， 它 定 
义 了 若干 操作 这 一 行 包含 的 TableCell 元 素 的 属性 及 方法 。 


属性 
readonly HTMLCollection cells 


9560 00 
组 对 象 。 


readonly long rowIndex 
当前 行 在 表格 中 的 索引 。 


readonly long sectionRowIndex 





当前 行 在 所 属 的 部 分 中 《例如 ， 在 包含 它 的 过 thead 之 、 雪 tbody> 
或 过 tfoot 二 中 ) 的 位 置 。 


方法 
void deleteCell(long index) 


这 个 方法 在 当前 行 中 删除 指定 index 处 的 单元 格 。 





Element insertCell([long index]) 


这 个 方法 创建 一 个 新 的 二 td 二 元 素 ， 将 它 插 入 到 当前 行 的 指定 位 
置 ， 并 返回 这 个 元 际 。 新 的 单元 格 将 插入 到 当前 位 于 index 指 定 的 位 置 
的 单元 格 的 前 方 相 邻 位 置 。 如 果 index 省 略 、 值 为 -1 或 等 于 当前 行 中 单元 
格 的 数目 ， 则 新 的 单元 格 将 退 加 到 当前 行 的 最 后 。 


注意 ， 这 个 方便 的 方法 只 插入 二 td 二 数据 单元 格 。 如 果 需 要 添加 一 
个 标题 单元 格 到 一 行 中 ， 必 须 使 用 Document.createFElement() 方 法 及 
Node.insertBefore() 或 相关 的 方法 来 创建 及 插入 < 了 h 二 元 素 。 





TableSection 

表格 的 页 眉 、 页 脚 或 正文 部 分 

Node、Element 

TableSection 对 象 表示 HTML 表 格 中 的 二 tbody>、 雪 thead> 或 去 
tfoot 过 元素。 表格 的 tHead 和 tFoot 属 性 是 TableSection 对 象 ，tBodies 属 性 
是 由 TableSection 对 象 组 成 的 一 个 HTMLCollection。 

TableSection 包 含 生 和 干 TableRow 对 象 ， 同 时 属于 某 个 Table 对 象 。 

属性 

readonly HTMLGCollection rows 

由 TableRow 对 象 组 成 的 类 数组 对 象 ， 代 表 当 前 表格 中 本 部 分 的 所 有 


方法 

void deleteRow(long index) 

这 个 方法 删除 当前 部 分 中 指定 位 置 的 行 。 
TableRow insertRow([long index]) 


这 个 方法 创建 一 个 新 的 二 tr 二 元 素 ， 将 它 插 入 到 当前 表格 部 分 中 的 





指定 位 置 ， 并 返回 这 个 元 素 。 如 果 index 为 -1 或 省 略 或 者 等 于 当前 部 分 中 
的 行 数 ， 则 新 的 行将 退 加 到 当前 部 分 的 结尾 。 人 否则 ， 新 的 行将 插入 到 当 
前 由 index 指 定位 置 处 的 行 前 方 相 邻 的 位 置 。 注 意 ， 在 这 个 方法 中 ， 
index 指 定 的 是 在 一 个 单独 的 表格 部 分 中 的 茶 一 行 的 位 置 ， 而 不 是 在 整 
个 表格 中 的 位 置 。 








Text 
文档 中 的 一 串 文 本 
Node 


Text 节 点 表现 为 文档 中 的 一 串 文本 ， 通 党 在 文档 树 中 作为 某 个 
Element 的 子 节点 出 现 。Text 节 点 的 内 容 可 通过 data 属 性 或 nodeValue 以 及 
继承 自 Node 的 textContent 属 性 访问 。 可 使 用 Document.createTextNodel() 
方法 创建 新 的 Text 节 点 。Text 节 点 永远 不 会 有 子 节 点 。 


属性 





string data 
当前 市 点 包含 的 文本 。 

readonly unsigned long length 
当前 市 反对 应 文本 的 字符 长 度 。 
readonly string wholeText 


当前 节点 以 及 与 它 前 后 相 邻 的 文本 节点 的 文本 内 容 。 如 果 在 父 节 点 
上 调用 过 normalize0) 方 法 ， 则 这 个 属性 的 值 将 与 data 的 值 相 同 。 


方法 


除非 你 在 写 一 个 基于 Web 的 文本 编辑 器 应 用 ， 不 然 这 些 方 法 应 该 不 
会 经 和 常用 到 。 


void appendData(string text) 


这 个 方法 追加 指定 的 text 到 当前 Text 节 点 结尾 处 。 
void deleteData(unsigned long offset,unsigned long count) 


这 个 方法 从 当前 Text 节 点 中 删除 从 位 置 offset 的 字符 开始 的 count 个 
字符 。 如 条 offset 加 上 count 大 于 当前 Textm 点 中 的 字符 数目 ， 则 当前 字 
符 串 中 从 offset 开 始 到 结尾 的 字符 都 将 删除 。 


void insertData(unsigned long offset,string text) 
这 个 方法 将 指定 的 text 插 入 到 TextT 点 的 offset 位 置 处 。 
void replaceData(unsigned long offset,unsigned long count,string text) 


这 个 方法 用 字符 串 text 的 内 容 蔡 换 自 offset 开 始 的 count 个 人 字符。 如果 
offset 与 count 的 和 大 于 Text 节 点 的 长 度 ， 则 从 offset 开 始 的 所 有 字符 都 将 
蔡 换 。 


Text replaceWholeText(string text) 


这 个 方法 创建 一 个 包含 指定 text 的 新 的 Text 节 点 。 然 后 ， 当 前 节点 
及 所 有 相 邻 的 Text 节 点 都 将 被 这 个 新 节点 蔡 换 ， 最 后 返回 这 个 新 的 节 
点 。 参 见 上 面 的 wholeText 属 性 以 及 Node 的 normalize() 方 法 。 


Text splitText(unsigned long offset) 


这 个 方法 将 Text 节 点 在 指定 的 offset 处 切 分 为 两 个 。 原 来 的 Text 节 点 
会 改变 ， 它 将 由 从 开始 位 置 到 (但 不 包含 ) offset 的 所 有 文本 组 成 。 同 
时 ， 将 创建 一 个 新 的 Text 节 点 ， 包 含 从 (并 且 包 含 ) offset 位 置 到 字符 串 
结尾 的 所 有 字符 。 这 个 新 的 Text 节 点 将 是 这 个 方法 的 返回 值 。 另 外 ， 如 
果 原 来 的 Text 节 点 有 父 节点 parentNode， 则 新 节点 将 插入 到 这 个 父 节点 
中 ， 紧 跟 在 原来 的 节点 后 面 。 














string substringData(unsigned long offset,unsigned long count) 


这 个 方法 从 Text 节 点 的 文本 中 提取 出 一 个 子 串 ， 内 容 为 自 位 置 offset 
开始 的 count 个 字符 。 如 果 Text 节 点 包含 的 文本 非常 多 ， 用 这 个 方法 可 能 
会 比 用 String.substring() 更 有 效率 。 


TextArea 
多 行文 本 输入 区 
Node、 Element、FormControl 


TextArea 对 象 表示 HTML 二 textarea 放 元 素 ， 通 常 在 HTML 表 单 中 用 
于 创建 多 行 的 文本 输入 区 。 文 本 输入 区 的 的 初始 值 在 二 textarea 和 
二 /textarea 标 签 之 间 以 纯 文 本 格式 指定 。 可 以 使 用 value 属 性 查询 或 设 
置 显示 的 文本 。 


TextArea 是 一 个 类 似 Input 和 Select 的 表单 控件 。 类 似 这 些 对 象 ， 它 
也 定义 了 form、name、type、vValue 属 性 ， 以 及 FormControl 文 档 中 提 到 
的 其 他 属性 及 方法 。 


属性 
除了 这 儿 列 出 的 属性 ，TextArea 元 素 也 定义 了 Element 和 
FormControl 的 属性 ， 同 时 还 使 用 下 面 的 JavaScript 属 性 映射 了 知 干 


HTML 属 性 : cols、maxLength、rows、placeholder、readOnly、required 
以 及 wrap。 





string defaultValue 


当前 过 textarea 二 元素 的 初始 纯 文本 内 容 。 当 表单 重 置 时 ， 文 本 区 将 
重 置 为 这 个 值 。 这 个 属性 相当 于 从 Node 继 承 的 textContent 属 性 。 





unsigned long selectionEnd 


返回 或 设置 选中 文本 后 面 的 第 一 个 输入 字符 的 索引 。 也 可 参见 


setSelectionRange()。 


unsigned long selectionStart 


返回 或 设置 当前 过 textarea 二 中 第 一 个 选中 字符 的 索引 。 也 可 参见 
setSelectionRange()。 


readonly unsigned long textLength 


value 属 性 (参见 FormControl〉 的 字符 数 。 
方法 


除了 这 儿 列 出 的 方法 ，TextArea 元 素 也 实现 了 Element 和 
FormControl 的 方法 。 


void select() 


这 个 方法 选中 当前 <textarea>> 元 素 显示 的 所 有 文本 。 在 大 多 数 浏览 
器 中 ， 这 意味 着 这 些 文本 将 高 亮 显示 ， 用 户 新 输入 的 文本 将 普 换 这 些 高 
亮 显示 的 文本 而 不 是 追加 到 它们 后 面 。 








void setSelectionRange(unsigned long start,unsigned long end) 


选中 当前 过 textarea 二 中 显示 的 文本 ， 从 位 置 start 处 的 字符 开始 ， 一 
直到 (但 不 包括 ) 位 置 end 处 的 字符 。 


Text Metrics 

字符 串 或 文本 的 度量 

TextMetrics 对 象 由 CanvasRenderingContext2D 的 measureText() 方 法 
返回 。 它 的 width 属 性 为 度量 过 的 文本 的 宽度 ， 单 位 为 CSS 像 素 。 将 来 可 
能 还 会 添加 更 多 的 度量 。 

属性 

readonly double width 

度量 过 的 文本 的 宽度 ， 单 位 为 CSS 像 素 。 
TimeRanges 

媒体 时 间 区 间 的 集合 


MediaElement 的 buffered、played 以 及 seekable 属 性 分 别 表示 媒体 时 
间 轴 的 一 部 分 缓存 了 数据 、 已 经 播放 过 了 以 及 可 以 从 当前 位 置 回 放 。 时 








间 轴 的 这 些 部 分 可 能 包 念 多 个 互 不 相交 的 时 间 区 间 “《〈 比 如 ， 当 用 户 跳 到 
一 个 视频 的 中 间 时 ， 对 played 属 性 来 说 吏 是 这 样 ) 。 一 个 TimeRanges 对 
象 代表 0 个 或 多 个 互 不 相交 的 时 间 区 间 。 它 的 length 属 性 指明 区 间 的 数 
目 ，start() 和 end() 方 法 则 返回 每 个 区 间 的 边界 。 











由 MediaElement 返 回 的 TimeRanges 对 象 总 是 规范 化 的 
Cnormalized ) ; 这 束 是 说 ， 它 们 包含 的 区 间 总 是 有 序 的 、 非 空 的 ， 也 
不 会 相互 连接 或 重 装 。 
属性 
readonly unsigned long length 


当前 TimeRanges 对 象 代表 的 区 间 的 数目 。 





方法 

double end(unsigned long D) 

返回 时 间 区 间 n 的 结束 时 间 (单位 为 秒 ) ， 如 果 n 小 于 0 或 大 于 等 于 
length 则 抛 出 异常 。 

double start(unsigned long n) 

返回 时 间 区 间 n 的 开始 时 间 (单位 为 秒 ) ， 如 果 n 小 于 0 或 大 于 等 于 
length 则 抛 出 异常 。 


TypedArray 

定 尺 寸 的 二 进 制 数组 

ArrayBufferView 

TypeArray 是 一 个 ArrayBufferView， 它 将 一 个 基本 的 ArrayBuffer 的 
字 节 转换 为 一 个 由 数字 组 成 的 数组 ， 并 允许 读 或 写 这 个 数组 的 元 素 。 这 
儿 没 有 单独 的 名 为 TypedArray 的 文档 ， 实 际 上 ， 它 包含 8 个 不 同类 型 的 


类 型 化 数组 (typed array) 。 这 8 种 类 型 都 是 ArrayBufferView 的 子 类 型 ， 
它们 彼此 之 间 的 不 同 只 在 于 每 个 数组 元 素 的 字 节 数 以 及 解释 这 些 字 节 的 








方式 。 这 8 种 类 型 是 : 


Int8Array 
每 个 数组 元 素 一 个 字 节 ， 解 释 为 一 个 有 符号 整数 。 
Int16Array 


每 个 数组 元 系 两 个 字 节 ， 解 释 为 一 个 有 符 写 整数 ， 使 用 平台 字 市 顺 


Int32Array 


每 个 数组 元 素 4 个 字 节 ， 解 释 为 一 个 有 符号 整数 ， 使 用 平台 字 节 顺 


Uint8Array 
每 个 数组 元 素 一 个 字 节 ， 解 释 为 一 个 无 符号 整数 。 
Uint16Array 


每 个 数组 元 素 两 个 字 节 ， 解 释 为 一 个 无 符号 整数 ， 使 用 平台 字 节 顺 


Uint32Array 


每 个 数组 元 素 4 个 字 节 ， 解 释 为 一 个 无 符号 整数 ， 使 用 平台 字 节 顺 


Float32Array 
每 个 数组 元 素 4 个 字 节 ， 解 释 为 一 个 浮 点 数 ， 使 用 平台 字 节 顺序 。 
Float64Array 
每 个 数组 元 素 8 个 字 节 ， 解 释 为 一 个 浮 点 数 ， 使 用 平台 字 节 顺序 。 


就 像 名 字 所 暗示 的 ， 这 些 都 是 类 数组 对 象 ， 可 以 通过 普通 的 方 括号 











数组 记号 来 存 取 元 素 。 不 过 要 注意 ， 这 些 类 型 的 对 象 总 是 固定 长 度 的 。 


注意 上 面 的 描述 ，TypedArray 类 型 使 用 后 层 平台 的 默认 季节 顺序 。 
关于 可 以 显 式 控制 字 节 顺序 的 ArrayBuffer 视 图 请 参见 DataView。 


构造 沙 数 





new TypedArray(unsigned long length) 

new TypedArray(TypedArray array) 

new TypedArray(type[]jarray) 

new TypedArray(ArrayBuffer buffer,[unsigned long byteoffset], [unsigned long 
length]) 


0 以 用 上 面 4 种 方式 调用 。 构 造 函 数 如 
TL 


-如果 以 一 个 单独 的 数字 参数 调用 构造 函数 ， 它 将 创建 一 个 新 的 共 
有 指定 数目 的 元 素 的 类 型 化 数组 ， 每 个 元 素 将 初始 化 为 0。 


如果 传 入 一 个 类 型 化 数组 对 象 ， 则 这 个 构造 函数 将 创建 一 个 新 的 
类 型 化 数组 ， 其 元 际 的 数目 与 参数 数组 元 素 的 数目 一 致 ， 然 后 将 参数 数 
参数 数组 的 类 型 可 与 和 创建 的 数组 的 
类 型 不 同 。 


:如 果 传 入 一 个 数组 《真实 的 JavaScript 数 组 ) ， 则 构造 函数 将 创建 
一 个 新 的 类 型 化 数组 ， 其 元 系数 目 与 参数 数组 元 素 的 数目 一 致 ， 然 后 将 
参数 数组 的 元 系 值 复制 到 新 数组 中 。 


:最 后 ， 如 果 传 入 一 个 ArrayBuffer 对 象 以 及 可 选 的 偏 移 和 长 度 参 
数 ， 则 构造 函数 将 创建 一 个 新 的 类 型 化 数组 ， 这 个 数组 将 是 指定 
ArrayBuffer 的 指定 区 域 的 一 个 视图 。 新 的 TypedArray 的 长 度 取决 于 
ArrayBuffer 区 域 以 及 类 型 化 数组 的 元 素 尺寸 。 











常量 
long BYTES_PER ELEMENT 


当前 数组 的 每 个 元 素 在 基本 的 ArrayBuffer 中 占用 的 字 节 数 。 这 个 常 
量 的 值 可 能 为 1、2、4 或 8， 取 决 于 使 用 了 哪 种 类 型 的 TypedArray。 





属性 
readonly unsigned long length 


数组 中 元 素 的 数目 。TypedArray 具 有 固定 长 度 ， 这 个 属性 的 值 永远 
不 会 改变 。 注 意 ， 这 个 属性 一 般 来 说 不 等 于 继承 自 ArrayBufferView 的 
byteLength 属 性 。 





方法 

void set(TypedArray array,[unsigned long offset]) 

从 索引 offset 处 开始 ， 复 制 array 的 元 素 到 当前 类 型 化 数组 中 。 
void set(number[ Jarray,[unsigned long offset]) 


这 个 版 本 的 set() 和 上 面 一 个 类 似 ， 不 过 它 使 用 的 是 真实 的 JavaScript 
数组 ， 而 不 是 类 型 化 数组 。 





TypedArray subarray(long start,1long end ) 





返回 一 个 和 当前 TypedArray 使 用 同一 个 基本 ArrayBuffer 的 新 
TypedArray。 返 回 的 数组 的 第 一 个 元 素 是 当前 数组 的 start 位 置 处 的 元 
素 ， 同 时 返回 的 数组 的 最 后 一 个 元 素 是 当前 数组 的 end-1 位 置 处 的 元 
素 。 如 果 start 或 end 为 负数 ， 则 偏 移 量 将 从 当前 数组 的 尾部 开始 计算 。 


URL 

Blob URL 方 法 

Window 对 象 的 URL 属 性 指 代 这 个 URL 对 象 。 将 来 这 个 对 象 可 能 会 
变 成 一 个 URL 解 析 及 操作 工具 类 的 构造 函数 。 不 过 ， 在 写作 本 书 的 时 
候 ， 它 还 只 是 为 下 面 描 述 的 两 个 Blob URL 方 法 提供 一 个 命名 空间 。 更 多 
关于 Blob 和 Blob UREL 的 内 容 请 参见 22.6 节 和 22.6.4 节 。 


在 写作 本 书 的 时 候 ，URL 对 象 还 很 新 ， 它 的 API 还 没有 稳定 。 可 能 
需要 带 上 三 商定 义 的 前 组 来 使 用 它 ， 比 如 webkitURL 。 





string createObjectURL(Blob blob) 


根据 指定 的 blob 返 回 一 个 Blob URL。 对 这 个 URL 执 行 HTTP GET 请 
求 将 返回 对 应 的 blob 的 内 容 。 


void revokeObjectURL (string url) 


0 url， 之 后 它 将 不 再 与 任何 Blob 关 联 ， 也 不 可 以 再 
[0 载 。 


Video 
HTML 二 video 二 元 素 
Node、 Element、MediaFElement 


Video 对 象 表示 HTML 二 video 二 > 元素。 二 video 宝 和 二 audio 放 元 素 非 
第 类 似 ， 它 们 共同 的 属性 和 方法 的 文档 位 于 MediaElement 部 分 。 这 儿 是 
Video 对 象 专 有 的 一 些 属 性 。 

属性 

DOMSettableTokenList audio 

这 个 属性 指定 当前 视频 的 音频 选项 。 对 应 的 选项 在 HTML audio 属 
性 中 以 空格 分 隔 的 标记 列表 定义 ， 这 个 集合 在 JavaScript 中 映射 为 一 个 
DOMSettableTokenList。 不 过 ， 在 写作 本 书 的 时 候 ，HTML5 标 准 还 只 定 


义 了 一 个 合法 标记 《"muted"〉 ， 因 此 ， 可 以 将 这 个 属性 当做 一 个 字符 
串 处 理 。 





unsigned long height 


当前 过 video 之 元 系 在 屏幕 上 的 高 度 ， 单 位 为 CSS 像 素 。 对 应 HTML 
height 属 性 。 


string poster 


在 视频 开始 播放 之 前 显示 为 “海报 帧 ”的 图 片 的 URL。 对 应 HIML 
poster 属 性 。 


readonly unsigned long videoHeight 
readonly unsigned long video Width 


这 两 个 属性 返回 当前 视频 的 原始 高 度 和 宽度 〈 即 ， 它 的 帧 的 斥 
寸 ) ， 单 位 为 CSS 像 素 。 在 二 video> 元 素 加 载 视频 的 元 数据 
(metadata) 之 前 (readyState 仍 旧 是 HAVE_NOTHING,， loadedmetadata 
事件 还 没有 被 分 发 ) ， 这 两 个 属性 都 为 0。 


unsigned long width 


当前 二 video 之 元 素 在 屏幕 上 的 宽度 ， 单 位 为 CSS 像 素 。 对 悄 HTML 
width 属性 。 


WebSocket 
一 个 双 同 的 类 套 接 字 的 网 络 连 接 
EventTarget 


WebSocket 表 示 一 个 支持 WebSocket 协 议 的 到 某 个 服务 器 的 长 生命 
周期 的 、 双 同 的 、 类 套 接 字 的 网 络 连 接 。 这 个 网 络 连 接 模 型 和 HTTP 的 
请 求 / 啊 应 模型 有 着 根本 的 不 同 。 可 以 使 用 WebSocket0 构 造 函 数 创 建 一 
个 新 的 连接 ， 使 用 send0) 方 法 发 送 文本 消息 到 服务 器 ， 同 时 为 消息 事件 
注册 处 理 程 序 以 全 接收 来 自 服务 器 的 消 明 。 更 多 细节 可 参考 22.9 节 。 


WebSocket 是 新 的 Web API， 在 写作 本 书 的 时 候 ， 还 没有 被 所 有 浏 
览 吉文 持 。 











new WebSocket(string url, [string[]jprotocols]) 





WebSocket() 构 造 函 数 创建 一 个 新 的 WebSocket 对 象 ， 并 开始 异 
地 ) 建立 一 个 到 WebSocket 服 务 器 的 连接 。url 参 数 指定 要 连接 的 服务 


器 ， 必 须 为 一 个 使 用 ws:// 或 wss://URL 模 式 的 绝对 URL。protocols 参 数 是 
一 个 由 子 协议 名 组 成 的 数组 。 如 末 指 定 这 个 参数 ， 则 客户 剖 将 告诉 服务 
恬 病 可 以 “交谈 ”的 通信 协议 或 协议 版 本 。 服 务 费 必须 从 中 选 一 个 并 通知 
客户 端 ， 这 一 切 都 是 连接 过 程 的 一 部 分 。protocols 也 可 以 以 一 个 字符 串 
的 形式 而 不 是 数组 的 形式 定义 : 这 种 情况 下 ， 它 当做 一 个 长 度 为 1 的 数 
组 处 理 。 

常量 

下 面 的 常量 为 readyState 属 性 可 能 的 值 。 

unsigned short CONNECTING=0 

连接 进程 正在 进行 。 

unsigned short OPEN=1 

当前 WebSocket 已 连接 到 服务 器 ， 可 以 发 送 和 接收 消息 。 

Unsigned short CLOSING=2 

连接 正在 关闭 。 

unsigned short CLOSED=3 

连接 已 关闭 。 

属性 

readonly unsigned long bufferedAmount 

刚刚 传 给 s en d0 方 法 但 还 没有 真正 发 送 的 文本 的 字符 数 。 如 果 要 发 
人 可 以 使 用 这 个 属性 来 避免 传送 消息 的 速度 比 它 们 可 发 送 

速度 快 。 


readonly string protocol 


如 果 给 WebSocket0 构 造 函 数 传 入 一 个 子 协议 数组 ， 则 服务 器 选择 
的 那个 协议 将 保存 在 这 个 属性 中 。 注 意 ， 当 第 一 次 创建 WebSocket 时 ， 


连接 还 没有 建立 ， 服 务 器 的 选择 也 还 未 知 ， 所 以 这 个 属性 开始 时 为 一 个 
空 字符 串 。 如 果 癌 构造 函数 传 入 知 干 协议 ， 则 当 open 事 件 被 触 肥 时， 这 
个 属性 将 改变 为 服务 需 选 择 的 子 协 议 。 


readonly unsigned short readyState 


WebSocket 连 接 的 当前 状态 。 这 个 属性 的 值 为 上 面 列 出 的 常量 之 


readonly string url 


这 个 属性 保存 传 入 到 WebSocket() 构 造 函 数 中 的 URL。 
方法 
void close() 


如 果 当 前 连接 不 处 在 已 关闭 或 正在 关闭 的 状态 ， 则 这 个 方法 将 开始 
关闭 它 ， 并 将 readyState 设 置 为 CLOSING。 即 便 在 调用 了 close() 方 法 之 
后 ， 仍 然 可 能 继续 触发 消 晨 事件， 直到 readyState 改 变 为 CLOSED 并 且 解 
发 close 事 件 。 





void send(string data) 


这 个 方法 将 指定 的 data 发 送 到 当前 WebSocket 连 接 的 另 一 端的 服务 
器 。 如 果 在 触发 open 事 件 之 前 ， 即 readyState 仍 然 为 CONNECTING 时 调 
用 这 个 方法 将 抛 出 一 个 异常 。WebSocket 协 议 支 持 二 进 制 数 据 ， 但 在 写 
作 本 书 的 时 候 ，WebSocket API 还 只 允许 发 送 和 接收 字符 串 。 


事件 处 理 程序 


网 络 通 信 本 来 是 异步 的 ， 类 似 于 XMLHttpRequest，WebSocket API 
是 基于 事件 的 。WebSocket 定 义 了 4 个 事件 处 理 程序 注册 属性 ， 同 时 也 实 
现 了 EventTarget， 上 所 以 也 可 以 使 用 EventTarget 方 法 来 注册 事件 处 理 程 
序 。 下 面 描述 的 事件 都 在 WebSocket 对 象 上 和 触发， 它们 都 不 会 冒 泡 ， 也 
人 不 过 需要 注意 ， 它 们 各 自 有 着 不 同 的 关联 
对 家 。 





onclose 


WebSocket 连 接 关 闭 时 将 触发 一 个 close 事 件 (同时 readyState 将 改变 
为 CLOSED) 。 关 联 的 事件 对 象 为 CloseEvent， 指 明 当 前 连接 是 否 干净 
地 关闭 了 。 


OnNeIrror 


当 发 生 网 络 或 WebSocket 协 议 错 误 时 将 触发 一 个 error 事 件 。 关 联 的 
事件 对 象 为 一 个 简单 的 Event。 


onmessage 
当 服 务 器 通过 WebSocket 发 送 数 据 时 ， 这 个 WebSocket 将 触发 一 个 
message 事 件 ， 伴 随 着 一 个 关联 的 MessageEvent 对 象 ， 该 对 象 的 data 属 性 
虽 代 接收 到 的 消息 。 


onopen 





在 与 指定 url 之 间 的 连接 建立 起 来 之 前 ，WebSocket0O 构 造 函 数 就 返 
回 了 。 当 连接 握手 完成 ，WebSocket 已 准备 好 发 送 和 接收 数据 时 ， 将 触 
发 一 个 open 事 件 。 关 联 的 事件 对 象 为 一 个 简单 的 Event。 


Window 
浏览 占 窗 口 、 标 签 或 框架 页 面 
EventTarget 


Window 对 象 表示 一 个 浏览 器 窗口 、 标 签 或 者 框架 页 面 。 它 的 详细 
文档 见 第 14 章 。 在 客户 端 JavaScript 中 ，Window 是 “全 局 对 象 ”， 所 有 表 
达 式 都 是 在 当前 Window 对 象 的 上 下 文中 计算 的 。 这 就 是 说 ， 引 用 当前 
window 不 需要 特殊 的 语法 ， 可 以 将 window 对 象 的 属性 像 全 局 变量 一 样 
使 用 。 例 如 ， 可 以 将 window.document 写 成 document。 类 似 地 ， 可 以 像 
函数 一 样 使 用 当前 window 对 象 的 方法 ， 例 如 将 window.alertO) 写 成 
alert()。 


这 个 对 象 的 一 些 属性 及 方法 的 确 以 茶 种 方式 查询 或 操作 浏览 右 窗 


口 ， 而 另外 那些 列 在 这 儿 是 因为 它 是 全 局 对 象 。 除 了 这 儿 列 出 的 属性 和 
方法 ，Window 对 象 也 实现 了 核心 JavaScript 定 义 的 所 有 全 局 属性 和 函 





数 。 更 多 细节 参见 本 书 第 三 部 分 的 Global。 


Web 浏 览 器 会 在 window 上 触发 很 多 种 事件 。 这 意味 着 Window 对 象 
定义 了 相当 多 的 事件 处 理 程序 ， 同 时 ，Window 对 象 也 实现 由 
EventTarget 定 义 的 各 个 方法 。 


Window 对 象 的 window 和 self 属 性 都 指 代 当前 窗口 对 象 本 身 。 可 以 使 
用 这 两 个 属性 来 显 式 引 用 当前 窗口 。 


一 个 Window 可 以 包含 别 的 Window 对 象 ， 通 常 以 二 iframe> 标 签 的 
形式 。 每 个 Window 都 是 由 髓 套 的 Window 对 象 组 成 的 一 个 类 数组 对 象 。 
不 过 ， 一般 不 采用 直接 检索 一 个 Window 对 象 的 方法 ， 而 是 使 用 它 的 自 
引用 的 frames 属 性 ， 把 这 个 属性 当做 对 应 的 类 数组 对 象 。Window 的 
parent 和 top 属性 则 指 代 当前 窗口 的 直接 容器 窗口 以 及 顶层 祖先 窗口 。 


可 以 使 用 Window.open0) 方 法 来 创建 新 的 顶级 浏览 器 窗口 。 调 用 这 
个 方法 时 ， 可 以 将 open0 的 返回 值 保 存在 一 个 变量 里 ， 之 后 可 通过 这 个 
变量 来 引用 这 个 新 窗口 。 新 窗口 的 opener 属 性 则 指 回 打开 它 的 那个 窗 
口 。 




















属性 


除了 这 儿 列 出 的 属性 ， 显 示 在 窗口 中 的 文档 内 容 也 会 生成 新 的 属 
性 。 如 同 14.7 节 解释 过 的 ， 可 以 将 文档 中 的 元 素 的 id 属 性 值 作为 当前 
window 的 属性 来 引用 这 个 元 素 〈 并 且 由 于 window 是 全 局 对 象 ， 因 此 它 
的 属性 也 将 是 全 局 变量 ) 。 


readonly ApplicationCache applicationCache 


指 代 ApplicationCache 对 象 。 己 绥 存 的 或 离线 的 Web 应 用 可 以 使 用 这 
个 对 象 来 管理 它们 的 缓存 更 新 。 


readonly any dialogArguments 


在 由 showModalDialog0 创 建 的 Window 对 象 中 ， 这 个 属性 是 传 入 到 
showModalDialog0 的 arguments 值 。 在 常规 Window 对 象 中 不 存在 这 个 属 
性 。 更 多 信息 可 参见 14.5 节 。 





readonly Document document 


描述 当前 窗口 的 内 容 的 Document 对 象 〈 细 节 参 见 Document) 。 
readonly Event event[IE only] 


在 Internet Explorer 中 ， 这 个 属性 指 癌 描述 最 近 的 事件 的 Event 对 和 象 。 
在 IE8 及 更 早 的 版 本 中 ， 事 件 对 象 并 不 总 是 会 传 入 到 事件 处 理 程序 中 ， 
这 时 只 能 通过 这 个 属性 来 访问 事件 对 象 。 更 多 细节 可 参见 第 17 章 。 








readonly Element frameElement 


如 果 当 前 Window 位 于 一 个 二 iframe 二 中 ， 这 个 属性 将 指 代 这 个 
IFrame 元 素 。 对 顶级 窗口 来 说 ， 这 个 属性 将 为 null。 


readonly Window frames 


这 个 属性 类 似 于 self 和 window 属 性 ， 指 代 当 前 Window 对 象 本 号 。 
个 Window 对 象 都 是 由 它 包 含 的 框架 页 面 组 成 的 类 数组 对 象 。 如 果 要 引 
用 某 个 窗口 w 中 的 第 一 个 框架 页 面 ， 这 个 属性 允许 使 用 更 清晰 的 写法 
w.frames[0]， 而 不 是 w[0]。 





readonly History history 

当前 窗口 的 History 对 象 。 参 见 History。 
readonly long innerHeight 

readonly long innerWidth 


当前 窗口 显示 区 域 的 文档 的 高 度 和 宽度 ， 单 位 是 像 系 。IE8 及 更 早 
的 版 本 不 支持 这 些 属性 。 示 例 可 见 例 15-9。 








readonly unsigned long length 
当前 窗口 包含 的 框架 页 面 的 数目 。 参 见 frames。 
readonly Storage localStorage 


这 个 属性 指 代 一 个 提供 客户 端 名 / 值 对 存储 的 Storage 对 象 。 通 过 





localStorage 存 储 的 数据 对 任意 同 源 的 文档 都 可 见 并 共享 ， 并 将 持续 存在 
直到 被 用 户 或 其 他 脚本 删除 。 也 可 参见 sessionStorage 和 20.1 节 。 





readonly Location location 


轩 当前 窗口 的 Location 对 象 。 这 个 对 象 指 明 当 前 加 载 的 文档 的 URL。 
将 这 个 属性 设置 为 一 个 新 的 URL 字 符 串 将 导致 浏览 嚣 加载 并 显示 那个 
URE 的 内 容 。 参 见 Location 。 


string name 


当前 窗口 的 名 字 。name 属 性 是 可 选 的 ， 可 以 在 使 用 open() 方 法 创建 
窗口 时 指定 或 者 通过 二 frame 二 标签 的 name 属 性 指定 。 窗 口 的 name 可 用 
做 二 a 二 或 <form 二 标签 的 target 属 性 的 值 。 以 这 种 方式 使 用 target 属 性 ， 
表示 超 链 接连 接 的 文档 或 者 表单 提交 的 结果 应 该 在 指定 名 字 的 窗口 或 框 
架 页 面 中 显示 。 








readonly Navigator navigator 


指 代 Navigator 对 象 ， 该 对 象 提供 当前 We b 浏 览 右 的 版 本 及 配置 信 
。 参 见 Navigator。 


el 


readonly Window opener 


一 个 可 读 写 的 引用 ， 指 代 包 含 调用 open() 方 法 打开 当前 浏览 器 窗口 
的 脚本 的 那个 Window 对 象 ， 对 不 是 以 这 种 方式 创建 的 窗口 来 说 这 个 属 
性 为 null。 这 个 属性 只 对 顶级 窗口 对 应 的 Window 对 象 有 效 ， 对 框架 页 面 
无 效 。opener 属 性 很 有 用 ， 通 过 这 个 属性 ， 新 创建 的 窗口 可 以 引用 在 创 
建 它 的 窗口 中 定义 的 属性 和 函数 。 














readonly long outerHeight 
readonly long outerWidth 


这 两 个 属性 指明 当前 浏览 恬 窗 口 的 总 高 度 和 宽度 ， 单 位 为 像素 ， 包 
人 深 动 条 、 窗 口 边框 等 。IE8 及 更 早 的 版 本 不 支持 这 两 个 属 





readonly long pageXOffset 


readonly long pageY Offset 


当前 文档 滚 过 的 右边 〈pageXOffset) 及 下 边 (pageYOffset) 的 像 
素 值 。IE8 及 更 早 的 版 本 不 文 持 这 两 个 值 。 示 例 及 莱 容 下 的 代码 见 例 15- 
8。 


readonly Window parent 


包含 当前 窗口 的 Window 对 象 。 如 来 当 前 窗 
parent 属 性 将 指 代 当 前 窗 口 本 和 号 。 | 如 果 当 前 窗口 
parent 属 性 将 指 癌 包 含 它 的 窗口 或 框架 页 面 。 


古 一 个 顶级 窗口 ， 则 
一 个 框架 页 面 ， 则 





口 
是 





string returnValue 


普通 窗口 没有 这 个 属性 ， 它 适用 于 由 showModalDialog0 创 建 的 
Window， 默 认 值 为 空 字符 串 。 一 个 对 话 框 窗口 天 闭 时 (参见 close0) 方 
法 ) ， 这 个 属性 的 值 将 成 为 showModalDialog0 的 返回 值 。 


readonly Screen screen 


Screen 对 象 指 定 关 于 当前 屏幕 的 信息 : 有 效 的 像素 数 和 色彩 数 。 细 
节 可 参见 Screen 。 





readonly long Screen 入 
readonly long ScreenY 
当前 窗口 的 左上 角 在 屏幕 中 的 坐标 。 
readonly Window self 


对 当前 窗口 自 映 的 一 个 引用 。 它 是 window 属 性 的 一 个 同义词 。 





readonly Storage sessionStorage 


这 个 属性 指 代 一 个 提供 客户 端 名 / 值 对 存储 的 Storage 对 象 。 通 过 
sessionStorage 存 储 的 数据 只 对 在 同样 的 项 级 窗口 或 标签 中 的 同 源 文档 可 
见 ， 并 只 持续 到 当前 浏览 会 话 结束 。 也 可 参见 localStorage 和 20.1 节 。 





readonly Window top 


包含 当前 窗口 的 顶级 窗口 。 如 采 当 前 窗口 本 身 已 经 是 顶级 窗口 了 ， 
则 这 个 top 属 性 将 只 是 简单 地 指 代 当 前 窗口 本 身 。 如 果 当 前 窗口 是 一 个 
框架 页 面 ， 则 top 属 性 将 指 代 包含 当前 框架 页 面 的 顶级 窗口 。 注 意 它 与 
parent 属 性 的 不 同 。 


readonly object URL 


在 写作 本 书 的 时 候 ， 这 个 属性 还 只 是 简单 地 引用 一 个 占 位 对 象 ， 这 
个 对 象 定义 的 函数 的 文档 见 URL 部 分 。 将 来 ， 这 个 属性 可 能 会 变 成 一 个 
URLO 构 造 函 数 并 定义 用 于 解析 URL 和 它们 的 查询 字符 串 的 API。 

















readonly Window window 


window 属 性 和 self 属 性 完全 一 样 ， 它 包含 对 当前 窗口 的 一 个 引用 。 
由 于 Window 对 象 是 客户 端 JavaScript 的 全 局 对 象 ， 因 此 这 个 属性 允许 写 
window 来 引用 这 个 全 局 对 象 。 


构造 沙 数 


作为 客户 端 JavaScript 的 全 局 对 象 ，Window 对 象 必 须 定 义 用 于 客户 
端 环境 的 所 有 全 局 构造 函数 。 虽 然 在 这 儿 没 有 列 出 ， 不 过 这 个 部 分 中 的 
所 有 全 局 构造 函数 都 是 window 对 象 的 属性 。 人 例如， 客户 端 JavaScript 定 
义 了 Image0 和 XMLHttpRequestO 构 造 函 数 的 事实 表示 ， 每 一 个 Window 
对 象 都 有 名 为 Imnage 和 XMLHttpRequest 的 属性 。 


方法 


Window 对 象 定 义 了 下 面 的 方法 ， 同 时 也 继承 了 由 核心 JavaScript 定 
义 的 所 有 全 局 函数 (参见 第 三 部 分 的 Global》。 








void alert(string message) 


alert() 方 法 在 一 个 对 话 框 中 向 用 户 显 示 一 段 指定 的 纯 文本 message。 
这 个 对 话 框 包含 一 个 OK 按钮 ， 用 户 可 以 单 击 以 便 关 闭 这 个 对 话 框 。 这 
个 对 话 框 一 般 是 模 态 的 至 少 对 当前 标签 而 言 是 这 样 )， 调 用 alert() 将 
阻塞 后 面 的 代码 ， 直 到 当前 对 话 框 关闭 。 








string atob(string atob) 


这 个 工具 函数 接收 一 个 基 64 编 码 的 字符 串 并 将 它 解码 为 一 个 
JavaScript 二 进 制 字符 串 ， 其 中 每 个 字符 代表 一 个 单独 的 字 节 。 可 以 使 用 
返回 的 字符 串 的 charCodeAtO 方 法 来 提取 字 节 值 。 也 可 参见 btoa0。 





void blur() 
blur0 方 法 将 键盘 焦点 从 当前 Window 对 象 指定 的 顶级 浏览 器 窗口 移 


除 。 它 不 会 指定 接 下 来 键盘 焦点 会 由 哪个 窗口 获得 。 在 茶 些 浏览 器 和 |/ 
或 平台 上 ， 这 个 方法 可 能 无 效 。 








string btoa(string btoa) 


这 个 工具 函数 接收 一 个 JavaScript 二 进 制 字符 串 (其 中 每 个 字符 代表 
一 个 单独 的 字 节 ) 作为 参数 ， 返 回 对 应 的 基 64 编 码 的 值 。 可 以 使 用 
String.fromCharCode0 来 从 一 个 任意 的 字 节 值 序 列 创建 一 个 二 进 制 字符 
串 。 也 可 参见 atob()。 











void clearInterval(long handle) 


clearInterval() 停 止 由 调用 setInterval() 开 始 的 某 段 代码 的 重复 执行 。 
intervalId 必 须 是 调用 setIntervalO 返 回 的 值 。 


void clearTimeout(long handle) 


clearTimeoutO 取 消 由 setTimeout(0) 方 法 推迟 的 某 段 代码 的 执行 。 
timeoutId 参 数 必 须 是 调用 setTimeoutO 的 返回 值 ， 它 标识 要 退出 哪 段 推迟 
的 代码 。 


void close() 


close() 方 法 关闭 调用 该 方法 的 顶级 窗口 。 脚 本 一 般 只 人 允许 关闭 由 它 
们 自己 打开 的 窗口 。 





boolean confrm(string message) 


这 个 方法 在 一 个 模 态 对 话 框 中 以 纯 文本 的 形式 显示 指定 的 问题 。 这 
个 对 话 框 包含 OK 和 Cancel 按 钮 ， 用 户 可 通过 这 两 个 按钮 回答 提出 的 问 


题 。 如 果 用 户 单 击 OK 按 钮 ，confirm0 将 返回 true。 如 果 用 户 单 击 Cancel 
按钮 ，confirm() 将 返回 false。 


void focus() 








这 个 方法 让 当前 浏览 器 窗口 获得 键盘 焦点 。 在 大 多 数 平台 上 ， 当 项 
级 窗口 获得 焦点 时 ， 它 将 显示 到 窗口 栈 的 项 部， 这 样 它 就 会 变 得 可 见 。 








CSSStyleDeclaration getComputedStyle(Element elt,[string pseudoElt]) 


文档 中 的 一 个 元 系 可 以 从 内 联 样式 属性 以 及 样式 表 “ 级 联 ? 中 任意 数 
量 的 样式 表 中 获得 样式 信息 。 在 茶 个 元 素 正 式 显 示 在 窗口 中 之 前 ， 必 须 
先 从 这 个 级 联 中 提取 它 的 样式 信息 ， 同 时 那些 以 相对 单位 (如 百分比 或 
是 "ems") 定义 的 样式 也 必须 “计算 ”出 来 以 便 转换 为 像 系 。 这 些 计 算出 
的 值 有 时 也 叫做 “使 用 ”的 值 。 


这 个 方法 返回 一 个 只 读 的 CSSStyleDeclaration 对 象 ， 反 映 了 显示 这 
个 元 素 实 际 使 用 的 CSS 样 式 值 。 所 有 的 尺寸 都 以 像素 为 单位 。 


这 个 方法 的 第 二 个 参数 通 稼 省 略 或 为 null， 不 过 也 可 以 传 入 CSS 伪 
元 素 "::before" 或 "::after" 来 决定 用 于 CSS 生 成 内 容 的 样式 。 


比较 一 下 HTMLElement 的 getComputedStyle() 和 style 属 性 ， 后 者 允许 
访问 某 个 元 素 的 内 联 样式 ， 使 用 它们 定义 时 的 单位 ， 并 且 不 包括 任何 应 
用 到 该 元 素 的 样式 表 样 式 信息 。 


在 IE8 及 更 早 的 版 本 中 不 支持 这 个 方法 ， 不 过 可 以 通过 每 个 
HTMLElement 对 象 的 非 标 准 属性 currentStyle 来 完成 相似 功能 。 




















Window open([string urlj,lstring targetl],[string features],[string 
replace]) 


open0 方 法 在 一 个 新 的 或 现存 的 浏览 器 窗口 或 标签 中 加 载 并 显示 指 
定 的 urll。url 参 数 指定 要 加 载 的 文档 。 如 果 没 有 指定 ， 则 将 使 
用 "about:blank"。 


target 参 数 指定 用 于 加 载 指 定 url 的 窗口 的 名 字 。 如 果 没 有 指定 ， 则 
将 使 用 "_blank"。 如 果 target 为 "_blank"， 或 不 存在 指定 名 字 的 已 有 窗 
口 ， 则 将 创建 一 个 新 窗口 来 显示 url 的 内 容 。 否 则 ，url 将 在 现存 的 指定 








名 字 的 窗口 中 加 载 。 


features 参 数 用 于 指定 窗口 的 位 置 、 尺 寸 以 及 特性 (比如 菜单 栏 、 工 
具 栏 等 ) 。 在 支持 标签 的 现代 浏览 器 中 ， 这 个 参数 通常 会 忽略 ， 所 以 这 
儿 没 有 列 出 它 的 文档 。 


当 使 用 Window.open0) 在 一 个 已 经 存在 的 窗口 中 加 载 新 文档 时 ， 
replace 参 数 指定 狐 文 档 是 否 在 这 个 窗口 的 浏览 历史 中 添加 一 条 目 己 的 记 
录 ， 或 者 蔡 换 当前 文档 的 历史 记录 。 如 果 replace 为 tue， 则 新 文档 将 和 蔡 
换 挥 旧 文 档 。 如 果 这 个 参数 为 false 或 未 指定 ， 则 新 文档 将 在 该 Window 
的 浏览 历史 中 有 一 条 自己 的 记录 。 这 个 参数 提供 的 功能 非常 类 似 
Location.replace() 方 法 。 

















Void postMessage(any message,string targetOrigin, 
[MessagePort[ lports]) 
仅 当当 前 窗口 显示 的 文档 有 指定 的 targetOrigin 时 ， 发 送 指定 





message 以 及 可 选 ports 的 一 个 副本 到 当前 窗口 中 。 


messa ge 可 以 是 任意 能 用 结构 性 复制 算法 (参见 22.2 节 的 “结构 性 复 
制 ") 复制 的 对 象 。targetOrigin 应 该 是 一 个 指定 期 望 源 的 模式 、 主 机 以 
及 病 口 的 绝对 URL。 如 果 任 意 源 都 可 接受 ，targetOrigin 也 可 以 是 “*”， 
或 者 如 果 想 使 用 脚本 自身 的 源 则 可 以 是 “/”。 


壬 一 个 窗口 上 调用 这 个 方法 将 在 这 个 窗口 上 触发 一 个 消息 事件 。 参 
见 MessageEvent 和 22.3 节 。 








void print() 


调用 print(0 方 法 ， 效 果 等 同 于 用 户 选 择 浏览 右 的 “打印 ”按钮 或 集 单 
项 。 一 般 来 说 ， 这 会 弹出 一 个 对 话 框 ， 人 允许 用 户 取消 或 定制 打印 请 求 。 

string prompt(string message,[string default]) 

prompt() 方 法 在 一 个 模 态 对 话 框 中 显示 指定 的 message， 同 时 包含 一 
个 文本 输入 区 以 及 OK 和 Cancel 按 钮 ， 它 将 阻塞 页 面 ， 直 到 用 户 单 击 这 
两 个 按钮 中 的 一 个 。 


如 果 用 户 单 击 Cancel 按 钮 ，promptO 将 返回 null。 如 果 用 户 单 击 OK 





按钮 ， 则 prompt0) 将 返回 当前 在 对 话 框 中 的 文本 输入 区 显示 的 文本 。 
default 参 数 指定 文本 输入 区 的 初始 文本 。 
void scroll(long x,long y) 
这 个 方法 等 同 于 scrollTo()。 
void scrollBy(long x,long y) 


scrollBy() 深 动 当前 window 中 显示 的 文档 ，dx 和 dy 指定 深 动 的 相对 


呈 


void scrollTo(long x,long y) 


scrollTo() 深 动 当前 window 中 显示 的 文档 ， 如 果 可 能 的 话 ， 让 文档 
中 由 坐标 x 和 y 指 定 的 点 位 于 显示 区 域 的 左上 角 。 


long setInterval(function f,unsigned long interval,any args...) 


setIntervalO 将 函数 {f 注 册 为 interval 训 秒 后 调用 ， 并 且 接 下 来 每 隔 指 
定 的 interval 就 重复 调用 一 次 。 当 前 窗口 将 作为 调用 f 时 的 this 值 ， 同 时 所 
有 传 入 setInterval 的 额外 参数 args 将 传 入 f。 


setInterval() 返 回 一 个 数字 ， 稍 后 可 以 将 这 个 数字 传 入 到 
Window.clearInterval() 来 取消 这 上 段 代 人 码 的 执行 。 


由 于 历史 原因 ，f 可 能 是 一 段 字符 串 形 式 的 JavaScript 代 码 而 个 是 一 
个 函数 。 在 这 种 情况 下 ， 这 上段 字符 串 将 每 隔 interval 坚 秒 求 值 〈 就 像 它 们 
是 二 个 六 script>》 一 人 大: 


如 宁 你 想 推 迟 一 段 代 码 的 执行 ， 但 不 希望 它 重复 执行 ， 可 以 使 用 


setTimeout()。 














long setTimeout(function f,unsigned long timeout,any args...) 
setTimeout() 类 似 于 setInterval()， 不 同 之 处 是 它 只 执行 指定 的 函数 一 


次 : 它 将 人 广 册 为 timeout 坚 秒 后 调用 ， 并 返回 一 个 数字 ， 稍 后 可 将 这 个 
数字 传 入 clearTimeoutO 来 取消 延迟 的 调用 。 当 指定 的 时 间 过 去 后 ，f 将 


作为 Window 的 一 个 方法 调用 ， 同 时 会 传 入 任意 指定 的 args。 如 采 { 是 一 
个 字符 串 而 不 是 一 个 函数 ， 则 和 它 将 在 timeout 坚 秒 后 执行 ， 执 行 效果 就 像 
它 是 一 个 生 script 盖 一 样 。 


any ShowModalDialog(string url,[any arguments]) 


这 个 方法 创建 一 个 新 的 Window 对 象 ， 将 它 的 dialogArguments 属 性 
设 为 arfguments， 在 这 个 窗口 中 加 载 uol， 然 后 阻塞 进程 ， 直 到 这 个 窗口 
关闭 。 一 旦 关闭 ， 它 将 返回 这 个 窗口 的 returnValue 必 性。 讨论 及 示例 参 
见 14.5 方 和 例 14-4。 


事件 处 理 程序 


大 多 数 发 生 在 HTML 元 素 上 的 事件 会 在 文档 树 中 辐 上 冒 泡 ， 到 达 
Document 对 象 ， 然 后 再 到 达 Window 对 象 。 所 以 ， 在 Element 上 列 出 的 所 
有 事件 处 理 程 序 属 性 都 可 以 用 在 Window 对 象 上 。 另 外 ， 还 可 以 使 用 下 
面 列 出 的 事件 处 理 程序 属性 。 由 于 历史 原因 ， 这 儿 列 出 的 每 个 事件 处 理 
程序 属性 也 都 可 以 〈 作 为 一 个 HTML 属 性 或 JavaScript 属 性 ) 定义 在 去 
body> 元 素 上 。 


事件 处 理 程序 
onafterprint 
onbeforeprint 


onbeforeunload 


onblur 


ONerror 


onfocus 


onhashchange 


onload 


onmessage 


onoffline 
ononline 


onpagehide 


触发 条 件 
在 当前 窗口 的 内 容 输 出 之 后 
在 当前 窗口 的 内 容 输出 之 前 


在 从 当前 页 面 离开 之 前 。 如 果 返 回 值 为 一 个 字符 串 ， 或 者 这 个 处 理 程 
序 将 它 的 事件 对 象 的 returnValue 属 性 设置 为 一 个 字符 串 ， 则 这 个 字 
符 串 会 在 一 个 确认 对 话 框 中 显示 。 参 见 BeforeUn1oadEvent 


当当 前 窗口 失去 键盘 焦点 时 


当 发 生 一 个 JavaScript 错 误 时 。 这 不 是 一 个 常规 事件 处 理 程序 ， 参 见 
14.6 节 


当当 前 窗口 获得 键盘 焦点 时 


当当 前 文档 的 片段 标识 符 (参见 Location,hash) 作为 历史 导航 的 一 
个 结果 发 生 改变 时 (参见 HashChangeEvent，) 


当当 前 文档 以 及 它 的 外 部 资源 全 部 加 载 完成 时 
当 另 一 个 窗口 中 的 脚本 通过 postMessage() 方 法 发 送 一 条 消息 时 。 参 见 


MessageEvent 

当 浏览 器 从 Internet 掉 线 时 

当 浏 览 器 再 次 连接 到 Internet 时 

当当 前 页 面 正 要 缓存 并 锌 另 一 个 页 面 替 换 时 


事件 处 理 程序 


onpageshow 


onpopstate 


onresize 
onscroll 
onstorage 


onunload 


Worker 


worker 线 程 


EventTarget 


触发 条 件 

当 一 个 页 面 第 一 次 加 载 时 ， 在 1oad 事 件 之 后 将 紧 接 着 触发 一 个 
pageshow 事 件 ， 对 应 的 事件 对 象 将 有 一 个 值 为 false 的 persisted 属 
性 。 不 过 ， 当 之 前 加 载 过 的 页 面 从 浏览 器 的 内 存 缓存 中 恢复 时 ， 将 不 
会 触发 load 事 件 (因为 这 个 已 缓存 的 页 面 已 经 处 于 已 加 载 状 态 ) ， 但 
会 触发 一 个 pageshow 事 件 ， 且 这 个 事件 对 象 的 persisted 属 性 为 true。 
参见 pageTransitionEvent 

当 浏览 器 加 载 一 个 新 的 页 面 或 恢复 由 History,pushState() 或 History， 
TeplaceState( ) 保 存 的 一 个 状态 时 。 参 见 PopStateEvent 

当 用 户 改变 当前 浏览 器 窗口 的 尺寸 时 

当 用 户 滚动 当前 浏览 器 窗口 时 

localStorage 或 sessionStorage 的 内 容 发 生 改 变 。 参 见 StorageEvent 
浏览 句 从 一 个 页 面 时 航 离开 。 注 意 ， 如 果 为 一 个 页 面 注册 了 onunload 
处 理 程序 ， 则 这 个 页 面 将 不 能 缓存 。 要 让 用 户 不 用 重新 加 载 就 快速 返 
回 到 页 面 ， 应 该 使 用 onpagehide 


Worker 表 示 一 个 后 台 线 程 。 可 使 用 Worker0O 构 造 函 数 来 创建 一 个 新 
的 Worker， 传 入 一 个 JavaScript 代 码 文 件 的 URL 计 它 执 行 。 在 那个 文件 
中 的 JavaScript 代 码 可 以 使 用 同步 的 API 或 者 执行 计算 密集 型 任务 而 不 会 
导致 主 UI 线程 冻结 。Worker 在 一 个 完全 隔离 的 执行 上 下 文 (参见 
WorkerGlobalScope) 中 执行 它们 的 代码 ， 与 一 个 Worker 交 换 数 据 的 唯 


一 方式 是 使 用 异步 事件 。 可 以 调用 postMessage0) 来 向 Worker 发 送 数据 ， 
然后 处 理 消息 事件 以 接收 来 自 这 个 Worker 的 数据 。 


关于 Worker 线 程 的 介绍 可 参见 22.4 节 。 


构造 函数 





new Worker(string ScriptURLI) 





构造 一 个 新 的 Worker 对 象 ， 并 让 它 执 行 scriptURL 中 的 JavaScript 代 
但 s 


方法 
void postMessage(any message,[MessagePort[ lports]) 


发 送 消息 message 给 指定 Worker， 这 个 Worker 将 以 发 送 到 它 的 
onmessage 处 理 程序 的 MessageEvent 对 象 的 形式 接收 这 条 消息 。message 
可 以 是 一 个 JavaScript 的 原始 值 、 对 象 或 数组 ， 但 不 能 是 函数 。 客 户 端 类 
型 (如 ArrayBuffer、File、Blob 以 及 ImageData) 的 ， 但 不 0 
Document 和 Element 等 Node (细节 可 参见 22.2 节 的 “结构 性 复制 ”) 


可 选 的 ports 参 数 是 一 个 高 级 特性 ， 人 允许 传 入 一 个 或 多 个 直接 通信 通 
道 到 Worker 中 。 例 如 ， 如 果 创 建 了 两 个 Worker 对 象 ， 可 以 通过 为 它们 分 
别传 入 MessageChannel 的 一 个 终 问 让 它们 直接 相互 通信 。 





void terminate() 
停止 当前 Worker 并 中 止 它 正 在 执行 的 脚本 。 

事件 处 理 程序 

由 于 Worker 在 一 个 与 创建 它 的 环境 完全 分 离 的 执行 环境 中 运行 代 


码 ， 因 此 它 与 它 的 父 线程 通信 的 唯一 方式 就 是 事件 。 可 以 使 用 下 面 的 属 
性 来 注册 事件 处 理 程 序 或 者 使 用 EventTarget 方 法 。 











OILeITOT 


当 Worker 正 在 执行 的 脚本 中 抛 出 异常 ， 并 且 这 个 错误 没有 被 
WorkerGlobalScope 的 onerror 处 理 程序 处 理 时 ， 这 个 错误 将 在 当前 
Worker 对 象 上 触发 一 个 error 事 件 。 与 这 个 事件 关联 的 事件 对 象 是 一 个 
ErrorEvent。 这 个 错误 事件 不 会 冒 泡 。 如 果 这 个 Worker 属 于 另 一 个 
Worker， 取 消 这 个 错误 事件 将 阻止 它 同 上 传播 到 父 Worker。 如 果 当 前 
Worker 对 象 已 经 在 主线 程 中 ， 取 消 这 个 事件 可 能 会 阻止 它 在 JavaScript 
控制 台中 显示 。 





onmessage 


当 Worker 正 在 运行 的 脚本 调用 它 的 全 局 postMessage0O 函 数 〈 人 参见 
WorkerGlobalScope) 时 ， 将 会 在 这 个 Worker 对 象 上 触发 一 个 消 乱 事 
件 。 传 给 这 个 事件 处 理 程序 的 对 象 是 一 个 MessageEvent， 它 的 data 属 性 
包含 这 个 Worker 脚 本 传 给 postMessage() 的 值 的 一 个 副本 。 


WorkerGlobalScope 





EventTarget、Global 


Worker 线 程 运行 在 一 个 和 生成 它 的 父 进程 完全 不 同 的 执行 环境 里 。 
worker 的 全 局 变量 是 一 个 WorkerGlobalScope 对 象 ， 因 此 这 个 页 面 在 一 个 
Worker 中 描述 了 对 应 的 执行 环境 。 由 于 WorkerGlobalScope 是 一 个 全 局 
对 象 ， 因 此 它 继 承 自 核 心 JavaScript 的 Global 对 象 。 


属性 


除了 这 儿 列 出 的 属性 ，WorkerGlobalScope 也 定义 了 核心 JavaScript 
的 所 有 全 局 属性 ， 比 如 Math 和 JSON。 


readonly WorkerLocation location 

这 个 属性 类 似 于 window.location 对 应 的 Location 对 象 : 允许 一 个 
worker 检 查 它 加 载 自 哪 个 URL， 同 时 包含 一 些 返 回 这 个 URL 的 独立 部 分 
的 属性 。 

readonly WorkerNavigator navigator 


这 个 属性 类 似 于 window.navigator 对 应 的 Navigator 对 象 : worker 可 根 








据 它 定义 的 属性 判断 当前 它 正 在 运行 的 浏览 器 以 及 它 当 前 是 否 在 线 。 
readonly WorkerGlobalScope self 


这 个 自 引 用 的 属性 指 代 当前 WorkerGlobalScope 全 局 对 象 本 身 。 它 
类 似 于 主线 程 中 Window 对 象 中 的 window 属 性 。 


方法 





除了 这 儿 列 出 的 方法 ，WorkerGlobalScope 也 定义 了 核心 JavaScript 
的 所 有 全 局 函数 ， 例 如 isNaN() 和 eval()。 


void clearInterval(long handle) 

这 个 方法 和 Window 中 同名 的 方法 一 样 。 
void clearTimeout(long handle) 

这 个 方法 和 Window 中 同名 的 方法 一 样 。 
void close() 


这 个 方法 将 当前 worker 置 入 一 个 特殊 的 “关闭 ”状态 。 一 旦 进入 这 个 
状态 ， 它 将 不 会 触发 任何 计时 器 或 事件 。 脚 本 将 继续 执行 ， 直 到 它 返 回 
worker 的 事件 循环 ， 此 时 worker 将 停止 。 


void importScripts(string urls...) 


对 于 所 有 指定 的 urls， 这 个 方法 将 相对 于 当前 worker 地 址 解析 它 
们 ， 然 后 加 载 对 应 URL 的 内 容 ， 并 将 它们 的 内 容 当 做 JavaScript 代 码 执 
行 。 注 意 这 是 一 个 同步 方法 。 它 按 顺 序 加 载 并 执行 各 个 文件 ， 并 且 在 所 
有 脚本 执行 完 之 前 不 会 返回 。 不过， 如 果 任 何 脚本 抛 出 了 异常 ， 这 个 
异常 将 传播 并 且 阻 止 后 面 的 URL 的 加 载 与 执行 。) 


void postMessage(any message,[MessagePort[ lports]) 


发 送 一 条 message〔 以 及 一 个 可 选 的 端口 写 组 成 的 数组 ports〉 给 生 
成 当前 worker 的 线程 。 调 用 这 个 方法 将 在 父 线 程 的 Worker 对 象 上 触发 一 
个 消息 事件 ， 关 联 的 MessageEvent 对 象 的 data 属 性 为 message 的 一 个 副 








本 。 注 意 ， 在 worker 中 ，postMessage() 是 一 个 全 局 函数 。 
long setInterval(any handler,[any timeout],any args...) 
这 个 方法 和 Window 中 同名 的 方法 一 样 。 
long setTimeout(any handler,[any timeout],any args...) 
这 个 方法 和 Window 中 同名 的 方法 一 样 。 
构造 函数 


WorkerGlobalScope 包 含 核心 JavaScript 的 所 有 构造 函数 ， 如 
Array()、Date() 以 及 RegExp()。 它 也 为 诸如 XMLHttpRequest、 
FileReaderSync 甚 至 Worker 对 象 本 吴 等 定义 了 重要 的 客户 端 构 造 函 数 。 


事件 处 理 程序 


可 通过 设置 这 些 全 局 事件 处 理 程 序 属性 来 为 worker 注 册 事 件 处 理 程 
序 ， 也 可 以 使 用 由 WorkerGlobalScope 实 现 的 EventTarget 方 法 。 


OnNeIror 


这 不 是 一 个 普通 的 事件 处 理 程序 . 相对 于 Worker 的 onerror 属 性 ， 它 
更 像 Window 的 onerror 属 性 。 当 worker 中 发 生 了 一 个 未 处 理 的 异常 时 ， 
如 果 定 义 了 这 个 处 理 函 数 ， 则 它 将 被 调用 并 传 入 三 个 字符 串 参 数 ， 分 别 
定义 错误 消息 、 脚 本 UREL 以 及 一 个 行 号 。 如 果 这 个 函数 返回 false， 则 将 
认为 这 个 错误 已 经 处 理 ， 并 且 不 会 继续 传播 。 否 则 ， 如 果 没 有 设置 这 个 
属性 ， 或 错误 处 理 程 序 没 有 返回 false， 则 错误 将 传播 并 将 在 父 线程 的 
Worker 对 象 上 触发 一 个 错误 事件 。 





onmessage 


当 父 线程 调用 了 代表 当前 worker 的 Worker 对 象 的 postMessage() 方 法 
时 ， 将 在 当前 WorkerGlobalScope 上 触发 一 个 消息 事件 。 一 个 
MessageEvent 对 象 将 传 入 这 个 事件 处 理 函 数 ， 这 个 对 象 的 data 属 性 将 保 
存 父 线程 发 送 的 message 参 数 的 一 个 副本 。 





WorkerLocation 

worker 的 主 脚 本 的 URL 

WorkerGlobalScope 的 location 属 性 指 代 的 WorkerLocation 对 象 类 似 
Window 的 location 属 性 指 代 的 Location 对 象 : 它 表示 该 worker 的 主 脚 本 的 
URL， 同 时 定义 了 一 些 代 表 了 这 个 URL 的 各 个 部 分 的 属性 。 

Worker 和 Window 的 不 同 之 处 是 它们 不 能 导航 或 重新 加 载 ， 所 以 对 
应 WorkerLocation 对 象 的 属性 是 只 读 的 ， 这 个 对 象 也 没有 实现 Location 对 
象 的 各 个 方法 。 


WorkerLocation 对 象 不 像 一 个 通常 的 地 址 对 象 那 样 会 自动 转化 为 字 
符 串 。 在 worker 中 ， 不 能 将 location.href 简 写 为 location。 


属性 

这 些 属 性 和 Location 对 象 的 同名 属性 含义 相同 。 
readonly string hash 

UREIL 的 片段 标识 符 ， 包 括 开 头 的 哈 希 标记 。 
readonly string host 

当前 URL 的 主机 和 端口 部 分 。 

readonly string hostname 

当前 URL 的 主机 部 分 。 

readonly string href 


传 入 Worker0 构 造 函 数 的 完整 的 UREL 文 本 。 这 是 worker 直 接 从 它 的 
父 线程 中 接收 的 唯一 值 : 其 他 值 都 间接 地 通过 消息 事件 接收 。 


readonly string pathname 


当前 URE 的 路 径 名 部 分 。 


readonly string port 

当前 URL 的 端口 部 分 。 

readonly string protocol 

当前 URL 的 协议 部 分 。 

readonly string search 

当前 URL 的 搜索 或 查询 部 分 ， 包 括 开 头 的 问号 。 
WorkerNavigator 

worker 的 浏览 器 信息 


WorkerGlobalScope 的 navigator 属 性 指 代 一 个 WorkerNavigator 对 象 ， 
这 个 对 象 是 Window 的 Navigator 对 象 的 一 个 简化 版 本 。 


属性 

这 些 属性 和 Navigator 对 象 中 的 同名 属性 含义 相同 。 
readonly string appName 

参见 Navigator 的 appName 属 性 。 

readonly string appVersion 

参见 Navigator 的 appVersion 属 性 。 

readonly boolean onLine 

如 果 当 前 浏览 器 在 线 则 为 tue; 否则 为 false。 
readonly string platform 


一 个 标识 运行 当前 浏览 器 的 操作 系统 以 及 /或 硬件 平台 的 字符 串 。 


readonly string userAgent 

浏览 器 用 于 HTTP 请 求 的 user-agent 头 信息 的 值 。 
XMLHttpRequest 

HTTP 请 求 及 响应 

EventTarget 

XMLHttpRequest 对 象 允许 客户 端 JavaScript 发 出 HTTP 请 求 以 及 从 
Web 服 务 器 接收 响应 〈 必 须 是 XML ) 。XMLHttpRequest 是 第 18 章 的 主 
题 ， 那 一 章 包含 了 许多 关于 它 的 使 用 的 例子 。 

可 以 像 这 样 使 用 XMLHttpRequestO 构 造 函 数 〈 关 于 如 何在 IE6 中 创 


建 一 个 XMLHttpRequest 对 象 的 信息 请 参见 18.1 的 边栏 ) 创建 一 个 
XMLHttpRequest 并 使 用 它 : 





1. 调 用 open() 指 明 URL 和 请 求 的 方法 (通常 是 "GET" 或 "POST") 。 


2. 设 置 onreadystatechange 属 性 为 一 个 函数 ， 请 求 的 进度 会 通知 这 个 
函数 。 


3. 如 果 需 要 的 话 ， 调 用 setRequestHeader() 来 指定 额外 的 请 求 参数 。 


4. 调 用 send0 将 请 求 发 送 到 Web 服 务 器 。 如 果 这 是 一 个 POST 请 求 ， 
也 可 以 传 入 一 个 请 求 主体 (request ”body) 到 这 个 方法 中 。 随 着 请 求 进 
行 ，onreadystatechage 事 件 处 理 函 数 将 被 调用 。 当 readyState 为 4 时 ， 表 示 
啊 应 完成 。 


5. 当 readyState 为 4 时 ， 检 查 状 态 码 status， 以 便 确 保 请 求 成 功 。 如 果 
成 功 ， 可 使 用 getResponseHeader0) 或 getResponseHeaders(0) 来 从 响应 头 中 
检索 值 ， 使 用 responseText 或 responseXML 属 性 来 取得 啊 应 主体 。 


XMLHttpRequest 定 义 了 HTTP 协 议 的 一 个 相对 高 级 的 接口 ， 关 于 重 
定向、cookie 管 理 以 及 使 用 CORS 头 协商 跨 域 连接 等 细节 都 将 由 它 处 
理 。 





上 面 介 绍 的 XMLHttpRequest 特 性 在 所 有 现代 浏览 器 中 都 有 很 好 的 
支持 。 在 写作 杰 书 的 时 候 ， 一 个 XMLHttpRequest Level 2 标准 正在 开始 
发 布 ， 并 且 一 些 浏览 器 已 经 开始 实现 它 。 下 面 列 出 的 属性 、 方 法 以 及 事 
件 处 理 程序 包含 XMLHttpRequest Level 2 特性 ， 这 些 特性 可 能 还 没有 被 
所 有 浏览 器 实现 。 这 些 新 特性 将 用 "XHR2" 标 记 。 


构造 函数 





new XMLHttpRequest() 





这 个 无 参数 的 构造 函数 返回 一 个 XMLHttpRequest 对 象 。 


Am _E 
种 量 





这 些 常量 定义 readyState 属 性 的 值 。 在 XHR2 之 前 ， 这 些 常量 没有 广 
泛 定 义 ， 大 多 数 代 码 使 用 整数 字面 量 而 不 是 这 些 符 号 值 。 


Unsigned short UNSENT=0 





这 是 XMLHttpRequest 对 象 刚 创建 或 被 abort() 方 法 重 置 时 readyState 属 
性 的 初始 值 。 


unsigned short OPENED=1 
已 经 调用 open() 方 法 ， 但 还 没 调用 send() 方 法 。 还 没有 发 送 请 求 。 
unsigned short HEADERS_RECEIVED=2 


. send(0) 方 法 已 调用 ， 已 经 接收 到 啊 应 头 ， 但 还 没有 接收 到 啊 应 主 


unsigned short LOADING=3 

正在 接收 啊 应 主体 ， 但 还 没有 完成 。 
unsigned short DONE=4 
HTTP 啊 应 已 全 部 接收 ， 或 由 于 错误 而 停止 。 


属性 
readonly unsigned short readyState 


HTTP 请 求 的 状态 以 及 服务 器 的 响应 。 当 一 个 XMLHttpRequest 首 次 
创建 时 这 个 属性 的 值 为 0， 然 后 逐渐 递增 ， 当 整个 HTTP 响 应 已 接收 到 时 
这 个 属性 增加 为 4。 上 面 列 出 的 常量 指定 了 可 能 的 值 。 


readyState 的 值 永远 不 会 递减 ， 除 非 在 一 个 正在 进行 中 的 请 求 上 调 
用 了 abort() 或 open()。 


理论 上 ， 每 当 这 个 属性 的 值 改 变 时 都 会 分 发 一 个 readystatechange 事 
件 。 但 实际 上 ， 只 有 readyState 改 变 为 4 时 才 保 证 会 触发 这 个 事件 。 
CXHR2 的 进度 事件 提供 了 一 种 更 可 靠 的 跟 踩 请 求 处 理 的 方法 。) 


readonly any response 


在 XHR2 中 ， 这 个 属性 保存 服务 器 的 啊 应 。 它 的 类 型 取决 于 
responseType 属 性 。 如 果 responseType 为 空 字 符 串 或 "text"， 这 个 属性 将 
把 啊 应 主体 当做 一 个 字符 串 。 如 果 reponseType 为 "document"， 这 个 属性 
将 把 啊 应 主体 解析 为 一 个 XML 或 HTTP Document。 如 果 responseType 
是 "arraybuffer"， 这 个 属性 将 是 一 个 代表 啊 应 主体 的 字 节 的 ArrayBuffer 
对 象 。 如 果 responseType 是 "blob"， 这 个 属性 将 是 一 个 代表 啊 应 主体 的 字 
节 的 Blob 对 象 。 





readonly string responseText 


如 果 readyState 小 于 3， 这 个 属性 将 是 空 字符 串 。 当 readyState 为 3 
时 ， 这 个 属性 将 返回 目前 已 接收 到 的 啊 应 部 分 。 如 果 readyState 为 4， 这 
个 属性 的 值 为 啊 应 的 全 部 主体 。 如 果 当 前 响应 的 头 信 息 指 定 主体 的 字符 
编 鸽 ， 则 这 个 编码 将 被 使 用 。 人 否则 ， 默 认 将 使 用 Unicode UTF-8 编 码 。 


string responseType 


在 XHR2 中 ， 这 个 属性 指明 期 望 的 啊 应 类 型 ， 并 判断 response 属 性 的 
类 型 。 合 法 的 值 有 "text"、"document"、"arraybuffer" 以 及 "blob"。 默 认 值 
为 空 字 符 串 ， 等 同 于 "text"。 如 果 设 置 这 个 属性 ，responseText 和 
responseXML 属 性 将 抛 出 异常 ， 必 须 使 用 XHR2 的 response 属 性 来 获得 服 


务 器 的 啊 应 。 
readonly Document responseXML 


请 求 对 应 的 响应 ， 己 解析 为 一 个 XML 或 HTML Document 对 象 ， 如 
果 啊 应 主体 还 没有 就 绪 或 不 是 一 个 有 效 的 XML 或 HTML 文 档 则 为 null。 





readonly unsigned short status 


服务 器 返回 的 HTTP 状 态 码 ， 比 如 200 代 表 成 功 ，404 代 表 “ 页 面 未 找 
到 ”错误 ， 如 果 服 务 吉 还 设 有 设置 状态 码 则 为 0。 


readonly string statusText 


这 个 属性 使 用 名 字 而 不 是 数字 来 指定 请 求 的 HTTP 状 态 码 。 就 是 
说 ， 当 状态 为 200 时 它 将 是 "OK'"， 状 态 是 404 时 它 将 是 "Not Found"。 如 
果 服 务 器 还 没有 设置 状态 码 ， 这 个 属性 将 为 空 字符 串 。 





unsigned long timeout 

这 个 XHR2 属 性 指定 一 个 超时 时 间 ， 单 位 为 之 秒 。 如 果 HTTP 请 求 花 
费 的 时 间 超 过 这 个 时 间 ， 它 将 中 止 ， 同 时 触发 一 个 超时 事件 。 只 能 在 调 
用 open0 之 后 以 及 调用 send0 之 前 设置 这 个 属性 。 

readonly XML HttpRequestUpload upload 


这 个 XHR2 属 性 指 代 一 个 XMLHttpRequestUpload 对 象 ， 该 对 象 定义 
一 系列 用 于 监视 HITP 请 求 主体 上 传 进度 的 事件 处 理 程序 注册 属性 。 


boolean withCredentials 


这 个 XHR2 属 性 指定 授权 凭证 是 否 应 该 包含 在 CORS 请 求 中 ， 以 及 
CORS 啊 应 中 的 cookie 头 信息 是 否 应 该 处 理 。 默 认 值 为 false。 


方法 





void abort() 


这 个 方法 将 当前 XMLHttpRequest 对 象 重 置 为 readyState 为 0 的 状态 ， 


同时 取消 所 有 推迟 的 网 络 活动 。 例 如 ， 如 果 一 个 请 求 占 用 太 长 的 时 间 ， 
但 对 应 的 啊 应 已 经 不 再 需要 了 ， 就 可 以 调用 这 个 方法 。 








string getAllResponseHeaders() 


这 个 方法 返回 服务 器 发 送 的 HTTP 响 应 头 信息 (过 滤 掉 cookie 及 
CORS 头 信息 ) ， 如 宁 头 信息 还 没 接收 到 则 为 nall。 所 有 的 头 信息 以 一 个 
单独 的 字符 串 的 形式 返回 ， 每 行 一 个 头 信息 。 


string getResponseHeader(string header) 


返回 指定 名 字 的 HTTP 啊 应 header， 如 果 该 啊 应 头 还 没有 接收 到 或 者 
在 或 响应 中 不 存在 指定 header 则 为 null。cookie 和 CORS 相 关 的 头 信息 已 
过 滤 ， 不 可 通过 这 个 方法 查询。 如 果 啊 应 包含 多 个 这 个 指定 名 字 的 头 ， 
则 返回 的 字符 串 将 包含 所 有 这 些 头 的 值 ， 多 个 值 之 间 使 用 一 个 速 号 和 一 
个 空格 连接 与 分 隔 。 











void open(string method,string url,[boolean async,string user,string 
pass]) 


这 个 方法 重 置 当 前 XMLHttpRequest 对 象 ， 并 保存 这 些 参数 ， 用 于 
后 面 的 send(0) 方 法 。 


method 为 用 于 请 求 的 HTTP 方 法 。 己 可 靠 实现 的 值 包括 GET、POST 
以 及 HEAD。 有 些 浏览 器 可 能 也 实现 了 CONNECT、DELETE、 
OPTIONS、PUT、TRACE 以 及 TRACK 方法 。 


url 为 正在 请 求 的 URL。 相 对 URL 将 按 常 规 方 法 根据 包含 当前 脚本 的 
文档 的 URL 解 析 。 同 源 安全 策略 (参见 13.6.2 节 ) 要 求 这 个 URL 与 包含 
发 起 当前 请 求 的 脚本 的 文档 拥有 同样 的 主机 和 端口 。XHR2 人 允许 同文 持 
CORS 的 服务 器 发 起 跨 域 请 求 。 

如 果 指 定 async 参 数 并 且 值 为 false， 则 请 求 将 为 同步 方式 ，send() 方 
法 将 阻塞 页 面 ， 直 到 啊 应 完成 。 除 非 是 在 Worker 中 使 用 
XMLHttpRequest， 人 否则 不 推荐 使 用 这 个 方法 。 


可 选 的 user 和 pass 参 数 指定 用 于 HTTP 请 求 的 用 户 名 和 密码 。 











void overrideMimeType(string mime) 


这 个 方法 指明 使 用 指定 的 mime 类 型 《如果 包含 的 话 ， 还 有 字符 
集 ) 而 不 是 使 用 啊 应 的 头 信息 中 的 Content-Type 来 解析 服务 器 的 啊 应 。 


void send(any body) 


这 个 方法 发 出 一 个 HTTP 请 求 。 如 果 之 前 没有 调用 过 open()， 或 更 一 
般 一 些 ， 如 果 readyState 不 是 1，send0 将 抛 出 一 个 异常 。 否 则 ， 它 将 发 
起 一 个 包含 以 下 内容 的 HTTP 请 求 : 


.之 前 调用 open0 时 设置 的 HTTP 方 法 、UREL 以 及 授权 凭证 〈 如 果 有 
的 话 ) 。 


.之 前 调用 setRequestHeader0 定 义 的 请 求 头 信息 ， 如 果 有 的 话 。 


. 传 入 到 这 个 方法 的 body 参 数 。body 可 以 是 一 个 指定 请 求 主 体 的 字 
符 串 或 一 个 Document 对 象 ， 如 果 请 求 没有 主体 (例如 GET 请 求 就 不 会 有 
主体 ) 也 可 以 省 略 或 为 nmull。 在 XHR2 中 ， 主 体 也 可 以 是 一 个 
ArrayBuffer、 一 个 Blob 或 一 个 FormData 对 象 。 


如 果 之 前 调用 open0 时 的 async 参 数 为 false， 则 这 个 方法 将 阻塞 进 
程 ， 直 到 readyState 为 4 并 且 服 务 堪 的 啊 应 已 经 完全 接收 时 才 会 返回 。 合 
则 ，send0 将 立即 返回 ， 同 时 服务 器 的 啊 应 将 通过 事件 处 理 程序 提供 的 
通知 异步 地 处 理 。 


void setRequestHeader(string name,string value) 


setRequestHeader0O 指 定 一 个 HTTP 请 求 头 信息 的 name 和 value， 二 者 
将 包含 在 之 后 调用 send0 时 发 起 的 请 求 中 。 这 个 方法 只 能 在 readyState 为 
1 时 调用 ， 即 在 调用 open0 之 后 ， 但 在 调用 send0 之 前 。 


如 末 指 定 name 的 头 信息 已 经 定义 了 ， 则 这 个 头 信息 的 新 值 将 是 它 之 
前 的 值 加 一 个 有 逗号 、 一 个 空格 之 后 再 加 上 在 这 次 调用 中 指定 的 value。 


如 果 对 open0 的 调用 指定 了 授权 凭证 ， 则 XMLHttpRequest 将 上 自动 发 
送 一 个 适当 的 Authorization 请 求 头 信息 。 不 过 ， 也 可 以 使 用 
setRequestHeader() 方 法 手动 退 加 头 信息 。 











XMLHttpRequest 上 自动 设置 "Content-Length"、'"Date"、"Referer" 以 


及 "User-Agent"， 不 允许 谋 报 它们 。 还 有 一 -至 其 他 头 信息 ， 包 括 与 cookie 
相关 的 信息 ， 无 法 使 用 这 个 方法 来 设置 。 完 整 列 表 见 18. 1 节 。 


事件 处 理 程序 


最 初 的 XMLHttpRequest 对 象 只 定义 了 一 个 事件 处 理 程序 属性 : 
onreadystatechange。XHR 2 用 一 系列 更 容易 使 用 的 进度 事件 处 理 程序 扩 
展 这 个 列表 。 可 通过 设置 这 些 属性 或 使 用 EventTarget 的 方法 来 注册 事件 
处 理 程序 。XMLHttpRequest 事 件 总 是 分 发 到 XMLHttpRequest 对 象 本 
上身， 它们 不 会 冒 泡 ， 也 没有 可 供 取 消 的 默认 操作 。readystatechange 事 件 
ee 的 Event 对 象 ， 所 有 其 他 事件 类 型 有 一 个 关联 的 ProgressEvent 
对 家 。 


关于 可 用 于 监视 HTTP 上 传 进度 的 事件 列表 可 参见 upload 属 性 和 
XMLRequestUpload。 











onabort 


当 一 个 请 求 中 止 时 触发 。 








OILeITOT 


当 请 求 因 错误 失败 时 触发 。 注 意 ， 如 404 等 HTTP 状 态 码 不 会 造成 错 
误 ， 因 为 啊 应 仍然 成 功 地 完成 了 。 不 过 ， 解 析 URL 时 发 生 DNS 错误 或 一 
个 无 限 循环 的 重 定 癌 都 将 引发 这 个 事件 。 


onload 


当 请 求 成 功 完 成 时 触发 。 





onloadend 


在 load、abort、error 或 timeout 事 件 之 后 当前 请 求 成 功 或 失败 时 触 





onloadstart 


当 请 求 开始 时 触 友 。 


onprogress 
当 啊 应 主体 正在 下 载 时 重复 触发 〈 约 每 50ms 一 次 ) 。 
onreadystatechange 


当 readyState 属 性 改变 时 触发 ， 当 啊 应 完成 时 这 个 事件 最 重要 。 





ontimeout 
当 timeout 属 性 指定 的 时 间 已 经 过 去 但 啊 应 依旧 没有 完成 时 触发 。 
XMLHttpRequestUpload 








EventTarget 


XMLHttpRequestUpload 对 象 定 义 一 系列 事件 处 理 程序 注册 属性 ， 用 
于 监视 HTTP 请 求 主体 上 传 的 进度 。 在 实现 XMLHttpRequest Level 2 标准 
的 浏览 器 中 ， 每 个 XMLHttpRequest 对 象 都 有 一 个 指 代 这 类 对 象 的 upload 
属性 。 要 监视 请 求 上 传 的 进度 ， 只 须 简单 地 将 这 个 属性 设置 为 一 个 适当 
的 事件 处 理 函 数 或 调用 EventTarget 方 法 。 注 意 ， 这 儿 定 义 的 上 传 进度 事 
件 处 理 程序 和 XMLHttpRequest 上 自己 定义 的 下 载 进度 事件 处 理 程 序 完 全 
一 样 ， 除 了 在 这 个 对 象 中 没有 onreadystatechage 属 性 。 


事件 处 理 程序 








onabort 

当 上 传 中 止 时 触发 。 

onerror 

当 上 传 因为 网 络 错误 失败 时 触发 。 
onload 

当 上 传 成 功 时 触及 。 


onloadend 


当 上 传 结束 时 和 触发， 无 论 上 传 上 和 否 成 功 。loadend 事 件 总 是 跟 在 一 个 
load、abort、error 或 timeout 事 件 之 后 。 


onloadstart 
当 上 传 开始 时 触发 。 
onprogress 


上 传 过 程 中 重复 触发 〈 约 每 50ms 一 次 ) 。 





ontimeout 


当 上 传 因为 XMLHttpRequest 超 时 而 中 止 时 触发 。 





作者 介绍 
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封面 介绍 


本 书 封面 上 的 动物 是 爪哇 犀牛 〈Javan rhinoceros) 。 犀 牛 共有 5 
种 ， 都 以 庞大 的 体型 、 粗 厚 如 装甲 的 皮肤 、 三 趾 蹄 以 及 一 个 或 两 个 犀牛 
角 著 称 。 其 中 爪哇 犀牛 是 除了 苏门答腊 犀牛 之 外 栖 奶 在 森林 中 的 两 个 种 
| 但 体格 稍 小 一 些 ， 皮 肤 纹 
理 有 明显 不 同 。 


在 人 们 的 印象 中 ， 犀 牛 总 是 站 着 ， 把 犀牛 角 深 入 水 或 泥 中 。 它 们 经 
常 如 此 。 不 在 河 里 下 着 时 ， 犀 牛 会 到 泥 里 挖 一 个 很 深 的 坑 ， 在 里 面 打 
深 。 它 们 的 栖 娠 地 有 两 个 优点 。 首 先是 可 以 减轻 热带 的 酷热 ， 并 防治 止 
吸血 蚊虫 的 四 咬 ( 打 深 留 下 的 泥 也 可 以 防止 蚁 蝇 叮 咬 ) 。 其 次 ， 泥 坑 或 
河水 还 可 以 有 助 于 支撑 犀牛 庞大 的 身躯 ， 减 轻 它们 腿 部 和 背部 的 负担 。 


长 久 以 来 ， 民 间 传 说 犀牛 的 角 富 于 魔力 ， 而 且 拥 有 犀牛 角 的 人 也 可 
以 获得 这 种 魔力 。 这 是 犀牛 成 为 偷 猪 者 主要 目标 的 原因 之 一 。 各 种 犀牛 
都 濒临 灭绝 ， 其 中 爪哇 犀牛 最 为 稀少 ， 地 球 上 存活 的 疝 不 足 100 只 。 下 
哇 犀 牛 曾经 般 布 整个 东南 亚 ， 但 如 今 只 有 在 印度 尼 西 亚 和 越南 也 许 还 能 
找到 。 


本 书 封面 绘图 来 自 于 19 世 纪 的 Dover 画 报 中 的 版 画 
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